如果你正在使用 Next.js 开发你的 React 应用程序，并且想将其部署到 GitHub Pages 上，这篇文章就是给你的。Next.js 是一个流行的 React 框架，能够帮助你快速构建你的应用程序，并将其部署到云端服务器。GitHub Pages 是一个免费的静态网站主机，它非常适合小型的个人或团队项目。本文将详细解释如何将 Next.js 应用程序部署到 GitHub Pages。
准备工作
在开始之前，你需要一些必要的准备工作。
熟悉 Next.js：你需要对 Next.js 具有一定的熟悉度，了解如何在本地运行你的应用程序并进行构建。
了解 GitHub Pages：你需要了解如何在 GitHub Pages 上创建一个静态网站。
熟悉 Git：你需要了解如何使用 Git 进行代码版本控制，以及如何使用 GitHub。
部署到 GitHub Pages 的几种方法
在将 Next.js 应用程序部署到 GitHub Pages 之前，我们先来看一下有哪些部署方式。
方案一：使用 gh-pages 包
gh-pages 是一种自动化工具，它可以将你的代码分支自动打包并推送到 GitHub Pages 上。使用 gh-pages 包的好处在于：
- 无需手动编译和发布。
- 一行命令即可将你的应用程序部署到 GitHub Pages 上。
- 支持自定义域名。
下面是使用 gh-pages 包将 Next.js 应用程序部署到 GitHub Pages 上的步骤：
步骤一：安装 gh-pages
npm install gh-pages --save-dev
步骤二：在 package.json 文件中添加 homepage 字段
在 package.json 文件中添加以下代码：
{
"homepage": "https://{username}.github.io/{repository-name}",
...
}其中，{username} 表示你的 GitHub 用户名，{repository-name} 表示你的仓库名称。
步骤三：在 package.json 文件中添加 deploy 脚本
在 package.json 文件的 scripts 字段中添加以下代码：
{
"scripts": {
...
"deploy": "next build && next export -o ./out && npx gh-pages -d out"
},
...
}步骤四：运行 deploy 命令
运行以下命令将你的应用程序部署到 GitHub Pages 上：
npm run deploy
方案二：手动部署
手动部署需要你手动编译你的代码，并将生成的静态文件上传到 GitHub Pages 上。手动部署的好处在于：
- 你可以完全控制你的部署流程。
- 你可以手动打包你的代码。
下面是使用手动部署将 Next.js 应用程序部署到 GitHub Pages 上的步骤：
步骤一：在 next.config.js 文件中配置静态资源的路径
在 next.config.js 文件中添加以下代码：
module.exports = {
...
assetPrefix: process.env.NODE_ENV === 'production' ? '/{repository-name}/' : '',
...
}其中，{repository-name} 表示你的仓库名称。
步骤二：运行 next build 命令
运行以下命令打包你的代码：
next build
步骤三：运行 next export 命令
运行以下命令将你的代码导出为静态文件：
next export -o ./out
步骤四：将静态文件发布到 GitHub Pages
你可以使用 Git 工具将生成的静态文件上传到 GitHub Pages 的 gh-pages 分支上。下面是具体步骤：
在 GitHub 上创建一个新的
gh-pages分支。将所有生成的静态文件放到
gh-pages分支的根目录下。将所有文件提交到
gh-pages分支。
自定义域名
如果你想在 GitHub Pages 上使用自定义域名，可以按照以下步骤操作：
在 GitHub Pages 设置页面中，设置
Custom domain为你的域名。在 DNS 中添加一条
CNAME记录，将你的域名映射到 GitHub Pages 的地址。在你的 Next.js 应用程序的
package.json中，将homepage的值修改为你的域名。
结语
本文介绍了两种将 Next.js 应用程序部署到 GitHub Pages 上的方法，分别为使用 gh-pages 包和手动部署。除此之外，我们还介绍了如何在 GitHub Pages 上使用自定义域名。无论你使用哪种方法，都需要了解每个步骤的含义和细节。希望本文能够对你有所帮助，祝你部署成功！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67831907935627c90029559f
