Next.jsをElastic Beanstalkにデプロイする方法をまとめてみました。

1. Next.jsプロジェクト作成

まずcreate-next-appでNextjsプロジェクトを作成します。
今回はblogという名前で作成します。

npx create-next-app blog --ts

実行が完了するとblogという名前のディレクトリができているのでcdで移動します。
ディレクトリ内は以下のようになっていると思います。

ls -a
.  ..  .eslintrc.json  .git  .gitignore  README.md  next-env.d.ts
next.config.js  node_modules  package.json  pages  public  styles  tsconfig.json  yarn.lock

2. プラットフォームフックファイルの作成

次にプラットフォームフックファイルを作成します。
プラットフォームフックはアプリケーションをデプロイする際にデプロイプロセスの各フェーズで実行したいスクリプトを設定することができます。
ここでは詳細は省きますが気になる方はこちらの公式ドキュメントを参照してください。
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/platforms-linux-extend.html

以下を実行してファイルを作成します。

mkdir -p .platform/hooks/predeploy
touch .platform/hooks/predeploy/next_build.sh

作成したファイルを編集します。

next_build.sh

#! /bin/bash
npm install
npm run build

このスクリプトはElasticBeanstalkにデプロイした際に一緒に実行されます。
ファイルの作成が終わったら忘れずにgit commitしましょう。
コミットしていない変更はデプロイ時に反映されないので注意です！

git add .
git commit -m 'predeployフックを追加'

3. Elastic Beanstalkへデプロイ

準備ができたのでebコマンドを使ってデプロイしていきます。
まずはeb initで設定ファイルを作成します。

# .elasticbeanstalkディレクトリと、ディレクトリ内にconfig.ymlが作成されます
eb init

Select a default region
1) us-east-1 : US East (N. Virginia)
2) us-west-1 : US West (N. California)
3) us-west-2 : US West (Oregon)
4) eu-west-1 : EU (Ireland)
5) eu-central-1 : EU (Frankfurt)
6) ap-south-1 : Asia Pacific (Mumbai)
7) ap-southeast-1 : Asia Pacific (Singapore)
8) ap-southeast-2 : Asia Pacific (Sydney)
9) ap-northeast-1 : Asia Pacific (Tokyo)
(省略)
(default is 3): 9


Enter Application Name
(default is "blog"): blog
Application blog has been created.

It appears you are using Node.js. Is this correct?
(Y/n): Y
Select a platform branch.
1) Node.js 16 running on 64bit Amazon Linux 2
2) Node.js 14 running on 64bit Amazon Linux 2
3) Node.js 12 running on 64bit Amazon Linux 2 (Deprecated)
(default is 1): 1

Do you wish to continue with CodeCommit? (Y/n): n
Do you want to set up SSH for your instances?
(Y/n): Y

Select a keypair. # キーペアを用意していない場合は新しく作成してください
1) aws
2) aws-eb
3) aws_key
4) [ Create new KeyPair ]
(default is 3): 2

ここまで来たらようやくデプロイです！
eb createで環境を作成（デプロイ）します。

eb create
Enter Environment Name
(default is blog-dev): blog-dev
Enter DNS CNAME prefix
(default is blog-dev2): blog-dev2

Select a load balancer type
1) classic
2) application
3) network
(default is 2): 2


Would you like to enable Spot Fleet requests for this environment? (y/N): n
Creating application version archive "app-bf25-220925_025922039748".
Uploading blog/app-bf25-220925_025922039748.zip to S3. This may take a while.
Upload Complete.
Environment details for: blog-dev
CNAME: blog-dev2.ap-northeast-1.elasticbeanstalk.com
(省略)

デプロイが完了したら実行ログのEnvironment detailsに記載されているCNAMEにブラウザからアクセスします。
今回はblog-dev2.ap-northeast-1.elasticbeanstalk.comになります。

Next.jsのデフォルトページが表示されました！
以上、Elastic Beanstalkへのデプロイ方法でした。