前端资源网 - w3h5最近准备写一个小工具，域名和技术栈都看好了。用 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 中添加配置代码，添加完是这样的：
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export' // 这里是添加的配置代码
}
module.exports = nextConfig部署配置
先简单介绍几个命令：
设置 Node 版本为 18：
- name: Set Up Node.js uses: actions/setup-node@v3 with: node-version: 18
安装依赖和编译项目：
# 安装依赖 - name: Install dependencies run: npm i # 编译 - name: Build with Next.js run: npm run build
最重要的一点，上传 build 的文件。（上面配置完后，编译完会在根目录生成一个 out 文件夹）：
- name: Upload artifact uses: actions/upload-pages-artifact@v2 with: path: ./out
这样把文件打包在 out 目录，部署的时候拉取这里的文件，就不会出现 404 了。看看效果：https://finai.fun
下面是完整的配置文件，重要的地方我都有注释，可以作为参考：
# 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 项目时遇到的问题和解决方法，如果对你有帮助，欢迎评论、转发。
未经允许不得转载：前端资源网 - w3h5 » Next.js项目部署到GitHub Pages问题整理