GitHub Actions の starter-workflow をNext.js 14 で利用するには注意がいる

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 が見つかりました。

github.com

曰く、next.config.mjs を使っている場合は next.config.js にリネームして、その内容をES Modules形式からCommon JS Modulesの形式に書き換えるという方法がワークアラウンドとして書かれています。 コメントにあったサンプル https://github.com/dninomiya/cv/blob/main/next.config.js を参考に書き換えた結果デプロイに成功するようになりました。