Pages Router: Markdownのレンダリング

Markdownコンテンツをレンダリングするために、remarkライブラリを使用します。まず、インストールしましょう:

npm install remark remark-html

次に、lib/posts.jsを開き、ファイルの先頭に以下のインポートを追加します:

import { remark } from 'remark';
import html from 'remark-html';

そして、同じファイル内のgetPostData()関数を以下のように更新してremarkを使用します:

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // gray-matterを使用して投稿のメタデータセクションを解析
  const matterResult = matter(fileContents);
 
  // remarkを使用してMarkdownをHTML文字列に変換
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();
 
  // idとcontentHtmlをデータと結合
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

重要: remarkにawaitを使用する必要があるため、getPostDataに**async**キーワードを追加しました。async/awaitを使用すると、非同期でデータを取得できます。

つまり、pages/posts/[id].js内のgetStaticPropsを更新して、getPostDataを呼び出す際にawaitを使用する必要があります:

export async function getStaticProps({ params }) {
  // このように"await"キーワードを追加:
  const postData = await getPostData(params.id);
 
  return {
    props: {
      postData,
    },
  };
}

最後に、pages/posts/[id].js内のPostコンポーネントを更新して、dangerouslySetInnerHTMLを使用してcontentHtmlをレンダリングします:

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  );
}

以下のページに再度アクセスしてみてください:

これでブログコンテンツが表示されるはずです:

ほぼ完了です！次に各ページを仕上げていきましょう。