以下我使用 next.js15 写的 Todo List 为例，假设我们本地已经存在一个 next.js15 的 Todo List 项目。

说明：解决了项目部署到 github pages 后访问不到 css、js、字体以及访问不到 public 目录下的图片问题。

第一步

安装 gh-pages：

npm i gh-pages

第二步

在 public 目录下新建一个 .nojekyll 的空文件。 这个空文件的作用是让 github 不要忽略以下划线开头的文件或文件夹，因为项目打包后会生成一个 _next 文件夹，如果没有 .nojekyll 文件，github 会忽略掉打包生成的 _next 文件夹，会导致部署后访问不到 CSS、字体等资源。

第三步

在next.config.ts 文件中添加以下配置。 因为我们要生成的是静态项目，所以要启用静态导出，这样在执行打包命令后，才能够得到一个 out 目录来进行部署到 github pages；因为我们的项目都是部署在自己 github 的一个子域下，所以 basePath 要设置为 github 项目名，由于我的 package.json 中 name 属性值与 github 上定义的项目名一致，所以这里我是直接从 package.json 中获取的。这里还通过 env 导出了一个环境变量，只是给页面中的 <Image /> 组件用的，因为官方提供的 <Image /> 组件在开发环境下可以直接通过相对路径访问到 public/ 目录下的图片，但是部署上去之后路径就不对了，所以这里提供一个环境变量，让 <Image /> 标签可以进行拼接使用。

import type { NextConfig }