はじめに
Next.jsアプリケーションをAWS Amplify Gen2で静的サイト生成（SSG）としてデプロイしようとした際、デプロイに失敗する問題に遭遇しました。
この記事では、その問題の原因と解決方法について説明します。
問題の説明
エラーメッセージ
ビルドログに以下のようなエラーが表示されます。
!!! CustomerError: Can't find required-server-files.json in build output directory
原因
Amplify Gen2がNext.jsアプリケーションをサーバーサイドレンダリング（SSR）として認識してしまい、静的サイト生成（SSG）として正しくデプロイできていないことが原因です。Next.js側とAmplify側の設定（後述の前提条件1,2）を行っても、Amplifyコンソール側で自動的にSSGとして認識されず、1,2の設定を反映してビルドしても先ほどのエラーが発生します。
前提条件
以下の設定は既に実施済みであることを前提とします。
1. Next.js側の設定
next.config.js（またはnext.config.ts）にoutput: 'export'を追加していること。
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
// Amplify静的ホスティング用の設定
output: 'export',
trailingSlash: true,
images: {
unoptimized: true,
},
env: {
NEXT_PUBLIC_APP_BRANCH: process.env.AWS_BRANCH || 'dev',
},
};
export default nextConfig;
ポイント：
-
output: 'export'を設定することで、Next.jsが静的HTMLを生成します -
trailingSlash: trueは、Amplifyでのルーティングを安定させるために推奨されます -
images.unoptimized: trueは、静的エクスポート時には必須です
2. Amplify Gen2側の設定
amplify.ymlのartifacts.baseDirectoryを.nextからoutに変更していること。
version: 1
frontend:
phases:
preBuild:
commands:
- echo "Installing frontend dependencies"
- npm install
build:
commands:
- echo "Building static Next.js application"
- npm run build
artifacts:
baseDirectory: out # .next から out に変更
files:
- "**/*"
cache:
paths:
- .npm
- node_modules
ポイント：
-
output: 'export'を設定すると、Next.jsはoutディレクトリに静的ファイルを出力します -
baseDirectoryをoutに設定することで、Amplifyが正しいディレクトリからファイルを取得できます
解決方法
上記の前提条件1,2を設定してもエラーが発生する場合、Amplify側でアプリケーションがSSRとして認識されている可能性があります。以下の手順で設定を上書きする必要があります。
設定前の状態確認
まず、AWSコンソールのAmplifyの画面で現在の設定を確認します。
設定前の画面では、フレームワークが「Next.js - SSR」として表示されています。
Amplify CLIでの設定上書き
アプリ作成後に以下のコマンドを実行して、platformとframeworkの値を上書きします。
# platformをWEBに設定
aws amplify update-app --app-id <APP_ID> --platform WEB
# frameworkをNext.js - SSGに設定
aws amplify update-branch --app-id <APP_ID> --branch-name main --framework 'Next.js - SSG'
ポイント：
-
<APP_ID>は実際のAmplifyアプリIDに置き換えてください -
mainは実際のブランチ名に置き換えてください（例：stage、productionなど） - アプリIDは、AWSコンソールのAmplifyの画面のURLから確認できます
設定後の状態確認
コマンド実行後、AWSコンソールのAmplify画面をリロードして設定が反映されているか確認します。
設定後は、フレームワークが「Next.js - SSG」として表示されていることを確認してください。
設定後の確認方法
デプロイが成功すると、ビルドログに以下のようなメッセージが表示されます：
## Completed Frontend Build
## Build completed successfully
エラーメッセージが表示されず、正常にビルドが完了していれば成功です。