Next.jsを利用して作ったページをGitHub Pages にデプロイしようとしたところ、starter-workflow がまだNext.js 14に正式に対応していないらしく手こずったのでまとめます。
アプリケーション自体はNext.js のチュートリアルに従い create-next-app
コマンドを使って生成した雛形に変更を加えていったものです。
巷の情報を調べるとNext.jsをGitHub Pages にデプロイできるようにするためには next.config.js に output: "export"
を指定して静的サイトを出力することと next export
コマンドがApp Routerでは廃止されているので workflow 中の next export
を実行する部分を削除すれば良いとあります。
これをした結果、アプリケーションのビルドまでは成功しましたが Upload Artifact で失敗してしまいました。
https://github.com/tomato3713/kurita/actions/runs/8190551086/job/22397755118
失敗した箇所のログは次のようになっていました。
ログを素直に読むと out ディレクトリが存在しないので失敗したようです。
しかし、手元でworkflowで実行しているのと同じ next build
コマンドを実行すると out ディレクトリに生成されたファイルが出力されているのでNext.jsの出力先パス指定は問題ありません。
tar: out: Cannot open: No such file or directory tar: Error is not recoverable: exiting now Error: Process completed with exit code 2.
ここでもう一度インターネットの海をさまよったところ次のIssue が見つかりました。
曰く、next.config.mjs を使っている場合は next.config.js にリネームして、その内容をES Modules形式からCommon JS Modulesの形式に書き換えるという方法がワークアラウンドとして書かれています。 コメントにあったサンプル https://github.com/dninomiya/cv/blob/main/next.config.js を参考に書き換えた結果デプロイに成功するようになりました。