将Next.js项目部署到GitHub Pages的详细指南

原文链接：Step-by-Step Guide for Deploying a Next.js Project as GitHub Pages
作者：lovelydev829
译者：倔强青铜三

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

重要提示：创建你的仓库

在我们开始之前，重要的是要为你的项目在GitHub上创建一个专门的仓库。对于部署用户站点到GitHub Pages，你需要按照以下格式命名你的仓库：

<your-github-username>.github.io

例如，如果你的GitHub用户名是LovelyDev829，你的仓库应该命名为LovelyDev829.github.io。这种命名约定至关重要，因为它允许GitHub将其识别为用户站点并正确提供服务。

初始设置：package.json配置

在我们深入部署过程之前，让我们正确设置package.json文件。这个文件对于管理促进开发、构建和部署你的Next.js应用程序的脚本至关重要。

以下是你的package.json应该的样子：

{
  "name": "LovelyDev829-github-page",
  "version": "1.0.0",
  "homepage": "https://LovelyDev829.github.io",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "deploy": "gh-pages -d out --dotfiles"
  },
  "dependencies": {
    ...
  }
}

homepage: 设置为你的GitHub Pages URL。这确保了当你的应用构建和部署时路径被正确解析。
dev: 启动Next.js开发服务器。
build: 构建应用程序并将其导出为静态文件。
start: 启动Next.js生产服务器。
deploy: 将out目录的内容部署到GitHub Pages，包括像.nojekyll这样的点文件。

第一步：构建你的项目

在部署之前，你需要为静态导出准备你的Next.js应用程序。这涉及到构建项目并生成必要的文件。

运行构建命令：

打开终端并导航到你的项目目录。执行以下命令：

npm run build

导出项目：

构建完成后，导出你的项目以创建静态版本：

npm run export

这个命令将在out文件夹中生成所有部署所需的静态文件。

第二步：创建.nojekyll文件

为了防止GitHub Pages通过Jekyll处理你的文件（这可能会忽略以下划线开头的文件），你需要在out文件夹中创建一个.nojekyll文件。

创建文件：

在终端中运行以下命令：

touch out/.nojekyll

注意：.nojekyll文件应该是空的；里面不需要写任何东西。

如果touch不被识别，你可以这样做：
npm install -g touch-cli

第三步：部署你的应用程序

现在一切都设置好了，是时候将你的应用程序部署到GitHub Pages了。

运行部署命令：

在终端中执行以下命令：

npm run deploy

这个命令将把out目录的内容推送到你的仓库的gh-pages分支。

第四步：配置GitHub设置

部署完成后，你需要为你的仓库配置GitHub Pages设置：

访问你的GitHub仓库：
导航到你的GitHub仓库。
访问设置：
点击“Settings”标签。
配置页面：
滚动到“Pages”部分。在“Source”下，选择gh-pages分支作为你的部署源并保存更改。

第五步：验证你的部署

完成所有前面的步骤后，重要的是检查你的应用程序是否已经上线并且正确运行：

检查你的站点URL：
转到https://<your-github-username>.github.io。将<your-github-username>替换为你的实际GitHub用户名。在本例中，https://LovelyDev829.github.io
验证功能：
打开浏览器并导航到这个URL。确保所有页面都正确加载，并且样式按预期应用。
检查控制台错误：
使用你的浏览器的开发者工具（通常可以通过按F12访问）检查任何控制台错误或加载资源的问题。

简化

如你所见，你的package.json可以这样设置：

{
  "name": "LovelyDev829-github-page",
  "version": "1.0.0",
  "homepage": "https://LovelyDev829.github.io",
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "predeploy": "touch out/.nojekyll",
    "deploy": "gh-pages -d out --dotfiles"
  },
  "dependencies": {
    ...
  }
}

predeploy: 在"deploy"之前自动运行。
你可以通过以下命令来构建、导出和部署：

npm run build
npm run deploy

结论

按照这些步骤，你现在应该已经成功地将Next.js应用程序部署到GitHub Pages上了。如果你遇到任何问题，请仔细检查每一步，特别是确保.nojekyll文件存在并且你使用了正确的部署命令。

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

将Next.js项目部署到GitHub Pages的详细指南