AWS Amplify で Next.js アプリを作成する際のビルド設定

1. 本記事は

create-next-app

で作成したNext.jsの各種ファイルをgithubにアップロードし、AWS Amplifyでデプロイするパイプラインを作成する際に躓いたポイント（ビルド設定）のメモ。

2. Next.js 各種ファイルを github にアップロード

1. githubで新たにリポジトリを作成する
2. terminalを開きファイルを保存したい場所へ移動（以下terminalでのコマンド）
3. package.json内の"build"に追記するここ注意！

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },

を

  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  },

に編集します。
4. create-next-app [アプリ名]　ローカルに各種ファイルを作成
5. git init　.gitファイルの作成
6. git remote [リポジトリのurl]　でリモートリポジトリを記憶
7. git add .　で全てのファイルをコミット対象に
8. git commit -m [コメント]　でコミット
9. git push remote origin master　でmasterブランチへプッシュ

3 リモートリポジトリとAmplifyをつなぐ

1. AWSマネジメントコンソールを開き、サービスからAWS Amplifyを選択
2. アプリを作成を押下
3. 「From your existing code」でGitHubを選択しContinueを押下
4. 「GitHub 認証が成功しました。」と出たら、「リポジトリ」のプルダウンメニューから作成したリポジトリを選択し、次へを押下
5. 「リポジトリ」のプルダウンメニューからmasterを選択し、次へを押下
6. 「Select a backend environment」でバックエンド環境を選択（なければ作る）
7. 「Select an existing service role or create a new one so Amplify Console may access your resources.」はデフォルトのロールを選択。
8. 「ビルドの設定」ここ注意！

  artifacts:
    baseDirectory: build

を

  artifacts:
    baseDirectory: out

に変えます。

9．次へを押下
10．保存してデプロイを押下

4. 祈って待つ

画像にあるようなページに遷移したらあとはプロビジョンから検証まで進んでくれることを祈るだけ..
全ての工程が終了したら左側にあるhttps://master...のurlを押してみましょう。これが今作成されたNext.jsアプリのurlになります。
自作ドメインの設定もAmplifyのコンソールから行うことができます。

5 まとめ

注意するのは「ここ注意！」と書いた2点。
ビルドのフェーズで静的なhtmlを作成する際にnext exportというコマンドが必要になり、それらのファイルの出力先をoutとする必要があるそうです。