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

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

2020-01-19に公開

こんにちは、たわです。今回は ZEIT が Next.js ベースで Notion のデータをもとに静的ページを生成するテンプレートを発表したのでそのことについてです。

ZEIT とは

ZEIT は、

We enable developers to build and publish wonderful things

をミッションにしているチームです。

https://zeit.co/about
https://zeit.co/about

ZEIT Now を運営

ZEIT Now というホスティングサービスをやっています。簡単にデプロイできたりラムダが実行できるあたりが、

  • Firebase Hosting
  • Netlify

あたりとも似ています。

Next.js を開発

あとは Next.js を開発しているところとしても有名でしょう。React をベースとして SSR までできるフロントエンドフレームワークです。

Notion とは

あとここで登場する Notion というのは、色んな情報管理がまとめてできる便利なツールです。僕も愛用しています。

別記事で紹介しているので知らない方はぜひ。

20200119162204.jpg

ZEIT 製のテンプレートが発表された

そんな ZEIT が、Notion のデータを使って、

  • Next.js ベースで静的ページを生成して
  • ZEIT NOW にデプロイできる

テンプレートを公開したのです。

以下ページからセットアップができます。

具体的なやり方はここでは紹介しませんが、仕組みやポイントを書きます。

Notion がバックエンドになる

中には ZEIT がヘッドレス CMS を発表したと表現されることがありますが、ヘッドレス CMS の役割を果たすのはあくまで Notion です。

Notion に保存されたデータを上手く活用して、ブログなどのページに仕立ててしまうのが今回発表されたテンプレートです。

イメージとしては以下図ような感じです。

20200119172918.jpg

(1)Notion で編集

テンプレートにあったページを Notion 上に作成すればそこが編集画面になります。

テンプレートとおりのページを生成するスクリプトも用意されているので簡単です。

(2) サーバーに保存

Notion は編集とほぼ同時に勝手に保存しているので意識することはありません。データはすでに Notion のサーバーに保存されています。

(3) 開発 & プッシュ

今度は Next.js の開発です。デフォルトでかなり基礎は整っているのであとは見た目を整えるだけいい感じにできるのではないでしょうか。

開発が終われば GitHub 上にプッシュしていきます。

(4) ビルド & デプロイ

デフォルトでは 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 を脱して自前のメディアやブログを運用するにはかなり始めやすい技術セットだと思います。

関連記事

タグ

#福岡:39

#東京:20

#大学院:15

#移住:10

#Firebase:9

#Google:9

#Sony:9

#エナジードリンク:9

#ブロックチェーン:9

#Apple:7

#Mac:7

#Next.js:7

#Webエンジニア:7

#a7iii:7

#インドネシア:6

#サントリー:6

#英語:6

#Googleフォト:5

#React:5

#TypeScript:5

#埼玉:5

#AWS:4

#Anker:4

#Canon:4

#EOS 8000D:4

#Gatsby.js:4

#Kindle:4

#ZONe:4

#iPad mini:4

#コワーキングスペース:4

#セブンイレブン:4

#ラーメン:4

#京都:4

#仮想通貨:4

#修士論文:4

#内省:4

#民主主義:4

#社会人:4

#鴨川シーワールド:4

#Docker:3

#EOS8000D:3

#Firebase Hosting:3

#GitHub Actions:3

#Google Drive:3

#Lightroom:3

#Markdown:3

#Pixel:3

#React Native:3

#Soundcore:3

#d.school:3

#iPad:3

#iPhone:3

#アマルティア・セン:3

#アメリカ:3

#ジャカルタ:3

#スピーカー:3

#デザイン思考:3

#ブログ:3

#レッドブル:3

#ワークショップ:3

#卒業旅行:3

#寿司:3

#旅行:3

#研究:3

#紅葉:3

#長崎:3

#65mm F2 DG DN Contemporary:2

#API:2

#ChatGPT:2

#Creative:2

#ECR:2

#ERC20:2

#Expo.io:2

#Firestore:2

#GPT4:2

#GitHub:2

#Kindle Oasis:2

#Kindle Paperwhite:2

#Kubernetes:2

#LINE:2

#Mac mini:2

#MacBook Pro:2

#NestJS:2

#Notion:2

#Oculus:2

#Oculus Quest:2

#Panda CSS:2

#Pixel Buds:2

#Remix:2

#Sigma:2

#Storybook:2

#VS Code:2

#Zotero:2

#pandoc:2

#re:Invent:2

#かき小屋:2

#くら寿司:2

#カフェ:2

#ギグワーカー:2

#サーチコンソール:2

#シェアオフィス:2

#スターバックス:2

#ステーキ:2

#スマートウォッチ:2

#ソラマチ:2

#チョコレート:2

#デモクラシー:2

#ニューヨーク:2

#バリ島:2

#パンとエスプレッソと:2

#ヒュッゲ:2

#ビーチ:2

#ブックスタンド:2

#マクドナルド:2

#ミズマチ:2

#モンスターエナジー:2

#リモートワーク:2

#ワイヤレスイヤホン:2

#三千院:2

#両国:2

#兵庫:2

#千葉:2

#博多:2

#堀江貴文:2

#宗教:2

#宮崎:2

#就活:2

#嵐山:2

#川越:2

#広島:2

#引用:2

#新宿御苑:2

#日米学生会議:2

#早稲田:2

#有馬温泉:2

#東寺:2

#東浩紀:2

#機械学習:2

#歯医者:2

#歴史:2

#江ノ島:2

#浅草:2

#清澄白河:2

#温泉:2

#独自ドメイン:2

#神奈川:2

#神戸:2

#英検:2

#転職:2

このブログの運営者

Profile picture

たわ / tawachan

1994年生まれ(29歳)

大学院修士課程(政治学)(2021-2023)

Web開発(2017-)

©2024 tawachan All Rights Reserved.