1年ほど前から Next.js v13 と Azure Static Web Apps を使って Hybrid rendering を行う Next.js アプリケーションをデプロイしていました。
v14 にアップデートしたタイミングでビルドに失敗するようになってしまいました。
直し方が Microsoft Learn にあったのでメモがてら載せておきます。
learn.microsoft.com
ビルドに使用する 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 はこちらのフィールドを参照しているようです。
github.com
指定してみると、以下のようなログに変わりました。
Using Node version:
v18.17.1
Using Npm version:
9.6.7
Running 'npm install'...
これでビルド問題は解決しました。
終わりに
最新のドキュメントを読めば解決するという簡単な問題でした。
Microsoft のサービスを使う場合はだいたいのケースが Learn で解決するので、とりあえずハマったら見るようにしましょう…
また Azure Static Web Apps へのデプロイじゃなくて、Next.js 文脈でハマった箇所があったので、備忘録として以下にリンクを載せておきます。
lef237.hatenablog.com
