Next.js 13 SSG実装ガイドと最新技術

2026年6月24日

Contents

1 Next.js 13での静的サイト生成（SSG）の概要
2 next.config.jsでのoutput: 'export'設定の実装
- 2.1 静的エクスポートモードの有効化手順
3 getStaticPropsとgenerateStaticParamsの使い分け
- 3.1 静的生成関数の比較
- 3.2 App Routerでのデータ取得フロー
4 generateStaticParams関数の導入と活用
- 4.1 パラメータ生成処理の最適化手法
5 ビルド時データ取得（fetch）のベストプラクティス
- 5.1 非同期処理のエラーハンドリング
- 5.2 キャッシュ戦略の設計
6 静的HTMLエクスポート時のデプロイフロー
- 6.1 Vercelへの配信手順
- 6.2 カスタムドメイン設定のポイント
7 まとめ

スポンサードリンク

Next.js 13での静的サイト生成（SSG）の概要

Next.js 13では、App Routerによる構造の変更に伴い、静的サイト生成（SSG）の実装方法にも大きな変化が生じています。特に、従来のpages/ディレクトリではなく、新たに導入されたapp/ディレクトリを起点としたアプローチが推奨されています。この変更により、動的ルートパラメータの生成やデータ取得フローの柔軟性が向上しました。

App Routerでは、SSG実装時にgetStaticPropsやgetStaticPathsが依然として利用可能ですが、generateStaticParamsという新たな関数も導入されており、大量データ時のパフォーマンスを意識した設計が求められています。以下では、具体的な設定手順と注意点について詳しく解説します。

next.config.jsでのoutput: 'export'設定の実装

Next.jsアプリケーションを完全なスタティックサイトとしてビルドするには、next.config.jsでoutput: 'export'を有効化する必要があります。この設定により、アプリケーションがサーバーサイドレンダリング（SSR）ではなく、事前にHTMLファイルとしてエクスポートされるよう指定されます。

静的エクスポートモードの有効化手順

プロジェクトルートにnext.config.jsを作成または編集します。
以下の設定を追加します。

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
};

/** @type {import('next').NextConfig} */

const nextConfig = {

output: 'export',

};

next exportコマンドでビルドを実行し、エクスポートされたHTMLファイルが生成されます。

この設定は特に静的なコンテンツ配信が必要なプロジェクト（例：企業サイトやブログなど）に適しています。ただし、動的コンポーネント（例：クライアントサイドのデータフェッチ）が含まれる場合、一部の制限があるため注意が必要です。

`getStaticProps`と`generateStaticParams`の使い分け

App RouterではgetStaticPropsとgetStaticPathsを依然として利用できますが、使用目的に応じた適切な使い分けが重要です。また、Next.js 13から導入されたgenerateStaticParamsは、動的ルートパラメータの生成を簡略化するための関数です。

静的生成関数の比較

関数名	用途	対象データ	実装範囲
`getStaticProps`	ページごとのデータフェッチ	個別記事・ページ情報	ページ単位
`generateStaticParams`	動的ルートパラメータのリスト生成	全データ・動的パス	ルートレベル

App Routerでのデータ取得フロー

getStaticProps：個々のページに必要なデータ（例：記事本文）をビルド時にフェッチする。
generateStaticParams：動的ルートパラメータに基づいて生成すべきパスリストを定義する。

// app/blog/[slug].tsx
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts');
  return posts.map(post =&gt; ({
    slug: post.id,
  }));
}

// app/blog/[slug].tsx

export async function generateStaticParams() {

const posts = await fetch('https://api.example.com/posts');

return posts.map(post => ({

slug: post.id,

}));

}

上記の例では、generateStaticParamsを使用して動的なパスを生成しています。これはgetStaticPathsの代替として導入された関数で、特に大量データ処理に最適です。

`generateStaticParams`関数の導入と活用

Next.js 13では、動的ルートパラメータの生成を簡略化するため、generateStaticParamsという新たな関数が登場しました。

パラメータ生成処理の最適化手法

項目	説明
用途	動的ルートパラメータ（例：`[slug]`）を自動生成するための関数
詳細	APIからデータを取得し、必要なパスリストを戻す形式で処理可能
メリット	`getStaticPaths`よりも柔軟性が高く、大量データ時のパフォーマンス向上に寄与

export async function generateStaticParams() {
  const data = await fetch('https://api.example.com/items');
  return data.map(item =&gt; ({
    id: item.id,
  }));
}

export async function generateStaticParams() {

const data = await fetch('https://api.example.com/items');

return data.map(item => ({

id: item.id,

}));

}

この方法を使うことで、動的ページを効率的に生成でき、SSG処理の負荷軽減が期待できます。

ビルド時データ取得（fetch）のベストプラクティス

Next.jsでは、getStaticPropsやgenerateStaticParams内で外部APIからのデータフェッチを行うことが可能です。ただし、エラーハンドリングとキャッシュ戦略を適切に設計する必要があります。

非同期処理のエラーハンドリング

try-catchブロックを使用し、ネットワークエラーなどに対応する。
エラー発生時はデフォルト値や代替データを返すように設定する。

export async function getStaticProps() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) throw new Error('Network response was not ok');
    return { props: await res.json() };
  } catch (error) {
    console.error(error);
    return { props: { data: null } };
  }
}

export async function getStaticProps() {

try {

const res = await fetch('https://api.example.com/data');

if (!res.ok) throw new Error('Network response was not ok');

return { props: await res.json() };

} catch (error) {

console.error(error);

return { props: { data: null } };

}

キャッシュ戦略の設計

revalidateプロパティでキャッシュ有効期限を設定し、定期的な再ビルドを可能に。
大量データ取得時にはページごとに最適なキャッシュポリシーを検討する。

キャッシュポリシー	用途	例（秒単位）
`revalidate: 0`	ページの再ビルドを無効化	静的データのみ
`revalidate: 60`	1分毎のキャッシュ更新	新聞記事など
`revalidate: 3600`	1時間毎のキャッシュ更新	更新頻度が低いデータ

静的HTMLエクスポート時のデプロイフロー

Next.jsで静的にエクスポートされたHTMLファイルは、VercelやAWS Amplifyなどに配信可能です。

Vercelへの配信手順

next exportコマンドを実行し、out/ディレクトリにHTMLファイルが生成される。
Vercelプロジェクトにout/ディレクトリをアップロードする。
配信先URLを設定して公開する。

注意：Vercelではout/ディレクトリの自動検出が行われるため、プロジェクトルートを明示的に変更する必要はありません。

カスタムドメイン設定のポイント

DNS設定でVercelの提供するCNAMEを指定する必要があります。
また、SSL証明書もVercel側で自動的に対応していますが、カスタムドメイン用に別途取得が必要なケースもあります。

まとめ

本記事では、Next.js 13におけるSSG実装の具体的な手順と注意点を解説しました。重要なポイントを以下に整理します：

output: 'export'設定により静的エクスポートモードを有効化する
generateStaticParamsで動的ルートパラメータを生成し、パフォーマンス向上を図る
データフェッチ処理には適切なエラーハンドリングとキャッシュ戦略を設計する
静的HTMLファイルの配信はVercelやAWS Amplifyなどに依頼することで効率化できる

記事で解説した手順に沿ってNext.jsプロジェクトを実際に作成し、動作確認をしてください。実装中にわからない点があればコメント欄でご質問ください。