Notion SSG BLOG

「Notion × Next.js でSSGブログを作った話」

NotionをCMSにして、Next.jsのSSGでブログを公開した構成と理由をまとめました。

2025-08-25

Next.jsNotionSSG
「Notion × Next.js でSSGブログを作った話」

Notion × Next.js でSSGブログを作った話

このブログは NotionをCMS にして、Next.js でSSG（静的サイト生成） したものです。

構成の狙いは 高速・安全・安価。そして、Notionで下書き〜公開まで完結できること。

Notion Image

技術スタック（ざっくり）

  • Next.js 15（App Router）
  • Tailwind CSS v4
  • shadcn/ui
  • @notionhq/client + notion-to-md
  • Cloudflare Pages（ホスティング）

    • なぜSSG？

  • まるごと静的HTMLにすることで 配信が速く、負荷に強い
  • 脆弱性の心配が少ない（動的言語ランタイムが不要）
  • CDNキャッシュが効きやすい

    • Notion運用のコツ

  • データベースに Title / Slug / Published / PublishedAt / Tags / Description を用意
  • 公開は Published を ON にするだけ
  • Slug はURLに使うので英数字・ハイフン推奨（例: hello-world）

    • 今後は タグ別一覧・検索・OGP自動生成 を入れていきます。実装メモも公開予定。

    追加