我有一个问题，我和我的一个朋友决定创建一个网站，让学童可以来学习编程、解决问题并参加编程竞赛。我们在 NextJS 中做的网站，并使用 Material UI、TailwindCSS。 Sanity IO 和 MongoDB 是后端。我还没有发布，站点链接：https://brackets.vercel.app/ 到目前为止，一切都很顺利，但我被困在一个地方。问题是，解题页面的右侧会有一个完整的问题，右侧会有一个代码编译器，用户可以坐在我们的网站上解决问题，而无需使用单独的编辑器，就像 Leetcode、edabit 一样，以及其他一些在线判断。我们的问题解决页面：（https://brackets.vercel.app/problemset/two-sum）我们无法以任何方式将任何代码编译器引入 NextJS。即使你可以在这里编码，但是你无法运行。我们在 YouTube 上找到了一个关于如何在 MERN Stack 上构建编译器的视频，但我们不在这里工作，尽管编码与他完全相同。
据我所知，我通过谷歌和Stackoverflow解决了这些小错误，但最终还是没能解决，请注意，他用Mac，我们用Windows，我认识的所有开发人员都来自编程英雄，连续两天。我根据要求召开了多次现场会议，但都没有找到任何解决方案。然后我得到了另一个博客，他复制到了 React，我们也复制到了 React，问题是每当我想将它带到 NextJs 时，我都会收到两个错误，“Can't set property localStorage of # which has only a getter”已解决，但是在本地服务器上运行，每当我重新加载时，它都会给出“
loaclStorage is not defined有另一个解决方案，但同样的情况，我去部署 Vercel 出现错误，我已附上所有教程链接和屏幕截图，先生。我尽了最大努力，与很多人交谈，但没有人对此无能为力。所以我最后还是惹恼了你，没有放弃。我该怎么做才能帮助我？我想我们离不开你们的合作。
我已遵循本教程 = https://www.youtube.com/watch?v=RZ66yGyEKFg（视频播放 24 分钟后无法使用）
我已经尝试过这个博客 - https://medium.com/dsckiit/make-your-own-online-compiler-in-react-%EF%B8%8F-b06bc29dd202（它正在反应，但当我将其转换为 nextJs 它给了我错误）
代码：
import React, { Component } from "react";
import "./Compiler.css";
export default class Compiler extends Component {
constructor(props) {
super(props);
this.state = {
input: localStorage.getItem('input')||``,
output: ``,
language_id:localStorage.getItem('language_Id')|| 2,
user_input: ``,
};
}
input = (event) => {
event.preventDefault();
this.setState({ input: event.target.value });
localStorage.setItem('input', event.target.value)
};
userInput = (event) => {
event.preventDefault();
this.setState({ user_input: event.target.value });
};
language = (event) => {
event.preventDefault();
this.setState({ language_id: event.target.value });
localStorage.setItem('language_Id',event.target.value)
};
submit = async (e) => {
e.preventDefault();
let outputText = document.getElementById("output");
outputText.innerHTML = "";
outputText.innerHTML += "Creating Submission ...\n";
const response = await fetch(
"https://judge0-ce.p.rapidapi.com/submissions",
{
method: "POST",
headers: {
"x-rapidapi-host": "judge0-ce.p.rapidapi.com",
"x-rapidapi-key": "*****************",
"content-type": "application/json",
accept: "application/json",
},
body: JSON.stringify({
source_code: this.state.input,
stdin: this.state.user_input,
language_id: this.state.language_id,
}),
}
);
outputText.innerHTML += "Submission Created ...\n";
const jsonResponse = await response.json();
let jsonGetSolution = {
status: { description: "Queue" },
stderr: null,
compile_output: null,
};
while (
jsonGetSolution.status.description !== "Accepted" &&
jsonGetSolution.stderr == null &&
jsonGetSolution.compile_output == null
) {
outputText.innerHTML = `Creating Submission ... \nSubmission Created ...\nChecking Submission Status\nstatus : ${jsonGetSolution.status.description}`;
if (jsonResponse.token) {
let url = `https://judge0-ce.p.rapidapi.com/submissions/${jsonResponse.token}?base64_encoded=true`;
const getSolution = await fetch(url, {
method: "GET",
headers: {
"x-rapidapi-host": "judge0-ce.p.rapidapi.com",
"x-rapidapi-key": "******************",
"content-type": "application/json",
},
});
jsonGetSolution = await getSolution.json();
}
}
if (jsonGetSolution.stdout) {
const output = atob(jsonGetSolution.stdout);
outputText.innerHTML = "";
outputText.innerHTML += `Results :\n${output}\nExecution Time : ${jsonGetSolution.time} Secs\nMemory used : ${jsonGetSolution.memory} bytes`;
} else if (jsonGetSolution.stderr) {
const error = atob(jsonGetSolution.stderr);
outputText.innerHTML = "";
outputText.innerHTML += `\n Error :${error}`;
} else {
const compilation_error = atob(jsonGetSolution.compile_output);
outputText.innerHTML = "";
outputText.innerHTML += `\n Error :${compilation_error}`;
}
};
render() {
return (
<>
<div className="row container-fluid">
<div className="col-6 ml-4 ">
<label htmlFor="solution ">
<span className="badge badge-info heading mt-2 ">
<i className="fas fa-code fa-fw fa-lg"></i> Code Here
</span>
</label>
<textarea
required
name="solution"
id="source"
onChange={this.input}
className=" source"
value={this.state.input}
></textarea>
<button
type="submit"
className="btn btn-danger ml-2 mr-2 "
onClick={this.submit}
>
<i className="fas fa-cog fa-fw"></i> Run
</button>
<label htmlFor="tags" className="mr-1">
<b className="heading">Language:</b>
</label>
<select
value={this.state.language_id}
onChange={this.language}
id="tags"
className="form-control form-inline mb-2 language"
>
<option value="54">C++</option>
<option value="50">C</option>
<option value="62">Java</option>
<option value="71">Python</option>
</select>
</div>
<div className="col-5">
<div>
<span className="badge badge-info heading my-2 ">
<i className="fas fa-exclamation fa-fw fa-md"></i> Output
</span>
<textarea id="output"></textarea>
</div>
</div>
</div>
<div className="mt-2 ml-5">
<span className="badge badge-primary heading my-2 ">
<i className="fas fa-user fa-fw fa-md"></i> User Input
</span>
<br />
<textarea id="input" onChange={this.userInput}></textarea>
</div>
</>
);
}
}
这在 NextJS 上不起作用，给出错误 本地存储未定义
嘿，你的问题解决了吗？虽然我是Python爱好者，但我找到了一个 nextjs 的有用资源。这是 fcc 的链接：https://youtu.be/GnodscC2p-A?si=nwokwgMAinjpJdXg