在单独的端口中运行 nextjs

在开发 web 应用时，我们常常使用 React 构建页面。Next.js 是一个 React 框架，它帮助我们构建服务器渲染的应用程序，以便快速开发生产就绪的应用程序。在本文中，我们将学习如何在单独的端口上运行 Next.js 应用程序。

准备工作

在开始之前，我们需要确保我们已经在本地安装了 Node.js 和 NPM。如果您还没有安装，请下载并安装最新版本。

我们还需要确保我们已经全局安装了 Next.js 。

npm install -g next

创建 Next.js 应用程序

一旦我们的工作环境已经准备好，我们将创建一个新的 Next.js 应用程序。

npx create-next-app

当然，您也可以使用 npm 创建一个新的 Next.js 应用程序。在本文中，我们使用 npx，这使我们不必在全局安装 Next.js，因为它将在本地自动安装。

接下来，我们转到我们的新Next.js项目的根目录，并安装我们需要的依赖项。在这个例子中，我们将使用 express 作为我们的 web 服务器。所以，我们需要安装 express。

cd my-next-app
npm install express

在单独的端口上运行 Next.js 应用程序

接下来，我们将使用 express 来运行我们的 Next.js 应用程序。我们将使用默认生成的服务器代码，它显示 Next.js 特有的欢迎信息。

在我们的项目根目录下，创建一个名为 server.js 的文件。

const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const port = dev ? 3000 : 80;
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
  const server = express();
  server.all('*', (req, res) => {
    return handle(req, res);
  });
  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

这里我们使用了一个我们需要了解的新技术：all('*')。这告诉任何请求都将被传递给 Next.js，然后被 Next.js 处理。

在这种情况下，我们还指定了错误端口。如果您本地测试，请使用 3000，但如果您将其用于生产环境，则需要使用 80。

现在，我们可以使用以下命令来运行我们的服务器：

node server.js

然后，我们可以在浏览器中访问 http://localhost:3000，看到我们的 Next.js 应用程序已经成功运行。

恭喜，您已经成功了解了如何在单独的端口上运行 Next.js 应用程序。