如何运行Next Js应用程序的构建（输出）目录？

官方的Next静态导出示例使用serve来“服务”out目录。由于out目录只是一堆静态文件，因此您需要某种与外部世界/内部网络的连接层。您可以使用诸如nginx之类的东西来服务这些资产（这样就不必运行两个Web服务器了）。但是，如果你正在寻找一个简单的方法来运行本地分期建设，那么你就需要使用某种形式的Web服务器：表达，HTTP服务器或服务，仅举几例。

...并可以与团队中的任何人共享工作版本。

如果您位于远程并连接到WAN，则团队中的任何人都可以访问暂存版本（例如：http://wanlocalip:3000-您可以使用地址来打印控制台消息）。如果您没有连接到WAN，并且没有自己的服务器，则必须使用vercel，AWS或Digital Ocean等第三方服务创建远程登台环境。

顺便说一句，让我们以正式的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以在开发中显示编译消息：

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。访问控制台中打印的地址之一。

本地

WAN（仅那些连接到WAN内LAN连接的用户可以访问）

单击此处查看上述工作示例。

如果您的项目仍遇到问题，请共享一个存储库；否则，帮助您进行故障排除将非常困难。