Pages Router: getStaticPropsの実装

Next.jsにおけるプリレンダリング

Next.jsには2種類のプリレンダリング方式があります: 静的生成 (Static Generation) と サーバーサイドレンダリング (Server-side Rendering)。これらの違いは、ページのHTMLをいつ生成するかにあります。

静的生成 (Static Generation) は、ビルド時にHTMLを生成するプリレンダリング方式です。生成されたHTMLは各リクエストで_再利用_されます。
サーバーサイドレンダリング (Server-side Rendering) は、各リクエストごとに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内でallPostsDataをpropsオブジェクト内で返すことで、ブログ投稿データがHomeコンポーネントにプロップとして渡されます。これで以下のようにしてブログ投稿データにアクセスできます:

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

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

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* 既存のコードはここに保持 */}
 
      {/* 既存の<section>タグの下にこの<section>タグを追加 */}
      <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>
  );
}

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

ブログデータ

おめでとうございます！外部データ（ファイルシステムから）を取得し、このデータを使ってインデックスページをプリレンダリングすることに成功しました。

インデックスページ

getStaticPropsの実装

Next.jsにおけるプリレンダリング

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

On this page

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