getStaticProps を実装する

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

Next.js には、静的生成（Static Generation） と サーバーサイドレンダリング（Server-side Rendering） の2つの形式のプリレンダリングがあります。この違いは、ページの 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 の props オブジェクト内に allPostsData を返すことで、ブログ投稿は Home コンポーネントに props として渡されます。これで、ブログ投稿に次のようにアクセスできます。

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 を使用するためのヒントについて説明します。