2024/2/8 Reactで簡易ブログ①: Markdownで記事を書く

このサイトでのブログページの構築方法についてのメモです。

ざっくり前提

• 環境はReact + Next.js + daisyUI
• 必要なファイルは全部public配下にぶち込む

1. react-markdownの導入

yarn add react-markdown

2. .mdファイルを作る

今回はpublic/blog/md/配下にmdファイルを書き溜めていきます。

<!-- リンク -->
[URL]()

<!-- 画像 -->
![画像](/path.png)

<!-- コードブロック -->
```
<!-- 中身 -->
```

URLだったり

コードブロックだったり

H2

H3 だったり

基本的なところは使えそうです。

3. ざっくり記事詳細ページを作る

あまりパフォーマンス意識した記述が出来ていないかもしれません。 一旦は妥協、将来的には外部から記事データ取得して動的にページ生成したいのでそこで改善かな?

// blog/[blogid]/page.tsx
import * as fs from 'fs';
import ReactMarkdown from "react-markdown";
import { BlogList, articleKey } from '../blogList';
export const generateStaticParams = async () => {
    const blogList = new BlogList();
    const articles = blogList.getArticles();

    return articles.map((article: articleKey) => ({
        blogid: article.blogId
    }));
};

export default function BlogPage({ params }: { params: { blogid: string} }) {

    const path = "public/blog_md/" + params.blogid + ".md"
    const data = params.blogid !== null
        ? fs.readFileSync(path, 'utf-8')
        : "Not found"
        // 今後notFound()独自に作る?
    return (
        <>
            <article className="prose flex-1">
                <ReactMarkdown>{data}</ReactMarkdown>
            </article>
        </>
    )
}

export const generateStaticParams = async () => {
    const blogList = new BlogList();
    const articles = blogList.getArticles();

    return articles.map((article: articleKey) => ({
        blogid: article.blogId
    }));
};

現時点ではBlogList内にベタ書きしたblogidを取得してgenerateStaticParamsでのページ生成用paramsを作ってます。

4. 見てみる

この記事執筆中のスクショです。

細かい調整せずとも

        <>
            <article className="prose flex-1">
                <ReactMarkdown>{data}</ReactMarkdown>
            </article>
        </>

これだけでいい感じになってくれるからありがたいですね。

現時点では少し寂しいページなのでもうちょっとコンテンツ充実できるよう頑張ります。