在 ServBay 中创建并运行 Next.js 项目

概述

Next.js 是一个功能强大的 React 框架，由 Vercel 开发并维护，广泛用于构建现代化的、高性能的 Web 应用程序。它在 React 的基础上提供了许多开箱即用的能力，极大地简化了开发者构建复杂应用的过程。

什么是 Next.js？

Next.js 是一个流行的开源 React 框架，它支持服务器端渲染 (SSR) 和静态站点生成 (SSG) 等多种渲染方式。这些特性有助于提高应用的性能、改善用户体验并优化搜索引擎可见性。Next.js 内置了文件系统路由、API 路由、代码分割、CSS Modules 支持等功能，提供了一站式的开发体验。

Next.js 的主要特性和优势

多种渲染策略支持： 支持服务器端渲染 (SSR)、静态站点生成 (SSG)、客户端渲染 (CSR) 以及混合渲染方式，开发者可以根据需求选择最适合的渲染模式。
文件系统路由： 基于 pages 或 app 目录结构自动生成路由，简单直观。
API 路由： 允许在 Next.js 项目中轻松创建自己的 API 端点，方便前后端一体化开发。
自动代码分割： 页面级别的代码分割，只加载当前页面所需的 JavaScript，优化加载速度。
优化图片组件 (next/image)： 自动优化图片大小、格式和加载策略，提升性能。
内置 CSS 和 Sass 支持： 方便地管理和编写样式。
快速刷新 (Fast Refresh)： 开发过程中提供近乎即时的代码更新反馈。

使用 Next.js，开发者可以更高效地构建高性能、可扩展且易于维护的现代 Web 应用。

使用 ServBay 运行 Next.js 项目

ServBay 提供了一个集成的本地 Web 开发环境，包含了 Node.js 等多种语言和工具。利用 ServBay 的 Node.js 环境以及网站管理功能（包括反向代理和静态文件服务），我们可以非常方便地创建、开发和部署 Next.js 项目。

本文将指导您如何在 ServBay 环境下完成 Next.js 项目的创建、开发模式运行（通过反向代理）以及生产模式部署（通过静态文件服务）。

前提条件

在开始之前，请确保您已完成以下准备工作：

已在 macOS 系统上成功安装 ServBay。
已通过 ServBay 的软件包管理界面安装并启用了所需的 Node.js 软件包。如果您尚未安装 Node.js，请参考使用 ServBay 的 Node.js 环境文档。

操作步骤

1. 创建 Next.js 项目

首先，我们需要初始化一个新的 Next.js 项目。

打开终端 并切换到 ServBay 默认的网站根目录：
bash
```
cd /Applications/ServBay/www
```
1
使用 create-next-app 初始化项目： 运行以下命令创建一个新的 Next.js 项目。这里我们建议项目名称为 servbay-next-app，它将在 /Applications/ServBay/www 目录下创建同名文件夹。
bash
```
npx create-next-app@latest servbay-next-app
```
1
npx 是一个执行 Node.js 包命令的工具，create-next-app@latest 会使用最新版本的 Next.js 初始化工具。按照终端提示完成项目设置（例如选择是否使用 TypeScript, ESLint, Tailwind CSS, App Router 等）。
进入项目目录并安装依赖：
bash
```
cd servbay-next-app
npm install
```
1
2
npm install 命令会根据项目 package.json 文件中的定义安装所有必要的项目依赖包。

2. 修改项目输出内容 (可选)

为了验证项目是否成功运行，我们可以简单修改首页内容。

打开 pages/index.js 文件 (如果您选择使用 Pages Router)。如果选择 App Router，则修改 app/page.js。这里以 Pages Router 为例：
bash
```
# 使用您喜欢的编辑器打开文件，例如 VS Code
code pages/index.js
```
1
2
修改文件内容 使网页输出 "Hello ServBay!"。将文件内容替换为或修改为类似以下结构：
javascript
```
// pages/index.js (Pages Router)
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
      <p>This page is running via ServBay.</p>
    </div>
  );
}
```
1
2
3
4
5
6
7
8
9
如果您使用的是 App Router (app/page.js)，内容结构可能略有不同，但核心修改 <h1> 标签内容的方式类似。

3. 进入开发模式

在开发过程中，我们通常使用 Next.js 提供的开发服务器，它支持热模块替换 (HMR) 和快速刷新，方便实时查看代码修改效果。ServBay 的反向代理功能非常适合将一个外部域名指向这个本地运行的开发服务器端口。

