Next.js v14 を Amplify hostingでデプロイしてみた

今週（2023年11月第3週）に入ってAmplify JS v6が一般に公開されました！
これまで、Amplify JS v6はデベロッパープレビューとして公開されていて、Next.jsはv13までがサポートの対象でした。

今回、Next.js v14（>=13.5.0 <15.0.0）がサポートの対象となったので、Amplify hostingによるデプロイを試してみました。
基本的にはドキュメント通りなのですが、一部対応が必要だったので記事としてまとめました。
（「Amplify hostingを用いたデプロイ => デプロイ設定 => 6 ~ 7」で初期設定のままではデプロイができず対応が必要でした！）

Amplify JS v6 についてはこの記事では触れませんが、動作する環境が構築できると思うので、ぜひ試してみてください。

対象

Amplify JS v6 × Next.js v14 の環境を用意するのがめんどくさいけど気になってる人
Next.js v14 環境のデプロイをVercel以外のベンダーで検討している人

環境構築

Next.js

Next.jsの環境を構築します。
今回は、create-next-appを使って構築します。

terminal

npx create-next-app@latest <ディレクトリ名> --ts --tailwind --eslint --app --src-dir --import-alias '@/*'
cd <ディレクトリ名>

パッケージをインストールし、devスクリプトを実行するとローカル環境で立ち上がると思います。

Next.js v14では Node.js >=18.17.0 に限定されているので、別途対応が必要な場合があります。

Amplify

Amplifyのセットアップ

Amplifyのセットアップについては 👇のURLを参考に進めてください。
すでに完了している場合はスキップしてください。

大体の流れ

1. AWSアカウント作成
2. Amplify CLI をインストール
3. IAM ユーザー作成
4. Amplify CLI 設定

https://docs.amplify.aws/javascript/start/project-setup/prerequisites/

---

Amplify 初期化

Amplifyのセットアップ後は、先ほど作成したNext.jsのプロジェクトに戻ります。

terminal

amplify init

先ほど設定したAWS profileを選択して進めると、デプロイが始まります。
デプロイ完了後、AWS コンソールにログインしAWS Amplifyのページにいくと先ほどのアプリケーションが一覧に表示されているはずです。

---

Amplify hostingを用いたデプロイ

今回は、Amplify hostingを利用するためにGithub経由でソースコードを読み取れるようにします。
作成したNext.jsのプロジェクトをGithubにアップロードし、そのリポジトリへのアクセス権限を設定しましょう。

デプロイ設定

1. 「ブランチを接続」を選択
   

2. 「Githubのアクセス許可を表示」を選択して、Next.jsのリポジトリへのアクセス権限を有効にする

3. 「レポジトリの選択」でGithubにアップロードしたリポジトリを選択
   

4. Environmentが存在していない場合は、「新しい環境を作成」を選択
   

5. サービスロールが存在していない場合は、「新しいロールを作成」からサービスロールを作成、選択し「次へ」
   

6. 「保存してデプロイ」、おそらくデプロイには失敗します。
   

7. サイドメニューのビルドの設定 => Build image settings を編集、保存

• 構築イメージに「Amazon linux:2023」を選択
• ライブパッケージの更新で「パッケージバージョンの上書きを追加」=> 「Node.js version」=> 「18.17.0」を入力

Next.js v14では Node.js >=18.17.0 である必要があります。
Node.js v18では、GLIBC_2.27もしくはGLIBC_2.28が必要になります。

しかし、構築イメージ「Amazon linux:2(デフォルト)」の場合、GLIBC 2.26しか存在していません。
これを解決するため、構築イメージには「Amazon linux:2023」を指定しています。

8. 「構築」を選択
   

9. 「このバージョンを再デプロイ」を選択
   

10. 赤枠のリンクを選択するとNext.jsのアプリケーションがデプロイされていることを確認できる 🎉
    

他にもドメイン設定やプレビュー機能など、必要に応じて追加可能です。
サーバーサイドでlogを確認したい場合は、CloudWatchから確認できます。
（「モニタリング => ホスティングしているコンピューティングログ」）

ドメイン設定

独自のドメイン設定も、数分で完了します。
（Route53経由で取得したドメイン）

サイドメニューのドメイン管理から持っているドメインを選択し、サブドメインを入力すれば完了です。

おわりに

Next.js v14 × Amplify hosting でのデプロイ手順についてまとめました。

今回の記事では触れていないですが
Amplify JS v6から、Next.js App Router や Server Actionsなどのすべての機能が完全にサポートされるようになりました。
他にも、機能単位のAPIが導入されたことによりバンドルサイズも大幅に削減できるようになっています。

自分も今回作成した環境でNext.js v14 と Amplify JS v6 の機能を触ってみようと思います。
最後まで読んでいただきありがとうございました！