Next.js Pages RouterでのSSG（getStaticProps）完全解説！初心者でもわかる静的サイト生成の仕組み

1. SSGとは何か？

1. SSGとは何か？

SSGとは、Static Site Generationの略で、ページを事前に生成しておく仕組みです。ウェブサイトを訪れる前にHTMLファイルを作成しておくので、ページ表示が非常に速くなります。例えば、パン屋さんのメニューを紙に印刷しておくようなイメージです。ページ訪問者が来るたびに作るのではなく、あらかじめ準備されたHTMLを渡すので速度と安定性が向上します。

2. Pages RouterでSSGを使う準備

2. Pages RouterでSSGを使う準備

Next.jsでは、Pages Routerを使うときにSSGを設定するには、ページコンポーネントの隣にgetStaticPropsという関数を作ります。この関数はビルド時に一度だけ実行され、ページに必要なデータを取得してHTMLを生成します。

export async function getStaticProps() {
  return {
    props: {
      message: "これは静的に生成されたメッセージです"
    }
  };
}

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

export default HomePage;

3. getStaticPropsの基本的な使い方

3. getStaticPropsの基本的な使い方

getStaticPropsでは、APIやデータベースから情報を取得してページに渡すこともできます。返すオブジェクトは必ずpropsというキーを持たせます。

export async function getStaticProps() {
  const data = { title: "Next.jsでSSGを学ぶ", date: "2026-02-11" };

  return {
    props: {
      article: data
    }
  };
}

function ArticlePage({ article }) {
  return (
    <div>
      <h2>{article.title}</h2>
      <p>作成日: {article.date}</p>
    </div>
  );
}

export default ArticlePage;

4. 複数のページを静的生成する場合

4. 複数のページを静的生成する場合

ブログなど複数ページを事前に生成したい場合、getStaticPathsと組み合わせて使います。getStaticPathsで作成するページのパスを指定し、getStaticPropsで各ページのデータを取得します。

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

export async function getStaticProps({ params }) {
  return {
    props: {
      post: { id: params.id, title: `記事 ${params.id}` }
    }
  };
}

function PostPage({ post }) {
  return (
    <div>
      <h2>{post.title}</h2>
    </div>
  );
}

export default PostPage;

5. SSGのメリットと注意点

5. SSGのメリットと注意点

SSGのメリットはページ表示速度の高速化とサーバー負荷の軽減です。訪問者が増えてもHTMLはすでに用意されているので安定して配信できます。一方、データが頻繁に更新される場合は再ビルドが必要になる点が注意です。頻繁に変わるデータはISR（Incremental Static Regeneration）やSSR（Server Side Rendering）が向いています。

6. 画像やコンポーネントも静的生成できる

6. 画像やコンポーネントも静的生成できる

SSGはテキストだけでなく、Next.jsのImageコンポーネントやカスタムコンポーネントも静的に生成できます。例えば、トップページにおすすめ商品を表示するコンポーネントもビルド時にHTMLとして生成可能です。

import Image from "next/image";

export async function getStaticProps() {
  return {
    props: {
      product: { name: "コーヒー豆", imageUrl: "/coffee.jpg" }
    }
  };
}

function ProductPage({ product }) {
  return (
    <div>
      <h2>{product.name}</h2>
      <Image src={product.imageUrl} alt={product.name} width={300} height={300} />
    </div>
  );
}

export default ProductPage;

7. まとめのポイント

7. まとめのポイント

Next.jsのPages RouterでSSGを利用するには、ページコンポーネントにgetStaticPropsを書くことが基本です。必要に応じてgetStaticPathsと組み合わせると、複数ページの静的生成も可能です。SSGを使うことで、ウェブサイトの表示速度を高速化し、サーバーへの負荷も軽減できます。初心者の方でも、まずは簡単なテキスト表示から始めると理解しやすいでしょう。

まとめ

まとめ

今回の記事では、Next.jsのPages Routerを利用したSSG（Static Site Generation）の仕組みと活用方法について詳しく解説しました。SSGはウェブページを事前に生成する方法で、訪問者がページを開いた際に即座に表示されるため、ユーザー体験の向上やサーバー負荷の軽減に非常に役立ちます。基本的な実装手順としては、ページコンポーネントの隣にgetStaticProps関数を作成し、ビルド時に必要なデータを取得してHTMLを生成する流れです。これにより、APIやデータベースから取得した情報も静的にページに組み込むことができます。また、複数ページの生成が必要な場合にはgetStaticPathsと組み合わせることで、動的なルーティングにも対応可能です。

SSGのメリットとしては、まずページ表示の高速化があります。事前にHTMLが生成されているため、ユーザーがアクセスした瞬間にページが表示され、離脱率の低下やSEOの改善にもつながります。また、サーバー負荷の軽減も大きな利点です。アクセスが集中してもサーバー側で動的にページを生成する必要がないため、安定してページを配信できます。ただし、データが頻繁に更新される場合には再ビルドが必要となるため、その点は注意が必要です。こうした場合には、ISR（Incremental Static Regeneration）やSSR（Server Side Rendering）を併用することが効果的です。

さらに、SSGはテキストだけでなく、Next.jsのImageコンポーネントやカスタムコンポーネントにも対応しています。ビルド時に静的HTMLとして生成されるため、画像や商品の一覧、複雑なUIコンポーネントも高速に表示できます。実際にReactのコードを活用することで、ユーザーインタラクションも静的生成されたページ上で問題なく動作させることが可能です。

import React, { useState } from "react";

export async function getStaticProps() {
  return {
    props: {
      greeting: "ようこそNext.jsの世界へ"
    }
  };
}

function WelcomePage({ greeting }) {
  const [message, setMessage] = useState(greeting);

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンを押してメッセージが変わりました")}>
        メッセージ変更
      </button>
    </div>
  );
}

export default WelcomePage;

このように、SSGは初心者でも取り組みやすく、静的ページ生成の理解を深める上でも最適な手法です。まずは簡単なテキスト表示や画像表示から始め、慣れてきたらAPIや複数ページ生成にも挑戦してみると、Next.jsの強力な機能を効率的に活用できます。