Next.js 15(API Routes)がAmplify で 404 エラーになる原因と解決法

はじめに

Next.js15でAPI Routesを使ったアプリをAWS Amplifyにデプロイしたら、ビルドは成功するのに404エラーで全くアクセスできない状況に陥りました。原因は設定の問題だったという話です。

何が起きたか

npx create-next-app@latest で作成した Next.js15アプリケーションをAWS Amplifyにデプロイしました。結果：

• ✅ ビルドは正常に完了
• ✅ デプロイも成功
• ❌ アプリにアクセスすると 404 エラー
• ❌ API Routes も動作しない

見た目上は成功しているのに、実際には何も動かない状態でした。

原因判明：設定が間違っていた

AWS Amplify がアプリを 静的サイト (WEB) として誤認識し、SSR アプリ (WEB_COMPUTE) として処理されていないことが原因でした。具体的には：

• プラットフォームタイプ が WEB になっている
• フレームワーク が Web になっている（Next.js - SSR であるべき）
  (コンソール画面からだとアプリケーションの設定>全般設定から「プラットフォーム」「フレームワーク」を確認)

この2つの設定が正しくないため、Amplify が Next.js アプリを静的サイトとして扱い、API Routes や SSR 機能が動作しません。

なぜ WEB プラットフォームでは API Routes が動作しないか

WEB プラットフォーム（静的ホスティング）の仕組み：

• ビルド時に静的ファイル（HTML、CSS、JS）を生成
• Amazon S3 + CloudFront CDN で配信
• サーバーサイド処理は一切実行されない
• API Routes のような動的機能は利用不可

WEB_COMPUTE プラットフォーム（SSR ホスティング）の仕組み：

• Amplify Hosting compute が SSR を完全管理
• AWS Lambda 上で Next.js サーバーが動作
• API Routes、SSR、ISR などの動的機能が利用可能
• リクエスト時にサーバーサイド処理を実行

解決するまでにやったこと

1. 現在の設定を確認

AWS CloudShell または AWS CLI で現在のプラットフォームタイプを確認：

aws amplify list-apps --output table

platform が WEB になっている場合は、WEB_COMPUTE に変更が必要です。

2. 設定を正しく変更

プラットフォームタイプを WEB_COMPUTE に変更：

aws amplify update-app --app-id YOUR_APP_ID --platform WEB_COMPUTE

フレームワークを Next.js - SSR に変更：

aws amplify update-branch --app-id YOUR_APP_ID --branch-name main --framework "Next.js - SSR"

3. amplify.yml の設定

ルートディレクトリに amplify.yml を配置：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 20 //必須ではない
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - node_modules/**/*

重要なポイント

✅ やるべきこと

• プラットフォームを WEB_COMPUTE に設定
• フレームワークを Next.js - SSR に設定
• output: 'standalone' を Next.js 設定に追加
• baseDirectory: .next を amplify.yml に指定

プラットフォームタイプの違い

タイプ	用途	Next.js サポート	インフラ構成
WEB	静的サイト (SSG)	静的ページのみ	S3 + CloudFront
WEB_DYNAMIC	Next.js 11 SSR	旧バージョン	非推奨
WEB_COMPUTE	Next.js 12+ SSR	✅ API Routes 対応	Lambda + Amplify Hosting compute

WEB_COMPUTE の具体的な機能サポート

AWS公式ドキュメントによると、WEB_COMPUTE プラットフォームは以下をサポートします：

✅ サポート機能:

• Server-side rendered pages (SSR)
• API routes（重要: これが WEB では不可能）
• Dynamic routes
• Static Site Generation (SSG)
• Incremental Static Regeneration (ISR)
• 国際化 (i18n) ルーティング
• Middleware
• Image optimization
• Next.js 13+ App Directory

❌ 未サポート機能:

• Edge API Routes
• On-Demand ISR
• Next.js streaming

同じ問題で困っている方へ

もし同じような 404 エラーに遭遇したら、以下を確認してください：

ビルドは成功するが 404 エラーの場合

1. プラットフォームタイプが WEB_COMPUTE になっているか確認
2. フレームワークが Next.js - SSR になっているか確認
3. baseDirectory が .next になっているか確認
4. CloudWatch Logs でエラーログを確認

設定確認コマンド：

# アプリ全体の設定確認
aws amplify get-app --app-id YOUR_APP_ID

# ブランチ設定確認
aws amplify get-branch --app-id YOUR_APP_ID --branch-name main

API Routes が動作しない場合

• 最重要: プラットフォームが WEB_COMPUTE になっているか確認
• Edge API Routes は使用していないか確認（Amplify 未対応）
• サーバーサイド機能が正しく認識されているか確認

Next.js のバージョン別注意点

• Next.js 12+: WEB_COMPUTE プラットフォームが必要
• Next.js 11以下: 非推奨の WEB_DYNAMIC を使用（新規非推奨）
• Next.js 15: 完全サポート（本記事の対象）

重要: AWS公式ドキュメントでは、Next.js 11以前のアプリを Amplify Hosting compute（WEB_COMPUTE）への移行を強く推奨しています。

参考情報

• AWS Amplify SSR サポート公式ドキュメント
• AWS Amplify Next.js サポート
• Next.js API Routes with AWS Amplify（公式ブログ）
• Next.js 15 公式ドキュメント

最後に

Next.js 15 + API Routes を AWS Amplify でホスティングする場合は、必ず WEB_COMPUTE プラットフォームと Next.js - SSR フレームワーク設定が必要です。これらを正しく設定すれば、Next.jsがAmplify で正常に動作します。

この記事が同じ問題で困っている方の助けになれば幸いです！