こんにちは、たわです。今回はZEITがNext.jsベースでNotionのデータをもとに静的ページを生成するテンプレートを発表したのでそのことについてです。
Excited to share our long-awaited Next.js + Notion statically-generated blog example with the same tech as https://t.co/HVcLCVUO5w!
— JJ Kasper (@_ijjk) 2020年1月13日
- Edit via Notion
- Blazing fast
- JAMstack based
- Always available
- Fully customizable
- Incremental SSG
- MIT Licensedhttps://t.co/fD2vWxq2Y6
ZEITとは
ZEITは、
We enable developers to build and publish wonderful things
をミッションにしているチームです。
ZEIT Nowを運営
ZEIT Nowというホスティングサービスをやっています。簡単にデプロイできたりラムダが実行できるあたりが、
- Firebase Hosting
- Netlify
あたりとも似ています。
Next.jsを開発
あとはNext.jsを開発しているところとしても有名でしょう。ReactをベースとしてSSRまでできるフロントエンドフレームワークです。
Notionとは
あとここで登場するNotionというのは、色んな情報管理がまとめてできる便利なツールです。僕も愛用しています。
別記事で紹介しているので知らない方はぜひ。
ZEIT製のテンプレートが発表された
そんなZEITが、Notionのデータを使って、
- Next.jsベースで静的ページを生成して
- ZEIT NOWにデプロイできる
テンプレートを公開したのです。
以下ページからセットアップができます。
具体的なやり方はここでは紹介しませんが、仕組みやポイントを書きます。
試しに作ったサイトはこちら
https://books.tawachan.com/books/61b8c8a7389466c369c9f8a2c1d041934fffd9c16abd8b9e2eaa8d0f15494ad7books.tawachan.com
Notionがバックエンドになる
中にはZEITがヘッドレスCMSを発表したと表現されることがありますが、ヘッドレスCMSの役割を果たすのはあくまでNotionです。
Notionに保存されたデータを上手く活用して、ブログなどのページに仕立ててしまうのが今回発表されたテンプレートです。
イメージとしては以下図ような感じです。
①Notionで編集
テンプレートにあったページをNotion上に作成すればそこが編集画面になります。
テンプレート通りのページを生成するスクリプトも用意されているので簡単です。
②サーバーに保存
Notionは編集とほぼ同時に勝手に保存しているので意識することはありません。データは既にNotionのサーバーに保存されています。
③開発 & プッシュ
今度はNext.jsの開発です。デフォルトでかなり基礎は整っているのであとは見た目を整えるだけいい感じにできるのではないでしょうか。
開発が終わればGitHub上にプッシュしていきます。
④ビルド & デプロイ
デフォルトではGitHubへのプッシュをトリガーにして自動でビルドとデプロイが走ります。
セットアップ時にZEIT Nowのシークレットにアクセストークン等を設定すると思うので、それを使ってNotionサーバーから必要な情報もその時取得しています。
しばらく待てばもう公開された状態になります。
他のヘッドレスCMSを活用する場合と比べた利点
ヘッドレスCMSは最近流行りで、脱Wordpressを目論んで活用を試す人も多いのではないでしょうか。
断然セットアップが楽
ヘッドレスCMSは、
- Strapi
- Contentful
- Netrify CMS
などなど色々あると思いますがそれらはセットアップがかなり大変だと思います。
ヘッドレスCMS側もセットアップが必要ですし、それを活用するフロントエンドを作るのも案外手間です。ヘッドレスCMS側で作ったデータ構造を適切にTypeScriptで処理できるようにしていくのも結構骨が折れるのでできればやりたくない...。
でもこのテンプレートはそこをすべて一気通貫で整えてくれるのがかなりポイント高いと思います。
拡張がかなり手軽
デフォルトでは、
- Page
- Slug(URL上の名前)
- Published
- Date
- Authors
が設定されていますが、列は名前変えても足しても消しても大丈夫です。
{ id: 'ff114aaa-7912-4240-9126-763c17b6151b', Hoge: 'customized', // 追加した Slug: 'hogehoge', Date: 1579273200654, Authors: [ 'edf6fb9b-6181-42fa-8c18-fc3d1dff982a' ], Published: 'Yes', Page: 'テスト', preview: [], content: [ { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] }, { role: 'editor', value: [Object] } ] }
TypeScript側にはいい感じにパースされてくるのであとはいい感じにデータ処理を書けばすぐに対応できます。
コンテンツの種類も全部対応可能
デフォルトでは、
- toggle
- callout
- bookmark
といったNotionのいくつかの記法が対応されていません。ですが、
switch (type) { case 'page': case 'divider': break case 'text': if (properties) { toRender.push(textBlock(properties.title, false, id)) } break case 'image': .... }
というようにcase文で見た目を定義されているだけなので追加・修正も容易です。
まとめ
デフォルトでかなり整っているにもかかわらず、それでも拡張性はかなり高いように感じました。
実際はただのNext.js(React)なので自由に見た目を変えられますし、ビルド後はただのHTMLなのでデプロイ先はデフォルトのZEIT Nowから変えることも容易でしょう。
ただNotion側は自由にフォーマットを変えられるが故に知らぬ間に壊してしまうということもありそうなのでそのあたりは注意が必要かもしれません。
WordPressを脱して自前のメディアやブログを運用するにはかなり始めやすい技術セットだと思います。
【実際のサイト例】
Notionに貯めた読んだ本リストを公開するサイトをこのテンプレートで作ってみました。参考になれば。