大家好，我是一宵三筵
近期练习了将NextJS的小专案打包成静态档，透过CICD放到GitHub Pages上的操作
但因为卡了一些坑弄了一整个晚上，因此来分享分享

先预告坑的部分:

在NextJS所打包的静态档＆资源档路径对应问题GitHub目前实验性的yml自动建立功能还有问题

文章会先整个介绍＆纪录流程，最后再跟大家分享这两个问题要怎么处理

另外我本身也不熟CICD的部分，因此学习上是使用ChatGPT处理
有ChatGPT和GitHub的新功能辅助下，不用学着写
但最后的坑还是各种翻资料、找别人的讨论才找到的

没问题的话就Go Go!

GitHub Pages

简介

简单介绍一下GitHub Pages
他是GitHub所提供的一个针对静态网页託管服务

也就是能够将那些专案build之后，打包成单纯的html、JS、CSS之后
提供你一个domain name，让你把网站放上去，方便提供给所有人看的一个服务

一般来说，要进行网站託管是需要花钱的（租用伺服器）
即使不租用，要设定一个domain name也是要花钱的
但是GitHub Pages直接免费提供你这些服务！

前置动作 - 专案上GitHub

要使用这个服务，首先要先确定你的专案有放上GitHub

有关GitHub的使用教学以及创建repository等等，可以去找其他教学文章
或是看我这边这篇：【Day14】ChatGPT请教教我：GitHub！Git Flow！团队协作！(下）

我这边就先不赘述教学

开始进行 GitHub Pages 设定

首先进到要处理的专案页面内，然后在上排找到这个Setting按钮，给他按下去

接着在左边的列表中，找到「Pages」的选项，就会看到GitHub Pages相关的设定

接着点一下红框中圈起来的「Deploy from a branch」，选择点击GitHub Actions

这个是一个GitHub正在实验性的功能
根据你专案的框架与内容，自动配对、生成对应的 cicd所需的 yml档
像下图这样，他马上自动侦测到我所使用的是NextJS，并提供了相应的设定

按下图中框选起来的Configure按钮后，会进入下图的页面

这份nextjs.yml内容是GitHub Action自动提供的指令，来告诉后面介绍的GitHub Action 应该怎么做部署打包的步骤
先不用细看这份资料，按下右上角的「Commit changes」

继续按下「Commit changes」

GitHub Action

做完刚刚的事情之后，我们的专案内就会有一个 nextjs.yml 档
有了这个档案，接下来的每次push，就会让GitHub Action 的服务进行相对应的指定与动作

上图是我的纪录，每一次的push就会加上一行，并显示执行进度与结果
按照刚刚的步骤的话，会找到我们刚刚commit的名称「Create nextjs.yml 」

前面的符号没有意外的话会是 红色的叉叉
点进来的话，会看到像是这样的页面

这边就是GitHub Action 根据我们的yml档所做的动作步骤与结果

可以看到build是失败的，所以我们点进去红色框选的位置看看

这里就可以更详细看到所有步骤的执行显示内容，以及错误的讯息
可以看到我们刚刚跑起来的错误讯息长这样：

Run npx --no-install next export⨯ The "next export" command has been removed in favor of "output: export" in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-exportError: Process completed with exit code 1.

预告一下，中间过程还有可能遇到这个问题：

Run actions/upload-pages-artifact@v3Run echo ::group::Archive artifactArchive artifacttar: out: Cannot open: No such file or directorytar: Error is not recoverable: exiting nowError: Process completed with exit code 2.

接下来会一口气修复所有问题，所以第二个错误讯息不会看到
但如果是卡在第二个问题的朋友，也可以跟着改看看

踩坑＆修复

首先第一个「Static HTML export with Next.js」的错误项目内容意思是说：
「next export」这个指令已经被NextJS废弃了。
但是GitHub Action送我们的那个yml档里面，仍然有使用到这个指令来进行来进行打包处理

因此我们要来找出一些在 .github/workflows/nextjs.yml 里面需要被移除、修掉的指令
以及在next的confing档中必须追加的设定

.github/workflows/nextjs.yml
在github自动生成的那份nextjs.yml档中，找到以下两段部分
并使用 # 注解掉（或是直接删掉）

- name: Static HTML export with Next.jsrun: ${{ steps.detect-package-manager.outputs.runner }} next export

with:   # Automatically inject basePath in your Next.js configuration file and disable   # 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

第二段注解掉之后，上图的第二个「Upload artifact」的错误就不会出现了

next.config.mjs
找到next.config 档案，并在nextConfig物件中加入以下几行

/** @type {import('next').NextConfig} */const nextConfig = {   output: 'export',   reactStrictMode: true,   assetPrefix: 'https://lalame888.github.io/minesweeper-react/' }export default nextConfig

其中那个'https://lalame888.github.io/minesweeper-react/' 的部分
换上你的Pages URL
（格式是https:// + [你的github帐号] + .github.io/ + [Repository名称]）

为了顾及本地开发的话，也可以加上判断环境变数的判断，变成以下这样

/** @type {import('next').NextConfig} */const isProd = process.env.NODE_ENV === 'production'const nextConfig = {  output: isProd ? 'export' : undefined,  reactStrictMode: true,  assetPrefix: isProd    ? 'https://lalame888.github.io/minesweeper-react/'    : undefined}export default nextConfig

微微解释一下为什么要加上这些

output: 'export' ：指定bulid的时候变成静态档，静态档预设会放在./out的资料夹下
（如果要改变这个资料夹名称或位置，就指定distDir: '[新资料夹名称]' 的属性）reactStrictMode: true ：Next.js 运行时符合严格模式assetPrefix：载入静态资源档的前置路径

第三点真的是一个大坑，事情是这样的
假设当我们都成功之后，主页路径会是'https://lalame888.github.io/minesweeper-react/'的情况来说

理论上我们的静态档位置应该是'https://lalame888.github.io/minesweeper-react/_next/static/'下的位置
但是！没有指定前缀的情况下，他会放在网域的根目录，也就是
https://lalame888.github.io/_next/static/ 这个位置下
中间整整少了自己的Repository名称，就会造成所有的js、css等资源档都是载入失败的

而且目前测试来说，若是只放assetPrefix: '/minesweeper-react/'
虽然路径看起来是对的了，但是还是会触发NextJS的 PageRouter，拿到404的错误讯息

结语

以上，就是目前使用GitHub Action 自动建置的yml档进行NextJS静态打包＆部署的步骤教学＆踩坑纪录，繁中的资源不多，希望可以帮上同样卡在这些步骤的人

而且有关这个yml暂时我不太建议使用ChatGPT-3.5生成，主要有两个原因：

版本问题：
ChatGPT生成的yml档，所使用的NodeJS还在NodeJS 16版
actions/checkout 还在使用v2
部署部分使用的是 JamesIves/github-pages-deploy-action 的v3版本

这些旧版本的action都会有版本过旧、指令过旧的问题
或是建议的config选项已经被NextJS废弃

参数名称错误、另外指定token
可能是和gitlab的指令搞混或是和其他的指令搞混，yml中有些参数名称是错误的
还要一来一回跟ChatGPT将错误讯息贴上慢慢找bug

而且明明GitHub已经有预设的GITHUB_TOKEN 是授权给GitHub Action使用的
但ChatGPT的教学中，让我另外去申请Personal access tokens并进行secrets设定

这些步骤完全绕了一大圈。

最后仍然没有成功排除我的问题

最后，本次示範的专案也顺便贴出来，是一个极其简单的踩地雷小游戏
而且其实是一个公司的面试小作业

Repository: https://github.com/lalame888/minesweeper-react
GitHub pages: https://lalame888.github.io/minesweeper-react/

若是好奇我与ChatGPT的曲折对话的话，也可以看这个
https://chat.openai.com/share/3c24e88c-054f-4faf-80d1-0f7cfe9729b2

但是ChatGPT所提供的教学最后被我完全弃用！并且有上述说的那一些问题
所以可以看看那些曲折对话，但不建议照着做

真的要说好处，应该是我可以快速理解设定步骤
对于我这个真的完全不熟GitHub Action与CICD的人
也能了解若是使用自建的yml的步骤、yml的样貌与作用等等

但真的绕太大圈了，版本上的问题太严重了。不推。

参考资料

The "next export" command has been removed in favor of "output: export" in next.config.js #58790NextJS官方文件：Static Exports