「Next.js で pnpm build (ビルド)後の出力ファイルが見当たらない」トラブルシュート＆静的デプロイ

Next.js Web アプリで「pnpm build 実行後に成果物が見つからない」問題の原因・解決策を、静的サイト出力（output: 'export'）対応＆手動 ZIP デプロイまでの記録

2025年11月7日

はじめに

Webアプリを Next.js で構築し、 pnpm build を実行しても “出力ファイルが見当たらない”という状況に遭遇していませんか？本稿では、App Router を使った Next.js プロジェクトにおいて、Amplify での手動 ZIP デプロイや静的出力（output: 'export'）を前提に、「成果物がどこに行ったのか分からない」原因から、設定変更、確認手順、最終的には ZIP アップロードまでをステップごとにまとめました。

想定環境

Next.js（App Router）バージョン 16+
AWS Amplify Hosting で「Amazon S3 または Zip ファイルからアプリケーションを手動でデプロイする」を想定
ビルドコマンド：pnpm build
出力先の混乱を防ぐため “out/” フォルダ書き出しを採用

なぜ「出力ファイルが見当たらない」のか？

ビルドが成功してもファイルが見つからない理由として、以下のようなケースがあります：

Next.js のデフォルトビルドは .next/ に成果物を生成するため、静的ホスティング用の out/ に出ない。
next.config.ts に output: 'export' が設定されていないため、静的エクスポートではない。
SSR または server-actions／route-handlerが混じっており、完全な静的出力に対応していない。
ビルド後に “出力フォルダ”の見方／ルートパスがずれている。
Amplify Hosting 用の ZIP 構造（.amplify-hosting/…）を意識しないと、正しくアップできても反映されない。

出力ログのヒント

Next.js 16.0.0 (Turbopack)
 - Environments: .env

 Creating an optimized production build …
 ✓ Compiled successfully in 2.0s
 ✓ Finished TypeScript in 1552.6ms
 ✓ Collecting page data in 211.4ms
 ✓ Generating static pages (5/5) in 242.0ms
 ✓ Finalizing page optimization in 6.8ms

 Route (app)
 ┌ ○ /
 ├ ○ /_not-found
 └ ○ /login

このログでは「Generating static pages」とあり静的出力傾向ですが、 output: 'export' が未設定であれば .next/ フォルダ内に出力されており、手動アップ用の out/ フォルダが生成されていません。

解決手順：静的出力＋手動Zipデプロイまで

1. next.config.ts に `output: 'export'` を追加

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'export',
  images: {
    unoptimized: true
  },
  // 必要に応じて basePath／trailingSlash も
};

export default nextConfig;

この設定により、pnpm build 実行後に out/ フォルダが作成され、静的 HTML／アセットがそこに出力されます。

2. ビルドと確認

rm -rf .next out
pnpm build

→ 成功後、プロジェクト直下に out/ フォルダが生成されていることを確認します。

ls -la out

例：

index.html
login/index.html
_assets/
_next/

3. 手動 ZIP 作成と AWS Amplify Hosting へのアップロード

cd out && zip -r ../deploy.zip . && cd ..

AWS コンソール → AWS Amplify → 新しいアプリを作成 → Gitなしでデプロイ → ドラッグアンドドロップ → deploy.zip をアップロード。
Static Hostingモードであればこのまま公開されます。

4. CORS／ルーティング設定の確認

AppSync やブラウザからの GraphQL 呼び出しを行っている場合、 Amplifyドメイン（例：https://abc123.amplifyapp.com）を Allowed Origins に登録。
シングルページアプリ／Client-Router を使うなら、Amplify Console の「Rewrites and redirects」で：

Source:   /*  
Target:   /index.html  
Type:     200 (Rewrite)

を設定しておくとページ直リンク時の404を防げます。

SSRが混ざっている場合の注意点

もしアプリ内に Route Handler（route.ts） や Server Actions、または getServerSideProps（旧方式）相当の機能があると、 output: 'export' はエラーになるか正しく動きません。その場合は：

SSR対応のデプロイ方式（例えば Amplify Hosting のスタンドアロン／Compute形式）に切り替えるか
SSR部分を取り除いて output: 'export' に完全対応させるか

を検討したほうがいいです

よくあるトラブルとその対処

トラブル	原因	対処
`out/` フォルダができない	`output: 'export'` の設定漏れ	next.config.ts を修正して再ビルド
`login/` などルート以外で404	Rewrite設定なし	Amplify Console で /* → /index.html を設定
GraphQL 呼び出しがブラウザで CORSエラー	Allowed Origins にドメイン未登録	AppSync 設定で公開ドメインを追加
モバイルSafariでエラーが出る	画像最適化が静的出力に非対応	`images.unoptimized: true` を設定
環境変数が反映されない	ビルド前に env ファイル認識がなかった	`.env.production` に追加／再ビルド

まとめ

Next.js と AWS Amplify の組み合わせで「ビルド後の出力ファイルが見当たらない」状況は、ほとんどの場合 静的出力の設定漏れか 出力先の見落としです。 next.config.ts に output: 'export' を加え、ビルド後に out/ フォルダを生成、さらに AWS Amplify Hosting に正しくアップロードすれば、静的ホスティングがスムーズに動きます。
また、ルーティングや CORS の設定を併せて整えることで、SPAとしても機能的にも安定公開できるようになります。