Azure Static Web Apps に Next.js ver.14 をデプロイする

やりたいこと

Next.js ver.14.0.3 で作成した静的なWebアプリを Azure Static Web Apps にデプロイしたい。基本的には、ドキュメント通りやれば良く、GitHub Actions を通じてデプロイする流れ。エラーが発生したので、メモ残し。

静的にレンダリングされた Next.js の Web サイトを Azure Static Web Apps にデプロイする

エラー発生

GitHub Actions で build する際に、node のバージョンが古いと怒られてしまう。何も指定しないと node ver.16系が選ばれてしまうようだ。

Next.js 14系は、Node.js 18.17+ が必要なので（Next.js > Installation）、build する際の node のバージョンを指定してあげる必要がある。

指定方法は、package.json や GitHub Actions の設定の yml

なのだが、その前に各種バージョン対応状況を調べる

Node version support

Node.js

• Node.js 18: MAINTENANCE
• Node.js 20: ACTIVE

なるべく20だが、18でも構わない。

Node.js - Previous Releases

Azure

• Node.js 20: Preview
• Node.js 14-18: GA

GAって何？ギャランティ？現時点では、18系を利用するのが無難か。

Azure Functions でサポートされている言語

GitHub Actions

最新(20.10.0)まで全部サポートされている模様。

versions manifest

対応する

今回は、>=18.17.0 で行くことにする。

package.json

{
  ...,
  "engine": {
    "node": ">=18.17.0",
  }
}

.github/workflows/azure-static-web-apps-....yml

...
jobs:
  build_and_deploy_job:
  ...
  steps:
  - uses: actions/checkout@v3
    ...
  - uses: actions/setup-node@v4
    with:
      node-version: '>=18.17.0'
  - name: Build And Deploy
  ...
...

Azure で設定時に作成された yml ファイルをそのまま使い、build のステップの前に、設定した。今日時点では、20.9.0 が選択された。

Environment details
  node: v20.9.0
  npm: 10.1.0
  yarn: 1.22.21

きっちりやりたい場合は、きっちり指定すれば良い。今回はきっちりしなくても良いので、このままにする。

おしまい。