最近准备写一个小工具，域名和技术栈都看好了。用 Next.js 写，因为它基于 React，并且对 SEO 也有一定的可扩展性，下面是 Next.js 的一些特性：
- 零配置：无需任何配置，即可自动编译并打包，从一开始就为生产环境而优化。
- 混合模式：在一个项目中同时支持构建时预渲染页面（SSG）和请求时渲染页面（SSR）。
- 增量静态生成：在构建之后以增量的方式添加并更新静态预渲染的页面。
- 支持 TypeScript：自动配置并编译 TypeScript。
- 快速刷新：快速、可靠的实时编辑体验，已在 Facebook 级别的应用上规模上得到验证。
- 基于文件系统的路由：每个 pages 目录下的组件都是一条路由。
- API 路由：创建 API 端点（可选）以提供后端功能。
- 内置支持 CSS：使用 CSS 模块创建组件级的样式。内置对 Sass 的支持。
- 代码拆分和打包：采用由 Google Chrome 小组创建的、并经过优化的打包和拆分算法。
项目的安装过程就不写了，可以在 Next.js 官方文档 查看相关教程。
Github Pages 的设置流程参考：Astro网站部署到GitHub Pages踩坑记录，都是一样的。
GitHub 还是很人性化的，将项目 push 上去，打开 GitHub Pages 页面，Source 选择 GitHub Actions ，就会自动检测到是 Next.js 项目，提示配置部署文件。
我试了一下，会自动在项目根目录创建 .github/workflows/nextjs.yml 文件，提交后就会自动开始部署。
默认的配置文件有些复杂，而且会构建失败，我再此基础上根据自己的需求做了简化修改。
期间遇到了两个问题：
- 我本地使用的是 pnpm build，构建的时候会报错找不到 pnpm 依赖，可以使用 npm 命令打包。
- Next.js 项目不能像 Astro 那样构建完了就部署，部署完了直接访问会报 404 错误。需要配置
output为'export'。
Next.js 配置 output
在配置文件 next.config.js 中添加配置代码，添加完是这样的：
代码语言：javascript复制/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export' // 这里是添加的配置代码
}
module.exports = nextConfig部署配置
先简单介绍几个命令：
设置 Node 版本为 18：
代码语言：javascript复制- name: Set Up Node.js
uses: actions/setup-node@v3
with:
node-version: 18安装依赖和编译项目：
代码语言：javascript复制# 安装依赖
- name: Install dependencies
run: npm i
# 编译
- name: Build with Next.js
run: npm run build最重要的一点，上传 build 的文件。（上面配置完后，编译完会在根目录生成一个 out 文件夹）：
代码语言：javascript复制- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
path: ./out这样把文件打包在 out 目录，部署的时候拉取这里的文件，就不会出现 404 了。看看效果：https://finai.fun
下面是完整的配置文件，重要的地方我都有注释，可以作为参考：
代码语言：javascript复制# Sample workflow for building and deploying a Next.js site to GitHub Pages
#
# To get started with Next.js see: https://nextjs.org/docs/getting-started
#
name: Deploy Next.js site to Pages
on:
# Runs on pushes targeting the default branch 从默认分支拉取代码
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab 允许从"操作"选项卡手动运行此工作流
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 设置 GitHub UB_TOKEN 的权限以允许部署到 GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 仅允许一个并发部署，跳过在正在运行和最新排队之间排队的任务。
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 但是，不要取消正在进行的任务，因为我们希望允许这些生产部署完成。
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Build job 部署任务
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
# 设置 Node 和指定版本
- name: Set Up Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Setup Pages
uses: actions/configure-pages@v3
with:
# Automatically inject basePath in your Next.js configuration file and disable 在 Next.js 配置文件中自动注入 basePath 并禁用
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). 服务器端镜像优化
#
# You may remove this line if you want to manage the configuration yourself. 如果您想自己管理配置，可以删除此行。
static_site_generator: next
- name: Restore cache
uses: actions/cache@v3
with:
path: |
.next/cache
# Generate a new cache whenever packages or source files change. 当包或源文件发生更改时生成新的缓存。
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
# If source files changed but packages didn't, rebuild from a prior cache. 如果源文件发生了变化但包没有变化，则从先前的缓存中重建。
restore-keys: |
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
# 安装依赖
- name: Install dependencies
run: npm i
# 编译
- name: Build with Next.js
run: npm run build
# 上传工作 Build 完的静态文件会存放在 out 文件夹，在 next.config.js 中配置 output: 'export'
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
path: ./out
# Deployment job 部署工作
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2以上是我在 GitHub Pages 部署 Next.js 项目时遇到的问题和解决方法，如果对你有帮助，欢迎评论、转发。
未经允许不得转载：Web前端开发资源网 » Next.js项目部署到GitHub Pages问题整理
推荐阅读：
html中引入调用另一个公用html模板文件的方法
利用CSS设置图片黑白/灰色效果，同时适用于整站变灰
QQ聊天插件，鼠标划入划出显示隐藏效果。
WebStorm绑定Chrome浏览器实现实时自动刷新
CSS 选择器 nth-child 的几种用法
