Next.js Next.js SSG（Static Site Generation）とは

Next.js の SSG（Static Site Generation）とは、ウェブページをビルド時に静的ファイルとして生成する方法です。これにより、ページの表示が高速化され、SEO にも対応しています。生成された静的ファイルは、CDN（Content Delivery Network）で配信されることが一般的です。SSG は、ブログやドキュメントサイトなどのコンテンツが頻繁に更新されないウェブサイトに適しています。

1. 高速な表示: 静的ファイルが CDN で配信されるため、ページの読み込みが速くなります。
2. SEO 対応: 静的ファイルはウェブクローラーによって簡単にインデックスされるため、SEO のパフォーマンスが向上します。
3. 低コスト: 静的ファイルはサーバーリソースをほとんど消費しないため、ホスティングコストが抑えられます。

Next.js で SSG を利用するためには、getStaticProps関数をページコンポーネントにエクスポートします。getStaticPropsはサーバーサイドで実行され、ビルド時に静的データを取得してページに渡します。この例では、fetchData関数でデータを取得し、getStaticProps関数でそのデータを MyPage コンポーネントに渡しています。ビルド時にページが静的ファイルとして生成され、そのデータが埋め込まれます。

import { fetchData } from '../lib/data';

export default function MyPage({ data }) {
  return (
    <div>
      <h1>My Page</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const data = await fetchData(); // ビルド時にデータを取得する

  return {
    props: {
      data, // ページコンポーネントにデータを渡す
    },
  };
}