我有一个用 Next.js 14 和 React 编写的网站。但是，我的网站上有一个用基本 HTML 和 JavaScript 编写的页面。我加载它的方式是使用以下 middleware.js 文件来检测页面路径。
import { NextRequest, NextResponse } from "next/server";
export function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers);
requestHeaders.set("x-pathname", request.nextUrl.pathname);
return NextResponse.next({
request: {
headers: requestHeaders,
},
});
}
然后，我的layout.ts页面如下，它可以加载我的virtual_art_museum页面，而无需所有额外的react组件。
const Layout: React.FC<LayoutProps> = ({ children }) => {
const headersList = headers();
const pathName = headersList.get("x-pathname") as string;
const nonDefaultFormatPages = [
"/projects/virtual_art_museum",
];
// Returning an un-formatted page for any pages that require non-default format
if (nonDefaultFormatPages.includes(pathName) ) {
return (
<>{children}</>
)
}
return (
<html lang="en">
<HeadLoads />
<body className="layout" id="page-top">
<Header />
<main>{children}</main>
<Footer />
</body>
<FootLoads />
</html>
);
};
export default Layout;
这在运行“npm run dev”时效果很好。但是，当我将其部署到 Heroku 并在真实互联网上访问我的网站时，我收到错误“DOMException：无法在“Node”上执行“removeChild”：要删除的节点不是此节点的子节点。” 。我的 virtual_art_museum js 文件中有一行“document.body.appendChild(renderer.domElement);”但我不明白为什么它只有在部署时才会出现问题。为什么是这样？我添加了这些详细信息，因为问题似乎在于它将其视为仅需要一个父元素的反应页面。但是，当我在本地测试它时，怎么可能没有任何问题呢？
如果我可以添加任何可能有帮助的进一步信息，请告诉我！！
提前致谢<3
~~~~~~~~~~~~~~~ EDIT
要求我将html页面和js页面添加到帖子中。 js 页面很长，所以我不会完整添加它，但我可以在评论中回答您对此的任何问题。不过，我会添加下面的 html 页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<link type="text/css" rel="stylesheet" href="./css/vam.css" />
</head>
<body>
<div id="blocker">
<div id="instructions">
<p style="font-size:36px" >
Click to play
</p>
<p>
Controls <br/>
Move: WASD<br/>
Jump: SPACE<br/>
Look: MOUSE<br/><br/>
Play Audio: <input type="checkbox" id="playAudio" />
<audio loop id="mySong">
<source src="./audio/slum_city_nasty.mp3" type="audio/mpeg" />
Your browser does not support this audioplayer.
</audio><br/>
<a href="/projects/virtual_art_museum_intro" className="btn btn-primary">Return to main site</a>
</p>
</div>
</div>
<script type="module" src="./js/vam.js"></script>
</body>
</html>
Here is the js file as requested: https://codefile.io/f/MzkAFwmKIT
答案比我想象的要简单得多。在尝试让我的基本 HTML/JS 页面通过react/next.js 后，我决定尝试将其隔离并自行加载。因此，我只是将所有文件放入“/public/pages/vam/...”，然后通过链接到“/public/pages/vam/vam.html”来链接到它，然后从那里运行完美，就好像它只是一个简单的小型 HTML/JS 网站，运行在我的 React 网站旁边。我真的不知道我的旧方法有什么问题，但它不起作用，并且让它起作用对我来说已经足够了