getStaticPropsの実装

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

Next.jsには、**静的生成**と**サーバーサイドレンダリング**の2つの形式の事前レンダリングがあります。違いは、ページのHTMLを**いつ**生成するかにあります。

• **静的生成**は、**ビルド時**に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 }) { ... }

ブログ投稿を表示するために、自己紹介を含むセクションの下にデータを含む別の<section>タグを追加するようにHomeコンポーネントを更新しましょう。また、propsを()から({ 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を使用するためのヒントについて説明します。