运行 Next.js 开发服务器： 在项目根目录 (/Applications/ServBay/www/servbay-next-app) 中执行以下命令：
bash
```
npm run dev -- -p 8585
```
1
这条命令会启动 Next.js 开发服务器，并通过 -- -p 8585 参数指定服务器监听在本地的 8585 端口。您可以选择其他未被占用的端口。
配置 ServBay 网站 (反向代理)： 打开 ServBay 应用界面，进入网站管理。点击添加新网站，配置如下：
- 名字 (Name)：My first Next.js dev site (或您喜欢的任何名称)
- 域名 (Domain)：servbay-next-dev.servbay.demo (建议使用 .servbay.demo 后缀作为本地测试域名)
- 网站类型 (Website Type)：选择 反向代理 (Reverse Proxy)
- 代理目标 IP (Proxy IP)：127.0.0.1 (指向本地回环地址)
- 代理目标端口 (Proxy Port)：8585 (指向 Next.js 开发服务器监听的端口)
完成配置后，保存并应用 ServBay 的更改。ServBay 将自动配置 Caddy 或 Nginx (取决于您的 ServBay 设置) 来处理 servbay-next-dev.servbay.demo 的请求，并将其转发到 127.0.0.1:8585。
详细设置步骤可以参考在 ServBay 中添加 Node.js 开发网站文档。
访问开发模式网站： 打开浏览器，访问您配置的域名 https://servbay-next-dev.servbay.demo。
由于 ServBay 默认支持并为通过其添加的本地域名自动配置 SSL 证书 (使用 ServBay User CA)，您将可以通过 HTTPS 安全地访问您的本地开发网站，避免浏览器警告。ServBay 支持自定义域名以及免费的 SSL 证书，这在本地开发中非常方便。

4. 构建生产版本并部署为静态网站

当您的 Next.js 项目开发完成并准备部署时，通常会构建一个优化的生产版本。对于生成静态输出的 Next.js 项目 (output: 'export' 配置或使用 next export 命令)，ServBay 的静态网站服务是理想的选择。

构建 Next.js 生产版本并导出静态文件： 在项目根目录 (/Applications/ServBay/www/servbay-next-app) 中执行以下命令：
bash
```
npm run build
npm run export
```
1
2
- npm run build 命令会编译 Next.js 项目代码，生成优化的生产构建版本，通常输出到 .next 目录。
- npm run export 命令（需要 Next.js 配置支持或旧版本使用）或配置 output: 'export' 会将构建好的应用导出为完全静态的 HTML、CSS 和 JavaScript 文件，这些文件将放置在一个名为 out 的目录中。
配置 ServBay 网站 (静态文件服务)： 打开 ServBay 应用界面，进入网站管理。点击添加新网站，配置如下：
- 名字 (Name)：My first Next.js production site (或您喜欢的任何名称)
- 域名 (Domain)：servbay-next-prod.servbay.demo (建议使用 .servbay.demo 后缀)
- 网站类型 (Website Type)：选择 静态 (Static)
- 网站根目录 (Website Root)：输入 Next.js 导出静态文件的 out 目录的完整路径，即 /Applications/ServBay/www/servbay-next-app/out。
完成配置后，保存并应用 ServBay 的更改。ServBay 将配置 Web 服务器直接从 /Applications/ServBay/www/servbay-next-app/out 目录提供文件服务。
访问生产模式网站： 打开浏览器，访问您配置的域名 https://servbay-next-prod.servbay.demo。您将看到 Next.js 构建并导出的静态网站内容。
同样，通过 ServBay 的自定义域名和自动 SSL 配置，您的本地生产环境网站也将通过 HTTPS 提供服务。

总结

通过以上步骤，您已经成功地在 ServBay 本地开发环境中创建了一个 Next.js 项目，并学会了如何在开发模式下使用 ServBay 的反向代理功能进行实时预览，以及如何在构建生产版本后利用 ServBay 的静态文件服务进行部署。ServBay 提供的集成环境和便捷的网站管理功能极大地简化了 Next.js 项目的本地开发和测试流程。

在 ServBay 中创建并运行 Next.js 项目 ​

概述 ​

什么是 Next.js？ ​

Next.js 的主要特性和优势 ​

使用 ServBay 运行 Next.js 项目 ​

前提条件 ​

操作步骤 ​

1. 创建 Next.js 项目 ​

2. 修改项目输出内容 (可选) ​

3. 进入开发模式 ​

4. 构建生产版本并部署为静态网站 ​

总结 ​