使用 next.js 导出静态 html 无法正常工作答案

【问题标题】：Exporting static html with next.js not working properly使用 next.js 导出静态 html 无法正常工作
【发布时间】：2023-01-30 23:01:42
【问题描述】：

我创建了一个项目并希望将其导出到静态 html。我在 package.json 中使用了这个命令 build" : "next build && next export

之后，我将此命令运行到终端npm run build。最后它给了我一个输出文件夹。

问题是，当我尝试从 out 文件夹访问 html 文件时，它只显示 html 内容，没有任何 CSS 和 js 文件。我尝试了很多次，但没有用。如果有人帮助我摆脱这个问题，我将非常感谢他。

React 错误 418 和 423 是：

Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。
补水时出错。因为错误发生在 Suspense 边界之外，所以整个根将切换到客户端呈现。

我在 next.config.js 文件中使用这些代码
// /** @type {import('next').NextConfig} */
// const nextConfig = {
//   reactStrictMode: true,
//   swcMinify: true,
// }

// module.exports = nextConfig

module.exports = {
 assetPrefix: './',
 images: {
   unoptimized: true
 }
}

【问题讨论】：

我认为这会有所帮助NextJS - export is broken (no CSS, no JS)
非常感谢您的帮助。它工作得很好。但它还在浏览器控制台中显示了另外两个问题。你能帮我解决这个问题吗？我更新了问题。请看最后一张图片。提前致谢
您是否访问了控制台中的链接？
是的。我被拜访了。但是听不懂他们在说什么。链接在这里。请看一下。 reactjs.org/docs/error-decoder.html/?invariant=418

标签： javascript reactjs next.js

【解决方案1】：

检查了一下，它看起来与你编写 HTML 的方式有关 check here

【讨论】：

【解决方案2】：

您需要导航到导出的文件夹并打开 cmd 并运行 http 服务器使用 https://www.npmjs.com/package/http-server 并运行以下命令 npx http-server 这将在端口 8080 中运行应用程序

【讨论】：