AWS Amplify Hosting に Next.js 14 をデプロイする

前提

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 のサイトをデプロイすることができました。