Next.js SSG（Static Site Generation）の仕組みを初心者向けに解説！ビルド時にHTML生成する方法とは

1. Next.js SSGとは？ビルド時にHTMLを生成する仕組み

1. Next.js SSGとは？ビルド時にHTMLを生成する仕組み

Next.jsのSSGは、ウェブページを事前に作っておく仕組みです。通常のウェブサイトは、アクセスした人のブラウザに情報を表示するためにサーバーでページを作ることが多いですが、SSGでは開発時にHTMLを生成します。これにより、アクセス時の表示速度が非常に速くなり、検索エンジンでも評価されやすくなります。

2. getStaticPropsでデータを取得する

2. getStaticPropsでデータを取得する

SSGでは、ページを作るときに必要なデータをNext.jsのgetStaticPropsという関数で取得します。この関数はビルド時に呼ばれ、ページで使うデータを準備します。

export async function getStaticProps() {
  const data = { title: "Next.js SSGの例", content: "これはSSGで作られたページです。" };
  return { props: { data } };
}

function Page({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default Page;

3. SSGのメリットとデメリット

3. SSGのメリットとデメリット

SSGのメリットはページの表示速度が速く、SEOに強いことです。一方で、頻繁にデータが変わる場合は都度ビルドが必要なので、更新に時間がかかるのがデメリットです。

4. getStaticPathsで動的ページを作る

4. getStaticPathsで動的ページを作る

ブログの個別ページのように動的なURLを持つ場合、getStaticPathsを使ってどのページをビルドするか指定します。

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } }
    ],
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  return { props: { postId: params.id } };
}

function Post({ postId }) {
  return <h1>投稿ID: {postId}</h1>;
}

export default Post;

5. SSGとCSR、SSRの違い

5. SSGとCSR、SSRの違い

Next.jsには他にCSR（Client Side Rendering）やSSR（Server Side Rendering）があります。CSRはブラウザで処理し、SSRはアクセス時にサーバーで作ります。SSGはビルド時に作るので、一番表示が速く安定しています。

6. SSGの実際の使いどころ

6. SSGの実際の使いどころ

SSGはブログ、商品紹介、会社情報ページなど更新が少ないページに向いています。また、表示速度が重要なランディングページやキャンペーンページにも最適です。

7. 簡単なSSGページの作成例

7. 簡単なSSGページの作成例

export async function getStaticProps() {
  return { props: { message: "Hello SSG!" } };
}

function HelloPage({ message }) {
  return <h1>{message}</h1>;
}

export default HelloPage;

8. SSGで画像やリストを表示する例

8. SSGで画像やリストを表示する例

export async function getStaticProps() {
  const items = ["リンゴ", "バナナ", "オレンジ"];
  return { props: { items } };
}

function FruitList({ items }) {
  return (
    <ul>
      {items.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
  );
}

export default FruitList;

9. SSGとISR（Incremental Static Regeneration）の組み合わせ

9. SSGとISR（Incremental Static Regeneration）の組み合わせ

SSGで作ったページも、revalidateを使えば、一定時間ごとに更新できます。これをISRと呼び、頻繁に変わるデータにも対応できます。

export async function getStaticProps() {
  return {
    props: { time: new Date().toLocaleTimeString() },
    revalidate: 10
  };
}

function TimePage({ time }) {
  return <p>生成時刻: {time}</p>;
}

export default TimePage;

まとめ

まとめ

今回はNext.jsのSSG（Static Site Generation）について、初心者向けに詳しく解説しました。SSGはビルド時にHTMLを生成する仕組みであり、アクセスした瞬間に高速でページを表示できるのが最大の特徴です。ブログや会社情報、商品紹介ページなど、頻繁に内容が更新されないウェブサイトに特に向いています。また、検索エンジンに評価されやすい構造を作ることができるため、SEOの観点でも有効です。SSGを活用する際は、Next.jsのgetStaticPropsでページに必要なデータを事前に取得し、動的ページの場合はgetStaticPathsでビルド対象を指定することがポイントです。

さらに、SSGはCSR（Client Side Rendering）やSSR（Server Side Rendering）とは異なり、サーバー負荷を減らしつつ、ユーザーに安定した表示速度を提供できます。必要に応じてISR（Incremental Static Regeneration）を組み合わせることで、頻繁に更新されるデータにも対応可能です。画像やリストなどのコンテンツもビルド時に準備しておくことで、ページ表示をさらに高速化できます。Next.jsを使うことで、Reactのコンポーネント構造を活かしながら、簡単にSSGページを作成できる点も魅力です。

具体例として、getStaticPropsでデータを取得し、ページコンポーネントで表示する方法を紹介しました。簡単なテキストやリストの表示から、動的なURLの生成まで、段階的に理解することでSSGの仕組みが自然に身につきます。さらに、ISRを使えば生成済みのページを定期的に更新できるため、静的サイトの利点を維持しつつ最新情報を提供することが可能です。これにより、ユーザー体験の向上とSEO対策の両立が実現できます。

export async function getStaticProps() {
  const data = { title: "SSGまとめ例", items: ["Next.js", "SSG", "ISR"] };
  return { props: { data } };
}

function SummaryPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <ul>
        {data.items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

export default SummaryPage;