Next.js静的公開

Next.jsの静的サイトを
outフォルダから公開

Next.jsを静的書き出しし、生成されたoutフォルダをアップロードします。Node.jsサーバーなしで公開できる構成と、別の実行環境が必要な構成を分けて扱えます。

設定手順を見る
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// Optional for static deployments
images: { unoptimized: true },
}

module.exports = nextConfig
静的書き出しを確認中

静的書き出しの対応範囲

outをアップロードする前に、アプリが静的出力モデルに合っているか確認します。

向いている構成

  • ビルド時に生成できる静的ルート
  • 静的に描画できるApp Routerページ
  • Pages Router の getStaticProps / getStaticPaths
  • hydration後のクライアント側データ取得
  • next/link、dynamic imports、CSS Modules、静的素材

別の実行環境が必要な構成

  • サーバー実行が必要な API routes / route handlers
  • ミドルウェア、rewrites、redirects、custom headers
  • getServerSidePropsとリクエスト時生成
  • Incremental Static Regeneration
  • 標準のnext/image最適化をそのまま使う構成

Next.jsの仕組みを使い、サーバーは持ち込まない

フレームワークの便利さを静的出力にする

Next.jsの静的書き出しでは、ファイルベースルーティング、レイアウト、メタデータ、ビルド時生成、CSS、必要なクライアント側Reactを使ったまま静的ファイルを出力できます。

最終的な成果物はHTML、CSS、JavaScript、画像などのファイルです。マーケティングサイト、ドキュメント、ポートフォリオ、製品ページ、コンテンツ集約ページのようにビルド時に用意できるページに向いています。

静的ファイルとして速く配信

事前生成されたHTMLはキャッシュしやすく、レンダーサーバーの応答を待たずに配信できます。

運用する部品を減らす

Node.js実行環境を持たないため、公開物が明確になり、ビルドごとの状態差も抑えやすくなります。

実行環境の境界が明確

サーバー処理が必要なページは静的書き出しに押し込まず、ビルド時に作れるページだけをoutとして公開します。

静的書き出しでよくある詰まりどころ

Blocker 01

サーバー専用機能が原因でビルドに失敗する

該当ルートからリクエスト時APIを外すか、別バックエンドに移します。サーバー処理が必要な部分は、それを実行できる基盤に分けます。

Blocker 02

開発環境では画像が表示されるのに、書き出し後に壊れる

標準のnext/image最適化はサーバーを前提にします。images.unoptimized、独自loader、または通常の静的画像に切り替えます。

Blocker 03

動的ルートのページが出力されない

App RouterではgenerateStaticParams、Pages RouterではgetStaticPathsでビルド時に生成するルートを用意します。

Blocker 04

redirects や rewrites が反映されない

Next.jsのredirects / rewritesは静的書き出しの成果物には含まれません。静的ページ構造、クライアント側遷移、または公開基盤側のリダイレクトを使います。

Next.js静的書き出しチェックリスト

01

output: 'export' を設定する

next startやホストされたNode.js実行環境を前提にせず、ビルド時に静的HTMLを出力するよう設定します。

output: 'export'
02

ビルド後のoutを確認する

本番ビルドを実行し、outにページ、素材、404ページ、公開予定の静的ファイルが含まれているか確認します。

npm run build
03

アップロードしてルートを検証する

outフォルダをアップロードし、ネストしたパス、静的素材、画像の扱いを公開リンクで確認します。

Next.js 公開 FAQ

Next.js の Image コンポーネントは静的出力で使えますか？

標準のImage最適化はサーバーを前提にします。静的書き出しではnext.config.jsでimages.unoptimizedをtrueにするなど、静的配信向けに調整します。

API Routes や getServerSideProps は使えますか？

いいえ。静的書き出しではAPI routes、ミドルウェア、getServerSidePropsのようなサーバー実行機能は使えません。別バックエンドやサーバーレスサービスに分けます。

App Router は使えますか？

はい。ルートが静的に描画でき、headersやcookiesなどの動的なサーバーAPIに依存しない場合に使えます。

動的コンテンツはどう扱えばよいですか？

可能ならビルド時に取得します。頻繁に変わる内容はhydration後にクライアント側で取得する設計も検討します。

.next と out のどちらをアップロードしますか？

output: 'export' の場合はoutをアップロードします。.nextはNext.jsの内部ビルドディレクトリで、公開用の静的成果物ではありません。

Vercel の Next.js ホスティングの代替になりますか？

静的書き出しに合うNext.jsアプリには使えます。SSR、ミドルウェア、ISR、Server Actions、API Routesに依存する場合は、それらを実行できる環境が必要です。