1年ほど前から Next.js v13 と Azure Static Web Apps を使って Hybrid rendering を行う Next.js アプリケーションをデプロイしていました。
v14 にアップデートしたタイミングでビルドに失敗するようになってしまいました。 直し方が Microsoft Learn にあったのでメモがてら載せておきます。
ビルドに使用する Node.js のバージョンの指定
私はデプロイに GitHub Actions の Azure/static-web-apps-deploy@v1 を使用しています。 デプロイの他にもビルドも行ってくれる Actions で、内部的にはビルドに Oryx が利用されているようです。
どうもこの Orxy、Node.js アプリケーションを渡すと、特に指定がないと Node.js v16 を使用してビルドを行うようで、この挙動が問題でした。
そのことが分かる GitHub Actions のログを以下に載せておきます。 v16 が使われていることがわかります。
Using Node version:
v16.20.2
Using Npm version:
8.19.4
Running 'npm install'...
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'next@14.1.4',
npm WARN EBADENGINE required: { node: '>=18.17.0' },
npm WARN EBADENGINE current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }
added 325 packages, and audited 326 packages in 11s
129 packages are looking for funding
run `npm fund` for details
1 moderate severity vulnerability
To address all issues, run:
npm audit fix
Run `npm audit` for details.
Running 'npm run build'...
> ******@0.1.0 build
> next build
You are using Node.js 16.20.2. For Next.js, Node.js version >= v18.17.0 is required.
であれば、Node.js のバージョンを上げることで対処できそうなことがわかります。 それではどの様に Node.js のバージョンを上げる、もしくは指定するのでしょうか？
それが前述した Learn に記載されていました。
Tutorial: Deploy hybrid Next.js websites on Azure Static Web Apps | Microsoft Learn
上記のドキュメント記載のように、package.json の engines フィールドに指定します。 これは、当該 package の動作するバージョンを明確にするために使用されるものですが、Oryx はこちらのフィールドを参照しているようです。
指定してみると、以下のようなログに変わりました。
Using Node version: v18.17.1 Using Npm version: 9.6.7 Running 'npm install'...
これでビルド問題は解決しました。
終わりに
最新のドキュメントを読めば解決するという簡単な問題でした。 Microsoft のサービスを使う場合はだいたいのケースが Learn で解決するので、とりあえずハマったら見るようにしましょう…
また Azure Static Web Apps へのデプロイじゃなくて、Next.js 文脈でハマった箇所があったので、備忘録として以下にリンクを載せておきます。
