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

2025年3月17日

`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 配列に含まれる各記事のスラッグに対して静的ページが生成されます。