Zenn
🔰

【AWS Amplify】Next.jsデプロイで「ページが見つからない」? 初回連携時の落とし穴

に公開
AWS
Next.js
初心者
Amplify
tech

はじめに

こんにちは！Next.js と AWS Amplify を使って、サクッとウェブアプリを公開しよう！…と思ったら、思わぬ落とし穴にハマってしまった経験はありませんか？
ローカルでは完璧に動くのに、Amplify にデプロイしたら「ページが見つかりません (Not Found)」のエラー。ビルドは成功しているっぽいのに、なぜ…？

この記事では、特に Amplify と GitHub を初めて連携する際に Next.js プロジェクトで発生しがちな、フレームワークの誤認識問題とその解決策について、私の実体験を元に備忘録としてまとめます。

何が起こったのか？

意気揚々と Next.js で開発したアプリを Amplify にデプロイ！
ローカル開発サーバー (npm run dev) では問題なく表示され、ローカルのビルド (npm run build) も成功し、Amplify のビルドもログ上は成功。しかし、払い出された Amplify の URL (https://<branch>.<appid>.amplifyapp.com/) にアクセスすると、無情にも「このページは見つかりません(404)」というメッセージが…。

Windsurf 先生 (Gemini 2.5 Pro) に相談し、言われた通り Amplify Console を確認すると、アプリの「プラットフォーム」が WEB、「フレームワーク」が Web となっていました。Next.js を使っているはずなのに、汎用的な静的ウェブサイトとして認識されてしまっていたのです。

原因は「リポジトリの初期状態」

結論から言うと、原因は Amplify と GitHub リポジトリを最初に連携したとき、リポジトリ内に Next.js のプロジェクトファイルが存在しなかったこと でした。

私のケースでは、最初にリポジトリを作成した際、README.md ファイルだけをプッシュした状態で Amplify と連携してしまいました。
Amplify は、連携時にリポジトリの内容をスキャンしてフレームワークを自動判別します。しかし、package.json に next の記述がなかったり、next.config.js のような Next.js 特有のファイルが存在しなかったりすると、Amplify は「これは Next.js のプロジェクトだな！」と判断できません。
その結果、汎用的な「Web」（静的サイトホスティング）として設定されてしまったのです。

こうなると、後から Next.js のコードをリポジトリにプッシュしてビルドが成功しても、Amplify は Next.js のサーバーを起動するようにはなっていないため、ページは正しく表示されません。

正しい対処法：アプリの再作成

一度「Web」フレームワークとして認識されてしまうと、Amplify Console のGUIからフレームワーク設定を「Next.js (SSR や Compute)」に直接変更するのが難しい場合があります（私の場合は編集画面が見つかりませんでした）。

最も確実な解決策は、以下の手順で Amplify アプリケーションを再作成する ことです。
大丈夫。どうせ既存のプロジェクトは動かないし。Amplify なら再作成も簡単です。

  1. Next.js のコードを GitHub リポジトリにプッシュする:
    これが最重要！package.json, next.config.js (または .ts), app や pages ディレクトリなど、Next.js プロジェクトの基本的なファイル群がリポジトリに存在するようにします。
  2. 既存の Amplify アプリケーションを削除する:
    問題が発生している Amplify アプリケーションを Console から削除します。
  3. 新しい Amplify アプリケーションを作成する:
    • Amplify Console で「新しいアプリをホスト」から開始します。
    • GitHub リポジトリとブランチを選択します。
    • この段階で、Amplify がリポジトリをスキャンし、フレームワークを自動検出します。今度は正しく「Next.js」（または "Next.js - SSR", "Next.js - Compute" など）と認識されるはずです。
    • ビルド設定 (amplify.yml に相当する内容) も、Next.js 用の適切なデフォルト値 (例: preBuild で npm ci、build で npm run build、artifacts の baseDirectory が .next) が設定されることを確認します。
    • 設定を保存し、デプロイを開始します。

この手順で、Amplify はプロジェクトを正しく Next.js アプリケーションとして認識し、必要なサーバープロセスを起動してサイトを配信してくれるようになります。

ビルド設定 (amplify.yml) の確認ポイント

Amplify が Next.js を正しく認識した場合、ビルド設定は以下のようになっていることが期待されます（Amplify Console 上で確認・編集できます）。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci # または npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

特に、preBuild で依存関係がインストールされ、artifacts の baseDirectory が .next になっているかを確認しましょう。

まとめ：学びと教訓

今回の経験から学んだ重要なポイントは以下の通りです。

  • Amplify とリポジトリの初回連携は、プロジェクトの骨格ができてから！ 少なくとも package.json で Next.js の依存関係が定義されている状態で連携しましょう。
  • Amplify Console でフレームワークが正しく認識されているか確認する！ 「プラットフォーム: WEB_COMPUTE」「フレームワーク: Next.js」のようになっているか（UIは変更される可能性あり）。
    Next.js の SSR/ISR/APIルートはサーバー実行が必要！ 静的サイトホスティングの設定では動きません。

1日でAWSのIAM設定からAmplifyでのデプロイまで漕ぎ着け、この問題も解決できたのは大きな自信になりました。 この記事が、同じようにハマってしまった方の助けになれば幸いです。 Happy Hacking!

（100%筆者による）まとめ

Amplify すごい。
「Amplify なら簡単にサイトが公開できます」の意味がようやく分かった。
あと、Gemini 2.5 Pro すごい。
Windsurf で使った GPT-4.1 にも SWE-1 にも、セカントオピニオンの ChatGPT にも解消できなかった Next.js の build エラーをサクサク原因究明して解消してくれた。そっちもけっこうハマったから記事にしとこう。大丈夫。記事はほとんど Gemini 2.5 Pro が書いてくれる。

Discussion