Next.jsでmarkdownで記事を書けるようする ①

はじめに

現在、個人ブログサイトを開発中です。
markdownで記事を投稿できるようにしようと思っています。
実装途中ですが経過を共有します。

前提

next.jsの開発環境は構築済でmarkdownを適用するところを実装します。

ステップ 1: ライブラリをインストール

まず、MarkdownをHTMLに変換するため、gray-matterとremark（およびremark-html）をインストールします。

ライブラリ名	使用目的
gray-matter	Markdownファイル内のフロントマター*を解析します。
remark	Markdownの構文解析を行い、データ変換を行います。
remark-html	remarkで解析されたデータをHTMLに変換します。

フロントマターとは、Markdownファイルの先頭に記述するメタデータのことです。

フロントマターのイメージ

---
title: "My First Post"
date: "2024-09-07"
---

では以下のコマンドでインストールします

npm install gray-matter remark remark-html

ステップ 2: Markdownファイルの作成

postsディレクトリを作成し、その中にMarkdownファイルを作成します。例として、first-post.mdというファイルを作成します。

posts/first-post.md

---
title: "My First Post"
date: "2024-09-07"
---

This is my **first blog post** written in Markdown!

ステップ 3: getStaticProps と getStaticPaths で Markdown を取得

pages/posts/[slug].js というページを作成し、動的にMarkdownファイルを取得してHTMLに変換します。

pages/posts/[slug].js

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { remark } from 'remark';
import html from 'remark-html';

const postsDirectory = path.join(process.cwd(), 'posts');

export async function getStaticPaths() {
  const filenames = fs.readdirSync(postsDirectory);

  const paths = filenames.map((filename) => ({
    params: {
      slug: filename.replace(/\.md$/, ''),
    },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const fullPath = path.join(postsDirectory, `${params.slug}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  const { data, content } = matter(fileContents);

  const processedContent = await remark().use(html).process(content);
  const contentHtml = processedContent.toString();

  return {
    props: {
      post: {
        ...data,
        contentHtml,
      },
    },
  };
}

export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
    </article>
  );
}

ステップ 4: ブラウザで確認

これで、posts/first-post.mdの内容が/posts/first-postというURLで表示されます。
ブラウザでhttp://localhost:3000/posts/first-postにアクセスすると、
以下のように表示され、markdownがHTML変換されていることを確認できます。

まだまだ課題あり

Qiitaのようにもっとリッチなmarkdownになるように調整して続きを投稿していきます。