目次:

Notion Blogとは?

https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

今回はNotionをヘッドレスCMSとして利用し、フロントエンド側でNotionの非公式APIと繋ぎ込んで情報取得してブログ化しますよーってのがNotionBlogです。 今回紹介するNotionBlogは上記概要を実現したOSSライブラリ

今回はコンテンツを作る&管理も優秀で最高な体験が出来るNotionをヘッドレスCMSにしちまえばいいじゃん!複数ブログ作ったとしても、一箇所のNotionで完結出来る未来、めちゃ楽じゃんっていう発想を叶えるのがNotionBlogだったというわけです。

15分で一緒に作ろう!NotionをヘッドレスCMSにして爆速ブログを作る方法 - Qiita

引用内のNotionBlogと、今回記事タイトルの"notion-blog-nextjs"は指しているものは異なりますが、公式APIを活用する形で構築されているのか/いないのかの違いだけで、概念は同様のものとなります。

Notion-blog-nextjs はNotionが提供する公式APIを活用するOSSライブラリとなります。

https://github.com/samuelkraft/notion-blog-nextjs

下ツイートにもあるように、Notion + Next.js + TailwindCSS 版ライブラリのnotion-nextjs-blogもあります。

https://github.com/luciovilla/notion-nextjs-blog

https://twitter.com/shogocat/status/1409145394756390913?s=21

Notionは他のヘッドレスCMS活用と比べて導入ハードルが低い

ヘッドレスCMSは、 ・Strapi ・Contentful ・Netrify CMS などなど色々あると思いますがそれらはセットアップがかなり大変だと思います。 ヘッドレスCMS側もセットアップが必要ですし、それを活用するフロントエンドを作るのも案外手間です。ヘッドレスCMS側で作ったデータ構造を適切にTypeScriptで処理できるようにしていくのも結構骨が折れるのでできればやりたくない...。 でもこのテンプレートはそこをすべて一気通貫で整えてくれるのがかなりポイント高いと思います。

NotionがヘッドレスCMSになる!ZEIT製のNext.jsベースのテンプレートはお手軽にブログ・メディアを始められるツールになりそう - 飽き性の頭の中

導入ハードルが低いとはいえ、「他のヘッドレスCMSと比べると」というだけで一定の工数はかかります。

「とりあえず何も考えずにNotionをブログ化したい」という方はNotionをサイト化・ブログ化するSaaSである Super あるいは Wraptas を利用するのが手っ取り早いでしょう。

参考: NotionをWebサイトとして公開する方法 : SuperとWraptas(Anotion)

非エンジニア向けのNotion-blog-nextjsの具体的な導入手順

Notion公式アンバサダーのYuji Tsuburaya(@____35d)さんが動画でわかりやすく解説してくださっています。

https://youtu.be/-vYnYG3K19A

テキストでの解説は下記。