官方的 Next 静态导出示例使用 serve 来“服务”out 目录。由于out 目录只是一堆静态文件，因此您需要某种与外部世界/内部网络的连接层。您可以使用 nginx 之类的东西来服务这些资产（这样就无需运行两个 Web 服务器）。但是，如果您正在寻找一种简单的方法来运行本地 staging 构建，那么您将需要使用某种 Web 服务器：express、http-server 或 serve 等等。
...并且可以将工作构建分享给团队中的任何人。
如果您在远程并连接到WAN，那么您团队中的任何人都可以访问暂存版本（例如：http://wanlocalip:3000 -- 您可以使用address 打印出console message）。如果您没有连接到 WAN 并且没有自己的服务器，那么您必须使用第三方服务（如 vercel、AWS 或 Digital）创建远程登台环境海洋等等。
不碍事，让我们以官方with-static-export 为例，设置一个自定义快递服务器。
首先，我们将添加一些依赖项：
yarn add chalk dotenv express
将package.json文件脚本调整为：
"scripts": {
"dev": "next",
"export": "next build && next export",
"start": "NODE_ENV=production node ./server.js"
},
然后我们会在根目录下创建一个server.js文件：
server.js
const dotenv = require("dotenv");
// import ENVs from ".env.local" and append to process
dotenv.config({ path: ".env.local" });
const express = require("express");
const address = require("address");
const chalk = require("chalk");
// create express web server instance
const app = express();
// pull out ENVs from process
const { LOCALHOST, PORT } = process.env;
// get the Local IP address
const LOCALIP = address.ip();
// tell express to serve up production assets from the out directory
app.use(express.static("out"));
// tell express to listen for incoming connections on the specified PORT
app.listen(PORT, (err) => {
if (!err) {
// log the LOCALHOST and LOCALIP addresses where the app is running
console.log(
`\n${chalk.rgb(7, 54, 66).bgRgb(38, 139, 210)(" I ")} ${chalk.blue(
"Application is running at"
)} ${chalk.rgb(235, 220, 52).bold(LOCALHOST)} ${chalk.blue(
"or"
)} ${chalk.rgb(235, 220, 52).bold(`http://${LOCALIP}:${PORT}`)}\n`
);
} else {
console.err(`\nUnable to start server: ${err}`);
}
});
可选地我们可以调整next.config.js 以在开发中显示compilation message：
next.config.js
const { DefinePlugin } = require("webpack");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
const address = require("address");
const { LOCALHOST, NODE_ENV, PORT } = process.env;
const LOCALIP = address.ip();
const plugins = (isServer) => {
const plugins = [];
if (!isServer) {
plugins.push(
/* OPTIONAL -- append ENVS to client-side process */
new DefinePlugin({
"process.env": {
LOCALHOST: JSON.stringify(LOCALHOST),
NODE_ENV: JSON.stringify(NODE_ENV),
},
})
);
} else {
plugins.push(
/* add console compilation messages */
NODE_ENV === "development" &&
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: [
`Local development build: \x1b[1m${LOCALHOST}\x1b[0m`,
LOCALIP &&
`Remote development build: \x1b[1mhttp://${LOCALIP}:${PORT}\x1b[0m`,
].filter(Boolean),
notes: [
"Note that the development build is not optimized.",
"To create a production build, use \x1b[1m\x1b[32myarn export\x1b[0m.\n",
],
},
clearConsole: false,
})
);
}
return plugins.filter(Boolean);
};
module.exports = {
webpack(config, { isServer }) {
/* adds custom plugins to client and/or server */
config.plugins.push(...plugins(isServer));
/* return new config to next */
return config;
},
};
现在我们已经设置好了一切，我们可以运行yarn export 来构建项目并将其导出到out 目录，然后我们可以通过运行yarn start 来运行本地暂存环境。访问console 中打印的地址之一。
本地
WAN（只有在 WAN 中连接到 LAN 连接的用户才能访问）
单击here 以查看上述的工作回购示例。
如果您的项目仍有问题，请分享一个存储库；否则，将很难帮助您进行故障排除。