Web開発TwitterFacebookHatenaPocketこんにちは、たわです。今回はZEITがNext.jsベースでNotionのデータをもとに静的ページを生成するテンプレートを発表したのでそのことについてです。thingsをミッションにしているチームです。Nowというホスティングサービスをやっています。HostingNetlifyあたりとも似ています。Next.jsを開発あとはNext.jsを開発しているところとしても有名でしょう。ReactをベースとしてSSRまでできるフロントエンドフレームワークです。Notionとはあとここで登場するNotionというのは、色んな情報管理がまとめてできる便利なツールです。別記事で紹介しているので知らない方はぜひ。情報管理ツール【Notion】のメリットと自分の使い方(活用事例)を書きます。NOWにデプロイできるテンプレートを公開したのです。以下ページからセットアップができます。https://notion-blog.now.sh/具体的なやり方はここでは紹介しませんが、仕組みやポイントを書きます。Notionがバックエンドになる中にはZEITがヘッドレスCMSを発表したと表現されることがありますが、ヘッドレスCMSの役割を果たすのはあくまでNotionです。Notionに保存されたデータを上手く活用して、ブログなどのページに仕立ててしまうのが今回発表されたテンプレートです。イメージとしては以下図ような感じです。イメージ図1Notionで編集テンプレートにあったページをNotion上に作成すればそこが編集画面になります。テンプレート通りのページを生成するスクリプトも用意されているので簡単です。2サーバーに保存Notionは編集とほぼ同時に勝手に保存しているので意識することはありません。データは既にNotionのサーバーに保存されています。プッシュ今度はNext.jsの開発です。デフォルトでかなり基礎は整っているのであとは見た目を整えるだけいい感じにできるのではないでしょうか。開発が終わればGitHub上にプッシュしていきます。デプロイデフォルトではGitHubへのプッシュをトリガーにして自動でビルドとデプロイが走ります。Nowのシークレットにアクセストークン等を設定すると思うので、それを使ってNotionサーバーから必要な情報もその時取得しています。待てばもう公開された状態になります。他のヘッドレスCMSを活用する場合と比べた利点ヘッドレスCMSは最近流行りで、脱Wordpressを目論んで活用を試す人も多いのではないでしょうか。CMSなどなど色々あると思いますがそれらはセットアップがかなり大変だと思います。ヘッドレスCMS側もセットアップが必要ですし、それを活用するフロントエンドを作るのも案外手間です。ヘッドレスCMS側で作ったデータ構造を適切にTypeScriptで処理できるようにしていくのも結構骨が折れるのでできればやりたくない...。このテンプレートはそこをすべて一気通貫で整えてくれるのがかなりポイント高いと思います。拡張がかなり手軽デフォルトでは、PageSlug(URL上の名前)PublishedDateAuthorsが設定されていますが、列は名前変えても足しても消しても大丈夫です。]}TypeScript側にはいい感じにパースされてくるのであとはいい感じにデータ処理を書けばすぐに対応できます。コンテンツの種類も全部対応可能デフォルトでは、togglecalloutbookmarkといったNotionのいくつかの記法が対応されていません。....}というようにcase文で見た目を定義されているだけなので追加・修正も容易です。まとめデフォルトでかなり整っているにもかかわらず、それでも拡張性はかなり高いように感じました。Nowから変えることも容易でしょう。Notion側は自由にフォーマットを変えられるが故に知らぬ間に壊してしまうということもありそうなのでそのあたりは注意が必要かもしれません。WordPressを脱して自前のメディアやブログを運用するにはかなり始めやすい技術セットだと思います。»スポンサードリンクプロフィールたわです。東京から福岡移住したWeb開発の人が発信していくブログです!Twitter(たわ)note(たわ)Instagram(あすか)YouTube(あすか)関連記事2020-01-30NestJSでのモジュール分割。相互依存がつらいので細かく分けた話。Web開発2020-01-24NestJSでmiddlewareとguardとdecoratorを活用してcurrentUserを実装した話。流行2020-02-07【2020年】エンジニアフレンドリーシティ福岡フェスティバルに行って来た話。内輪感減ると良さそう。(2)月別アーカイブ検索スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。