ReactとNext.jsを使ってMarkdownブログを簡単に構築する方法

   npx create-next-app@latest markdown-blog
   cd markdown-blog
   npm run dev

   npm install gray-matter remark remark-html

markdown-blog/
├── pages/
├── public/
├── styles/
├── node_modules/
├── package.json

   mkdir posts

   touch posts/first-post.md

   ---
   title: "初めての投稿"
   date: "2024-12-01"
   description: "ReactとNext.jsで作成したMarkdownブログの初投稿です。"
   ---
   # 初めての投稿
   このブログはReactとNext.jsを使って構築されました。Markdownを使って簡単に記事を書くことができます。

markdown-blog/
├── posts/
│   ├── first-post.md
│   ├── second-post.md

---
title: "記事タイトル"
date: "記事の日付"
description: "記事の概要"
---

   mkdir lib
   touch lib/posts.js

   import fs from 'fs';
   import path from 'path';
   import matter from 'gray-matter';

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

   export function getSortedPostsData() {
       // postsディレクトリ内のファイル名を取得
       const fileNames = fs.readdirSync(postsDirectory);
       const allPostsData = fileNames.map((fileName) => {
           // 拡張子を除いたファイル名を取得
           const id = fileName.replace(/\.md$/, '');

           // ファイルのフルパスを取得
           const fullPath = path.join(postsDirectory, fileName);
           const fileContents = fs.readFileSync(fullPath, 'utf8');

           // gray-matterを使ってファイルのメタデータを解析
           const matterResult = matter(fileContents);

           // データをオブジェクトとして返す
           return {
               id,
               ...matterResult.data,
           };
       });

       // 日付でソートして返す
       return allPostsData.sort((a, b) => {
           return new Date(b.date) - new Date(a.date);
       });
   }

   import { getSortedPostsData } from '../lib/posts';

   export async function getStaticProps() {
       const allPostsData = getSortedPostsData();
       return {
           props: {
               allPostsData,
           },
       };
   }

   export default function Home({ allPostsData }) {
       return (
           <div>
               <h1>Markdownブログ</h1>
               <ul>
                   {allPostsData.map(({ id, title, date }) => (
                       <li key={id}>
                           <a href={`/posts/${id}`}>
                               <h2>{title}</h2>
                               <p>{date}</p>
                           </a>
                       </li>
                   ))}
               </ul>
           </div>
       );
   }

npm run dev

---
title: "初めての投稿"
date: "2024-12-01"
description: "ReactとNext.jsで作成したMarkdownブログの初投稿です。"
---
# 初めての投稿
このブログはReactとNext.jsを使って構築されました。

---
title: "新しい記事"
date: "2024-12-01"
tags: ["React", "Next.js"]
---

export function getSortedPostsData() {
    const fileNames = fs.readdirSync(postsDirectory);
    const allPostsData = fileNames.map((fileName) => {
        const id = fileName.replace(/\.md$/, '');
        const fullPath = path.join(postsDirectory, fileName);
        const fileContents = fs.readFileSync(fullPath, 'utf8');
        const matterResult = matter(fileContents);
        return {
            id,
            ...matterResult.data,
        };
    });
    return allPostsData.sort((a, b) => new Date(b.date) - new Date(a.date));
}

export function getPostData(id) {
    const fullPath = path.join(postsDirectory, `${id}.md`);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
    const matterResult = matter(fileContents);
    return {
        id,
        content: matterResult.content,
        ...matterResult.data,
    };
}

export default function Home({ allPostsData }) {
    return (
        <div>
            <h1>Markdownブログ</h1>
            <ul>
                {allPostsData.map(({ id, title, date, description }) => (
                    <li key={id}>
                        <a href={`/posts/${id}`}>
                            <h2>{title}</h2>
                            <p>{description}</p>
                            <small>{date}</small>
                        </a>
                    </li>
                ))}
            </ul>
        </div>
    );
}

import { getPostData } from '../../lib/posts';

export async function getStaticProps({ params }) {
    const postData = getPostData(params.id);
    return {
        props: {
            postData,
        },
    };
}

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

   mkdir pages/posts
   touch pages/posts/[id].js

   import { getAllPostIds, getPostData } from '../../lib/posts';

   export async function getStaticPaths() {
       const paths = getAllPostIds();
       return {
           paths,
           fallback: false,
       };
   }

   export async function getStaticProps({ params }) {
       const postData = getPostData(params.id);
       return {
           props: {
               postData,
           },
       };
   }

   export default function Post({ postData }) {
       return (
           <article>
               <h1>{postData.title}</h1>
               <p>{postData.date}</p>
               <div dangerouslySetInnerHTML={{ __html: postData.content }} />
           </article>
       );
   }

export function getAllPostIds() {
    const fileNames = fs.readdirSync(postsDirectory);
    return fileNames.map((fileName) => {
        return {
            params: {
                id: fileName.replace(/\.md$/, ''),
            },
        };
    });
}

   touch styles/global.css

   body {
       font-family: Arial, sans-serif;
       line-height: 1.6;
       margin: 0;
       padding: 0;
       background-color: #f4f4f9;
       color: #333;
   }

   a {
       text-decoration: none;
       color: #0070f3;
   }

   a:hover {
       text-decoration: underline;
   }

   h1, h2, h3 {
       margin: 1rem 0;
   }

   ul {
       list-style: none;
       padding: 0;
   }

   li {
       margin: 1rem 0;
   }

   import '../styles/global.css';

   export default function App({ Component, pageProps }) {
       return <Component {...pageProps} />;
   }

   npm install tailwindcss postcss autoprefixer
   npx tailwindcss init

   module.exports = {
       content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
       theme: {
           extend: {},
       },
       plugins: [],
   };

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

export default function Home({ allPostsData }) {
    return (
        <div className="max-w-3xl mx-auto p-4">
            <h1 className="text-4xl font-bold mb-6">Markdownブログ</h1>
            <ul>
                {allPostsData.map(({ id, title, date, description }) => (
                    <li key={id} className="mb-4">
                        <a href={`/posts/${id}`} className="block p-4 bg-white rounded shadow hover:shadow-md">
                            <h2 className="text-2xl font-semibold">{title}</h2>
                            <p className="text-gray-600">{description}</p>
                            <small className="text-gray-500">{date}</small>
                        </a>
                    </li>
                ))}
            </ul>
        </div>
    );
}

<h2 className="text-lg sm:text-xl md:text-2xl lg:text-3xl">タイトル</h2>

npm run build

   git init
   git add .
   git commit -m "Initial commit"

   git remote add origin <リポジトリURL>
   git branch -M main
   git push -u origin main