Reactで簡易ブログ①: 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>
           </>
   

   
   

5. おわりに
   自前でブログ記事ページを書いてみましたが、結局Qiitaに前記事移管予定です……