なぜこのNotion APIを使おうと思ったのか？
今回、Notion APIを使ったブログを個人開発した背景には、以下のような理由があります。
- 普段社内プロジェクトで使用している 「Next.js × TypeScript」 の復習も兼ねて、実際に個人で手を動かして開発してみたかった
- データベース構築を省略し、フロントエンドに集中した開発体験をしてみたかった
業務で扱うプロジェクトは、バックエンドがしっかりと設計・構築されており、規模も大きいことが多いです。ただ、個人開発でそれと同等の構成を用意するのは正直ハードルが高く、気軽に試すには不向きです。
その点、Notion APIをバックエンド代わりに使うことで、データベース設計やインフラ構築なしで、柔軟かつスピーディにアプリを作れる点に魅力を感じ、本ブログアプリの開発に至りました。
実際のアプリはこちらで公開しています
使用技術スタック
今回のプロジェクトでは以下の技術を使用しました。
- Next.js (App Router)
- React
- TypeScript
- Notion API（公式SDK）
-
ReactMarkdown
Notionから取得したテキストをMarkdown形式で表示 -
SWR
社内プロジェクトでよく使っているため、復習がてら導入（必須ではない）
実装した主な機能一覧
-
ブログ記事一覧ページ
- ソート機能（新しい順・古い順・いいね順）
- カテゴリフィルター
- ページネーション
-
ブログ詳細ページ
- Notionページの内容をMarkdownでレンダリング
- いいね機能（Notionの数値プロパティを更新）
-
API連携
-
/api/getAllPosts：記事一覧取得（sort対応） -
/api/getPageInfo：詳細情報の取得・いいね数更新 -
/api/getPageContent：Markdown変換
-
作ってみての学び・気づき
-
やはりTypeScriptの型付けに苦戦
特にNotion SDKから返ってくるレスポンス（プロパティのネストが深く、nullableな項目も多い）の扱いが難しく、型ガードやoptional chainingの理解が深まりました。 -
Notion APIとの連携
あらかじめ構築されたデータベース構造を活かすことで、コード側のデータ設計をシンプルに保てたのが非常に良かったです。
特に良かったのは、Notion側で カテゴリや投稿日などのプロパティを自由に設定・管理でき、それをAPI経由でそのまま使えるという点です。
まとめ
今回の個人開発では、実務で扱う技術を実践的に復習しながら、バックエンドの構築なしで完結するアプリを作れたことが一番の収穫でした。
また、Notionというノーコードツールをうまく活用すれば、開発リソースを抑えつつも、意外としっかりした構成のアプリが作れることを実感しました。
プロジェクトでよく使う記述パターンをベースに作業できたこともあり、良いトレーニングになったと思います🍋
今後の展望
- 検索機能の追加（全文検索 or タグ検索）
- コメント機能の導入（Supabase or Firebase連携）
- カレンダー表示やアーカイブ機能などの拡張
個人開発を始めたい方にとっても、ハードルが低く取り組みやすいので、初心者の方が「何か作ってみたい」と思ったときにおすすめの構成です