Next.js 静的サイト生成 (SSG) と output: ‘export’

2025年3月17日2025年6月10日

SSGの仕組み

従来のSSRやCSRとは異なり、SSGは開発・デプロイ段階でHTMLファイルを完全に生成します。

ユーザーがアクセスする時点では、すでに完成されたHTMLファイルがCDNから即座に配信されるため、極めて高速な表示が実現できます。

SSR、CSR、SSGの違い

SSR: サーバーでHTMLを生成してから送信。初期表示が速く、SEOに有利

CSR: クライアント側でJavaScriptが実行されてからDOMを構築。SPAに適している

CSRで動的なページを作成する際は、クライアントfetchとクライアントサイドレンダリングを組み合わせて使用します。

CSRの動的ページ作成フロー
1. クライアント → Webサーバー（JS/CSSファイル取得）
2. 基本的なHTMLシェルとJavaScriptを受信
3. クライアントfetch → リソース（API/DB）からデータ取得
4. 取得したデータを使ってクライアントサイドでレンダリング
5. DOMを動的に更新してコンテンツを表示

SSG: ビルド時に静的ファイルを生成。最も高速で、CDN配信に最適

プロジェクトの要件に応じてどの手法を選ぶべきかの参考になるかと思います。

SSGは「ページを生成する方法」であって、「データを処理する場所」ではない

サーバーサイドの処理をSSGビルドした場合、どのようになりますか？

可能。ただし「ビルド時に1回だけ実行される処理」に限られる。

例）フォームバリデーション

SSG：ビルド時にHTMLを生成するだけ。「フォーム処理」や「バリデーション処理」の場でもない。

分類	実行場所	目的	必須か？
クライアントバリデーション	ブラウザ内	UX向上、即時フィードバック	推奨だが任意
サーバーバリデーション	サーバー（API）	セキュリティ・整合性保持（改ざん対策）	絶対必須

output: ‘export’ とは

output: 'export' は Next.js の設定オプションの一つで、プロジェクトを完全に静的なサイトとして生成するための設定です。

この設定を next.config.js ファイルに追加することで、ビルド時に静的な HTML ファイルが生成され、サーバーサイドの機能を必要としない完全な静的サイトとしてデプロイできるようになります。

// next.config.js
module.exports = {
  output: 'export',
}

上記設定をしていてもnpm run dev での開発は通常通り行えます (開発サーバーは動作します)

generateStaticParams() の使い方

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  // 例えば、すべてのブログ記事を取得するAPIを呼び出し
  const posts = await fetchPosts();
  
  // 各記事のスラッグをパラメータとして返す
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// ページコンポーネント
export default function BlogPost({ params }) {
  // params.slug が使用可能
  return <div>...</div>;
}

この関数が返す配列の各オブジェクトは、1つのルートパスに対応しています。例えば上記のコードでは、posts 配列に含まれる各記事のスラッグに対して静的ページが生成されます。