特にApp Routerの登場以降、Next.jsを静的サイトとしてビルド（SSG）し、Amplifyで運用する手法は、コスト効率とセキュリティの面から極めて有力な選択肢です。しかし、Vercelと違ってAmplifyでは 「リフレッシュすると404になる」「ビルド環境のNode.jsバージョンが合わない」 といった、SSG特有のハマりどころが存在します。
この記事では、Next.js (SSG) をAmplifyへデプロイする手順から、実務で必須となる設定のベストプラクティスまでを実体験に基づいて解説します。
1. Vercel ではなく AWS Amplify を選ぶ理由#
Next.js開発において、あえて AWS Amplify を選択する背景には、主に以下のような実務上の理由があります。
- AWSリソースとの統合: IAM、Cognito、S3、Lambdaなどの既存リソースと同じアカウント・請求範囲で管理したい。
- データレジデンシー: 日本リージョン（東京・大阪）でのホスティングを厳格に指定したい（コンプライアンス要件）。
- コスト: アクセス数が多いサイトにおいて、データ転送量（Data Transfer）のコストがAWSのほうが予測しやすいケース。
- プライベートアクセス: VPC内のリソースに安全にアクセスしたい（Amplify Gen 2などで強化されているポイント）。
2. Next.js 側の準備：output: 'export' の設定#
SSGとしてAmplifyにデプロイするには、Next.jsを「静的書き出しモード」にする必要があります。
next.config.js の設定#
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export', // 静的HTML書き出しを有効化
trailingSlash: true, // URLの末尾にスラッシュを付与（404対策として推奨）
images: {
unoptimized: true, // SSGでは標準の画像最適化サーバーが動かないため
},
};
module.exports = nextConfig;Pro Tip:
trailingSlash: trueを設定すると、/aboutが/about/index.htmlとして出力されます。これはS3やAmplifyなどの静的ホスティングにおいて、ディレクトリベースのアクセスを安定させるために有効です。
3. Amplify のビルドスペック (amplify.yml) 最適化#
Amplifyのデフォルト設定では、Node.jsのバージョンが古くビルドが失敗することがあります。
おすすめの amplify.yml#
version: 1
frontend:
phases:
preBuild:
commands:
# 最新のNode.jsを指定（Next.js 15以上は Node.js 18.18+ が必須）
- nvm use 20
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: out
files:
- '**/*'
cache:
paths:
- node_modules/**/*
- .next/cache/**/*4. 【最重要】リフレッシュ時の 404/403 問題を解決する#
AmplifyにデプロイしたSSGサイトで、/about のようなページを表示中にブラウザを更新すると、AWSの無機質なXMLエラーが表示されることがあります。
解決策：書き換え（Rewrites）の設定#
Amplifyコンソールの「リダイレクトと書き換え」に以下のルールを追加します。
| 元のパス | ターゲットのパス | タイプ |
|---|---|---|
| `</^[^.]+$ | .(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>` | /index.html |
この正規表現は、「拡張子を持たないリクエスト（＝ページ遷移）」を全て index.html に流し、Next.jsのクライアントルーティング（CSR）に処理を委ねる設定です。
5. 実務で役立つ追加設定#
プルリクエスト（プレビュー）環境#
Amplifyの強力な機能の一つが、PRごとにプレビュー環境を自動生成できる機能です。
- コンソールの「プレビュー」メニューから有効化。
- これにより、デザイナーやQA担当が本番反映前に実機で確認できるようになります。
環境変数の注入#
ビルド時に必要な環境変数（NEXT_PUBLIC_ プレフィックス付きのものなど）は、Amplifyコンソールの「環境変数」から設定します。
まとめ：SSG運用の安定性を高めるために#
Next.jsをAWS Amplifyにデプロイする際は、以下の3点を意識するだけでトラブルの8割を防げます。
output: 'export'とtrailingSlash: trueのセット運用。amplify.ymlでの Node.js バージョン明示。- リダイレクト設定による 404 回避。
Vercelの利便性は素晴らしいですが、AWS環境という「強力な基盤」の上でNext.jsを運用するスキルは、エンタープライズ領域のエンジニアにとって大きな武器になります。
