Next.jsをAmplifyで運用する場合に必ず設定すべき項目

先日 AWS のサポートの方とやり取りする中で発覚した内容をまとめた記事です。

結論

Live package updates の Next.js version に、アプリケーションで使用している Next.js のバージョンに合わせた値を設定する

Live package updates？

Live package updatesって何？という人も居るかもしれませんが、Amplify コンソールのビルドの設定から確認できるこれです。

公式ドキュメントによる説明は以下です。
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/custom-build-image.html#setup-live-updates

ライブパッケージアップデートでは、これらの依存関係のバージョンを上書きして、特定のバージョンを指定したり、常に最新のバージョンがインストールされるようにしたりすることができます。

 

これだけではピンと来ないかもしれないので、実際の設定画面をもう少し見てみます。
Build image settingsのEditボタンを押すと、ツールや言語のバージョンを指定できます。

 

ここで以下のように latest ではなく固定バージョンを指定することで、ビルド時に使用されるバージョンを指定することができます。
開発環境とバージョンを揃えるためにも極力設定すべき項目です。

 

ここまでは良いのですが、気になるのはNext.js version が指定できることです。
Next.js のバージョンはリポジトリのpackage.jsonで指定しているはずですが、ここでは何を指定する必要があるのでしょうか。

 

公式ドキュメントの説明を再掲すると

ライブパッケージアップデートでは、これらの依存関係のバージョンを上書きして、特定のバージョンを指定したり、常に最新のバージョンがインストールされるようにしたりすることができます。

とのことなので、この文章通りに受け取るとpackage.json で指定した Next.js のバージョンがここの設定値で上書きされてしまうようにも思えますが、そんなことはありません。

• 「じゃあここで指定する Next.js のバージョンは何に作用するの？」
• 「デフォルトでは設定されてないけど設定しないとダメなの？」
• 「設定するなら何を設定すれば良いの？」

という話になりますね。

ここで指定する Next.js のバージョンは何に作用するのか

これについてはサポートに聞いても詳細は教えてもらえませんでした。
「詳細は内部仕様のため答えられないが、この設定内容で内部的に使用している Next.js バージョンが変わる。
アプリで使用している Next.js のバージョンを上書きするものではない。
ただし、アプリのバージョンとの差によりビルドの失敗などが報告されているため、アプリのバージョンと合わせることを推奨している。」
とのことでした。

デフォルトでは設定されて無いが、設定しないとダメなのか

少なくともプロダクション環境では必ず設定すべきです。

これについては
「指定しない場合 latest を指定しているのと同義であり、Amplify にてサポートする Next.js のメジャーバージョンが上がった場合に問題となる恐れがある」
とのことでした。

個人の素振り程度の環境では問題無いかもしれませんが、業務で使用するような場合必ず設定しましょう。

何を設定すれば良いのか

何を設定すべきか明記している公式ドキュメントは見つけられていないのですが(サポートからの提示も無かったのでおそらく存在しない？)、以下の公式ドキュメントで近い内容が言及されています。
https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html#update-app-nextjs-version

これは既に Amplify にデプロイしているアプリについて、Next.js のバージョンを上げる場合の手順を説明した文章です。
そのため目的としているものと近いようで異なるのですが、ドキュメントを読むとLive package updatesに設定する値について以下の記述があります。

Amplify で新しい Next.js アプリをデプロイする際、Amplify はデフォルトでサポートされている最新の Next.js のバージョンを使用します。現在、Amplify は Next.js のバージョン 11 をサポートしています。
…

• Next.js のバージョン 9.4.x までのサポートには 9 を入力してください。
• 10 を入力すると、Next.js のバージョン 9.4.x から 10.x.x までのサポートとなります。
• latest と入力すると、常に Amplify がサポートする最新の Next.js のバージョンにアップグレードします。

基本的にはアプリで使用している Next.js のメジャーバージョンを設定しておけば OK、というシチュエーションが多いと思いますが、9.5 系を使用する場合は設定値が 10 になるなど例外もあるので、適切な値を慎重に判断しましょう。
また、上記を読む限り 11 系を使用するには latest を設定するしかないようにも思えますが、サポートからの回答によると11 系を使用する場合は 11 を入力するのが正解だそうです。

End

サポートの方からは終始丁寧に質の高い回答をいただくことができ、大変ありがたかったです。
「ドキュメントが誤解を招く記述になっていることは製品担当部署にフィードバックする」とのことでしたので近々公式ドキュメントに加筆修正されるものと思ってます。
が、問い合わせから 1 ヶ月以上経過しても未だその気配が無いことと、Next.js の 12 系がリリースされ latest 設定の危険度がいよいよ無視できなくなったことを受けて記事にしました。
プロダクション環境で Amplify ＋ Next.js を採用している場合、Live package updatesから Next.js version を忘れずに設定しましょう。