Notion × Next.js でブログを作る方法【完全ガイド】

Web開発において、「どのCMSを使うか？」は大きな悩みの1つです。

この記事では、Notion を CMSとして活用し、Next.js で静的サイト化する方法を解説します。

---

✅ なぜ Notion + Next.js なのか？

• ノーコードで編集できる
• コストゼロで始められる
• Vercelで高速ホスティング可能
• Reactのパワーが使える

---

🛠 構成技術

• Notion API

  記事データの取得

• Next.js

  静的サイト生成 / ルーティング

• ReactMarkdown

  Markdown の HTML 表示

• Tailwind CSS

  スタイリング

• Prism

  コードブロックのシンタックスハイライト

---

🔧 セットアップ手順（ざっくり）

1. Notion で記事管理用のデータベースを作成
2. Integration Token と Database ID を取得
3. .env.local に設定を追加
4. notion-to-md を使って Markdown に変換
5. ReactMarkdown で画面に出力

---

コードブロックもOK

// シンタックスハイライト付き

export async function getStaticProps() {
  const post = await getSinglePost("my-post");
  return {
    props: {
      post,
    },
  };
}

←ホームに戻る