从本地文件系统在没有服务器的情况下运行 NextJs 应用程序

Question

我有一个使用 NextJs 13 构建的静态 Web 应用程序，它没有 API 路径，也没有数据获取。是否可以在没有服务器的情况下从本地文件系统运行网站？

Answer 1

我能够单独加载静态页面，但页面之间的路由不起作用。

首先我需要获取在构建过程中生成的静态文件。我更新了我的

package.json

在构建之后做

next export

像这样：

"scripts": {
  "build": "next build && next export"
}

当我运行构建时（在我的例子中是

yarn build

）然后我的项目根文件夹中有一个名为

out

的文件夹。

我有一个

out/index.html

文件，我可以在浏览器中打开它。但是，我的很多内容都没有正确加载。当我重新加载此页面时查看网络选项卡，我可以看到很多失败的调用来获取各种 css 和 javascript 文件。失败的网址指向像

file:///_next/...

这样的位置。这些文件确实存在于我的 out 文件夹中，只是索引页面在错误的路径上寻找它们。

我能够通过将

assetPrefix: "./"

添加到我的

next.config.js

文件来解决这个问题。这是我的完整文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  assetPrefix: "./",
};

module.exports = nextConfig;

我再次运行构建，这次当我打开 out/index.html 时，我的网站页面运行良好。我无法在页面之间路由。如果你需要一些特定的链接来工作，你可以用 html 链接替换 React 路由，但是当然你此时不再有单页应用程序。

在我的例子中，我只需要与某人共享一个浏览器内的页面工具，所以这个过程仍然有用。