Reactで簡易ブログ①: react-markdownで記事を書く #Next.js

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

ざっくり前提

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

react-markdownの導入
```
yarn add react-markdown
```
.mdファイルを作る

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

[URL]()


![画像](/path.png)


```

```
```
URLだったり
```
コードブロックだったり
```
H2

H3 だったり

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

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

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

// 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を作ってます。

見てみる

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

細かい調整せずともそこそこいい感じになってくれるからありがたいですね。
```
        <>
            <article className="prose flex-1">
                <ReactMarkdown>{data}</ReactMarkdown>
            </article>
        </>
```
おわりに
自前でブログ記事ページを書いてみましたが、結局Qiitaに前記事移管予定です……

Reactで簡易ブログ①: react-markdownで記事を書く

H2

H3 だったり