Next.js App RouterでSSGを完全理解！初心者でもわかるgenerateStaticParamsの使い方

1. SSGとは何か？初心者向けに解説

1. SSGとは何か？初心者向けに解説

SSGはStatic Site Generationの略で、ウェブページを事前にHTMLとして作成しておく方法です。通常のページはアクセスがあるたびにサーバーで作られますが、SSGではあらかじめ作っておくので、表示が速くなり、アクセスが集中しても強い特徴があります。

例えば、毎朝作る新聞のように、すでに完成したものを配るイメージです。Next.jsではApp Routerを使うと、簡単にSSG対応のページを作ることができます。

2. App RouterでSSGを実現するgenerateStaticParamsの基本

2. App RouterでSSGを実現するgenerateStaticParamsの基本

App RouterでSSGを使うには、まずgenerateStaticParamsという関数を作ります。この関数は「どのページを事前に作るか」をNext.jsに伝える役割です。

export async function generateStaticParams() {
  return [
    { id: "1" },
    { id: "2" },
    { id: "3" },
  ];
}

3. パラメータを受け取るページの作り方

3. パラメータを受け取るページの作り方

事前に作るページは、パラメータを受け取るページとして作ります。App Routerではフォルダ名に角括弧でパラメータ名を書きます。

// app/products/[id]/page.tsx
import React from "react";

type Props = {
  params: { id: string };
};

export default function ProductPage({ params }: Props) {
  return (
    <div>
      <h1>商品ID: {params.id}</h1>
      <p>このページはSSGで事前に作られています。</p>
    </div>
  );
}

4. generateStaticParamsでデータを動的に作る

4. generateStaticParamsでデータを動的に作る

固定の配列だけでなく、APIから取得したデータで事前にページを作ることも可能です。これにより、商品一覧などを自動でSSG化できます。

export async function generateStaticParams() {
  const res = await fetch("https://example.com/api/products");
  const products = await res.json();

  return products.map((product: any) => ({
    id: product.id.toString(),
  }));
}

5. ページにアクセスしたときの挙動

5. ページにアクセスしたときの挙動

SSGで作ったページは、アクセスするとすぐに表示されます。サーバー側で生成する時間がないので、ユーザーは高速でページを見ることができます。

// 実際の動きのイメージ
// /products/1 にアクセスすると
// HTMLがすでにあるので即座に表示

6. 動的ルーティングとSSGの組み合わせ

6. 動的ルーティングとSSGの組み合わせ

App Routerでは、[id]のような動的ルーティングとSSGを組み合わせることで、事前に作るページを柔軟に指定できます。例えば、ブログ記事や商品ページなどに便利です。

// app/blog/[slug]/page.tsx
type Props = { params: { slug: string } };

export default function BlogPage({ params }: Props) {
  return (
    <div>
      <h1>記事タイトル: {params.slug}</h1>
      <p>ここは事前に生成されたブログ記事ページです。</p>
    </div>
  );
}

7. まとめとしてのポイント

7. まとめとしてのポイント

Next.jsのApp RouterでSSGを使うには、generateStaticParamsで事前に作るページを指定することが基本です。固定の配列でもAPIから取得したデータでも対応可能で、動的ルーティングと組み合わせることで便利なウェブサイトを高速に作れます。

初心者でも、まずは固定の配列でページを事前に作るところから始めると理解しやすいです。

まとめ

まとめ

本記事では、Next.jsのApp Routerを活用したStatic Site Generation（SSG）の基本から応用までを詳しく解説しました。SSGとは、ウェブページを事前にHTMLとして生成し、アクセス時に即座に表示できる仕組みで、ページ表示速度の向上やサーバー負荷の軽減に非常に有効です。特に、動的ルーティングと組み合わせることで、商品ページやブログ記事など、個別に生成する必要があるページでも高速で提供できるメリットがあります。

App RouterでSSGを実現するためには、generateStaticParamsを活用して「どのページを事前に作成するか」をNext.jsに指示することが重要です。固定のIDや配列を使った基本的な方法から、APIや外部データを取得して動的に生成する方法まで、幅広く対応できます。これにより、商品の在庫情報や最新の記事情報などをリアルタイムに反映しながらも、事前生成による高速表示が可能になります。

また、パラメータを受け取るページの作り方として、フォルダ名に角括弧を使った動的ルーティングを活用しました。これにより、例えば/products/1のようなURLでも、事前に生成されたHTMLが即座に表示され、ユーザー体験を大幅に向上させることができます。APIからデータを取得する場合は、generateStaticParams内でfetch処理を行い、取得したデータに基づきページを動的に生成することで、膨大な商品一覧や記事リストにも対応可能です。

さらに、SSGの特徴として、一度生成したページはアクセス時にサーバーで再生成する必要がないため、アクセス集中時でも安定した表示速度を維持できます。特にECサイトやニュースサイトのように、多くのユーザーが同時にアクセスする場合に非常に有効です。Next.jsでは、App RouterとgenerateStaticParamsを組み合わせることで、初心者でも簡単にこれらの高速ページを作ることが可能です。

初心者向けのポイントとしては、まずは固定配列でSSGページを生成する方法を理解することです。その後、APIやデータベースから取得したデータを元に動的生成を行う流れを学ぶと、Next.jsのSSGの全体像をつかみやすくなります。加えて、動的ルーティングとの組み合わせにより、柔軟かつ効率的にページを生成できるため、規模の大きなサイトや頻繁に更新されるコンテンツにも対応可能です。

ここで実際に、固定配列を使った簡単なSSGページのサンプルコードを振り返ってみましょう。

export async function generateStaticParams() {
  return [
    { id: "1" },
    { id: "2" },
    { id: "3" },
  ];
}

// app/products/[id]/page.tsx
import React from "react";

type Props = { params: { id: string } };

export default function ProductPage({ params }: Props) {
  return (
    <div>
      <h1>商品ID: {params.id}</h1>
      <p>このページはSSGで事前に作られています。</p>
    </div>
  );
}