チャプター25

getStaticProps の実装

Next.js の事前レンダリング

Next.js には 2 種類の事前レンダリングがあります。静的生成 と サーバーサイドレンダリング です。違いは、ページが生成される **タイミング** です。

静的生成 は、**ビルド時** に HTML を生成する事前レンダリング方法です。生成された HTML は、リクエストごとに **再利用** されます。
サーバーサイドレンダリング は、**各リクエスト時** に HTML を生成する事前レンダリング方法です。

重要なのは、Next.js ではページごとに事前レンダリング方法を **選択** できることです。ほとんどのページで静的生成を使用し、他のページでサーバーサイドレンダリングを使用することで、「ハイブリッド」な Next.js アプリを作成できます。

静的生成の使用 (`getStaticProps()`)

次に、getSortedPostsData をインポートし、pages/index.js の getStaticProps 内で呼び出す必要があります。

エディタで pages/index.js を開き、エクスポートされた Home コンポーネントの上に次のコードを追加してください。

import { getSortedPostsData } from '../lib/posts';
 
export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

getStaticProps の props オブジェクト内で allPostsData を返すことで、ブログ投稿は Home コンポーネントに prop として渡されます。これで、ブログ投稿に次のようにアクセスできます。

export default function Home ({ allPostsData }) { ... }

ブログ投稿を表示するには、Home コンポーネントを更新し、自己紹介のセクションの下に、以下のデータを持つ別の <section> タグを追加しましょう。また、prop を () から ({ allPostsData }) に変更することも忘れないでください。

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Keep the existing code here */}
 
      {/* Add this <section> tag below the existing <section> tag */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

https://:3000 にアクセスすると、ブログデータが表示されるはずです。

おめでとうございます！ファイルシステムから外部データを正常に取得し、このデータでインデックスページを事前レンダリングしました。

getStaticProps の実装

Next.js の事前レンダリング

静的生成の使用 (getStaticProps())

チャプターを完了しました。25

静的生成の使用 (`getStaticProps()`)