Pages Router: getStaticPropsの実装

与えられたidで投稿を表示するために必要なデータを取得する必要があります。

これを行うには、lib/posts.jsを再度開き、以下のgetPostData関数をファイルの最後に追加します。この関数はidに基づいて投稿データを返します:

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // gray-matterを使用して投稿のメタデータセクションを解析
  const matterResult = matter(fileContents);
 
  // 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>
  );
}

これで完了です！以下のページにアクセスしてみてください:

各ページのブログデータが表示されるはずです:

ブログデータ

素晴らしい！動的ルートの生成に成功しました。

問題が発生しましたか？

エラーが発生した場合は、ファイルに正しいコードが含まれているか確認してください:

それでも解決しない場合は、GitHub Discussionsでコミュニティに質問してください。GitHubにコードをプッシュしてリンクを共有すると、他の人が確認しやすくなります。

まとめ

ここまでに行ったことを再度グラフィカルにまとめます:

動的ルートを使用した静的生成ページの作成方法

まだブログのマークダウンコンテンツを表示していません。次にこれを実装しましょう。

getStaticPropsの実装

問題が発生しましたか？

まとめ

On this page