チャプター32

getStaticPropsを実装する

指定されたidで投稿をレンダリングするために、必要なデータを取得する必要があります。

そのために、再度lib/posts.jsを開き、最後尾に以下のgetPostData関数を追加します。これはidに基づいて投稿データを返します。

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);
 
  // Combine the data with the id
  return {
    id,
    ...matterResult.data,
  };
}

次に、pages/posts/[id].jsを開き、この行を置き換えます。

import { getAllPostIds } from '../../lib/posts';

次のコードで。

import { getAllPostIds, getPostData } from '../../lib/posts';
 
export async function getStaticProps({ params }) {
  const postData = getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

投稿ページは現在、getStaticPropsでgetPostData関数を使用して投稿データを取得し、それをpropsとして返しています。

それでは、Postコンポーネントを更新してpostDataを使用しましょう。pages/posts/[id].jsで、エクスポートされているPostコンポーネントを次のコードに置き換えます。

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
    </Layout>
  );
}