前提
Amplify が Next.js 14 に対応したとのリリースを見たので、早速デプロイしてみようと思いました。最近リニューアルされた公式ドキュメントには、ReactだけでなくNext.jsのページも用意されていて、今後はReactとNext.jsとの差分を読み替えずに済みそうです。
getting-started
従来の Amplify
チュートリアルの中で next-app@14 と バージョン14を指定しています。
Amplify gen 2 (Preview)
従来のAmplifyと、先日Previewで公開されたばかりの Gen 2 でも試してみようと思います。こちらも手順の中で next-app@14 と指定されています。
問題発生
Next.js 14 では、ビルド環境として Node.js 18以降 が必要です。
一方で、Amplify Webhosting のビルド環境は、デフォルトで AmazonLinux:2 となっており、 Dockerfile を見ると Node.js 17まで しか対応していないようです。
Amplifyのビルド環境は、Dockerイメージを指定することができます。そう、古いのが原因ならば新しいのを指定してやれば良いのです。
Hosting環境を新規作成する場合のフォームが、独自コンテナと書かれていて一瞬ハードルが高そうに見えますが、Amplifyが次期バージョンのイメージを用意しているので、以下のように設定すればOKです。
Build image settings
構築イメージ
+ amplify:al2023
ライブパッケージの更新
Node.js と Next.js のバージョンも指定しておきました。
Amplify CLI latest
+ Node.js version 20
+ Next.js version 14
ビルド設定の画面はこのようになります
Build & Deploy
これでビルドも成功して、無事Next.js 14 のサイトをデプロイすることができました。
