创建并运行 Next.js 项目

什么是 Next.js？

Next.js 是一个由 Vercel 开发的 React 框架，用于构建静态和服务器渲染的 React 应用程序。它提供了许多开箱即用的功能，如服务器端渲染（SSR）、静态站点生成（SSG）、API 路由、内置 CSS 和 Sass 支持等，使得开发者可以更高效地构建现代化的 Web 应用。

使用 Next.js，可以帮助开发者更高效地构建现代化的、响应迅速的 Web 应用。

在这篇文章中，我们将使用 ServBay 提供的 Node.js 环境来创建并运行一个 Next.js 项目。我们将使用 ServBay 的『主机』功能来设置 Web 服务器，并通过反向代理和静态文件服务来实现项目的访问。

初始化项目
首先，确保您已经安装了 ServBay 提供的 Node.js 环境。然后，使用以下命令初始化一个新的 Next.js 项目：
bash
```
cd /Applications/ServBay/www
npx create-next-app@latest servbay-next-app
```
1
2
按照提示输入项目名称（建议命名为 servbay-next-app），并根据需要选择其他选项。
安装依赖
进入项目目录并安装依赖：
bash
```
cd servbay-next-app
npm install
```
1
2

修改 pages/index.js 文件

打开 pages/index.js 文件，修改内容使网页输出 "Hello ServBay!"：

javascript

export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
    </div>
  );
}

运行开发服务器
启动开发服务器并指定端口（例如：8585）：
bash
```
npm run dev -- -p 8585
```
1
这将会在本地启动一个开发服务器，并暴露端口 8585。
配置 ServBay 主机反向代理
使用 ServBay 的『主机』功能，通过反向代理来访问开发服务器。在 ServBay 的『主机』设置中，添加一个新的反向代理：
- 名字：My first Next.js dev site
- 域名：servbay-next-test.dev
- 主机类型：反向代理
- IP：127.0.0.1
- 端口：8585
详细设置步骤请参考添加Nodejs开发的网站。
访问开发模式
打开浏览器，访问 https://servbay-next-test.dev，实时查看项目。由于 ServBay 支持自定义域名以及免费的 SSL 证书，您将享受到更高的安全性。

构建生产版本
当开发完成后，使用以下命令构建生产版本：
bash
```
npm run build
npm run export
```
1
2
构建完成后，生成的静态文件将位于 out 目录中。
设置静态文件服务
使用 ServBay 的『主机』功能，通过静态文件服务来访问生产版本。在 ServBay 的『主机』设置中，添加一个新的静态网站：
- 名字：My first Next.js production site
- 域名：servbay-next-test.prod
- 主机类型：静态
- 网站根目录：/Applications/ServBay/www/servbay-next-app/out
访问生产模式
打开浏览器，访问 https://servbay-next-test.prod，查看构建后的生产版本。通过 ServBay 的自定义域名和免费的 SSL 证书，您的网站将具有更高的安全性和可信度。

通过以上步骤，您成功创建并运行了一个 Next.js 项目，并使用 ServBay 提供的功能来管理和访问您的项目。