💡 本記事は２部に分かれていて、技術的な話は 後編 で記載しています。
僕は2022年7月15日にNotionとNext.jsを使ったUdemyのコースを公開しました。
コース名「【NotionをCMSに】NotionAPI + Next.js + TypeScript でブログ開発〜デプロイまで」
そのコース制作の中で発生した問題や、ポイント、伝えたいことなどを記事にしてみました。
前編（本記事）ではコースを制作することになった経緯や、Notionのデータベース機能がCMSにピッタリだった話をお伝えします。
コースを制作した理由
僕は他にもUdemyコースを出していて、プログラミングの内容が多いので、コースを補足する意味で記事を少し書いていました。
ブログはブログメディア自体もたくさんあり、技術系では Qiita、Zenn、ジャンルを広げれば note やMedium など多数あります。
どこかのメディアプラットフォームを使わない場合は、何かしらの方法でサーバーを立てる必要があります。メジャーなものとしては WordPress で構築することが多いと思います。
僕もいくつかは WordPress で構築しています。
WordPressは構築さえしてしまえばプラグインやテーマが豊富にあるので便利です。
一方、コンテンツ更新については、シームレスさに少し欠けるのが悩みです。
基本的にはPCを立ち上げてブラウザを開き、ログインしてページを編集ということになると思います。
記事を書き始めるまでに何クリックも必要です。
身近にコンテンツ更新が可能なNotion
そんな中、気になっていたNotionを使ってみたところ、slackとかと同じように、存在がすごく身近に感じられる、素晴らしいサービスでした。
slackは社内コミュニケーションとしてはすごくいいですが、コミュニケーションがメインとなり、資料まとめなどでは別のサービスを使う方も多いと思います。
Notionはそこにぴったり当てはまりました。
Notionを使えばコンテンツ作成がすごく身近になって、記事をどんどん書きたくなってしまうほどです。
Notionの機能を使ってそのままページを一般公開できますし、super.so などのサービスで独自ドメインやSEOも考えたページとして公開することも可能です。
super や Anotion
super.soやAnotionのようなNotionのホスティングサービスも素晴らしく、少額のサブスクで簡単にNotionを公開可能です。
開発者ではない方や、早く使うことを優先したい方にはうってつけのサービスだと思います。
僕は super.so を少し利用したことがあります。
Notion記事を公開した後、ページのスラッグや階層の設定をする場合は一度super.soに入って手動で行う必要がありました。
また、基本的に１ページずつ設定するので、カテゴリーやタグページの場合は大変な作業になります。
僕が知らないだけで何かいい方法があるのかもしれませんし、将来的には上記の機能も追加されるかもしれません。
ただ現時点ではそのような点を踏まえ、Notion APIとNext.jsを使った方法ならNotionの手軽さを活かした記事更新が可能だと思い、実際に構築しました。
その過程を整理してまとめ、制作したのが今回のUdemyコースです。
コースで意識したカスタマイズの可能性
コースで意識したところは、カスタマイズの可能性です。
先述の通り、
- Notionのデザインのままでよければ ⇒ Notionの機能でWEB公開
- SEOやドメイン、ページ管理もしたい ⇒ super.soなどのホスティングサービス
という風になります。
ここでわざわざ手間をかけて実装するのはカスタマイズしたい要望がある時だと思います。
- もっとカスタマイズしたい
- タグ機能もつけて動的ページを生成したい
- スラッグも設定したい
- ヘッダー、フッターなどを全ページ共通化したい
など。
コースでは各機能やコンポーネントを順番に作成していくので、
どこをどう編集すればといった、カスタマイズのポイントも理解しやすいのではないかと思います。
コースではCSSにtailwindを使用しています。基本的にはほぼ全て tailwind なので、デザイン変更も比較的簡単だと思います。
僕が思う Notion の優れた機能はデータベース
コアな部分としては NotionをCMSとして使うというところになります。そこに大きな役割を果たすのが Notion のデータベースです。
僕が個人的に思うNotionの優れた機能がこのデータベースです。
NotionではGUIを通して簡単にデータベースを構築できます。これは実際に列をフィールド種類の単位とし、行をデータのまとまりの単位としていることからもはっきりしています。
SQLデータベース同様、行と列に秩序があります。
もう少し自由なテーブル構造であるエクセルやスプレッドシートとはそのあたりが異なります。
実際のSQLデータベースとは異なるとはいえ、リレーションの機能もあったり、本当にすごいです。これをGUIだけで構築して、さらにAPIで取得できるとなれば、CMSとしての役割として十分すぎます。
💡 技術的な話は 後編 で記載しています。