Notion BlogをNext.jsでデプロイしてみた！

こんにちは！

当ブログを運営している いわけん と申します。

普段は Web制作 や アプリケーション開発 を中心に、フロントエンドエンジニアとして活動しています。

今回、自分のアウトプットをもっと簡単に、そして効率よく継続できるように、Notion + Next.js を使ってブログサイトを構築してみました！

本記事では、使用した技術スタックや構成、構築時のポイントについてまとめていきます。

---

🎯 なぜNotionでブログ？

最近は情報管理に Notion を使っている方も多いのではないでしょうか？

Notionはドキュメント管理だけでなく、データベース的な使い方もできるため、ブログのCMS代わりに使うことができます。

実際に使ってみると、

• 投稿がNotion上で完結できる
• UIが直感的で管理がしやすい
• APIを通じて柔軟に表示できる

と、非常に快適でした！

---

🛠 技術スタックの紹介

フロントエンド

• React をベースにしたフレームワーク Next.js
  • getStaticProps を使ってビルド時にNotionのデータを取得
  • ISR（Incremental Static Regeneration）を使ってリアルタイムに近い形で記事更新

バックエンド（CMS代わり）

• Notion API
  • Notionで作成したデータベースにAPI経由でアクセス
  • NotionのIntegration Token を環境変数に設定してセキュアに管理
  • 特定のプロパティ（タイトル・公開フラグ・日付・タグなど）を元に記事表示を制御

---

💻 開発の流れ（ざっくり）

1. Notion上でブログ用データベースを作成
2. Notion APIの設定と認証情報の取得
3. Next.js プロジェクトを作成
4. notion-client や notion-to-md 等のライブラリでデータ取得
5. ビルドしてVercelにデプロイ！

---

🚀 デプロイ先：Vercel

今回のブログは Vercel にホスティングしています。

Next.jsとの相性も抜群で、無料枠でも快適に運用可能です。

• 独自ドメイン対応
• GitHubと連携して自動デプロイ
• ステージング環境も簡単に構築可能

---

📸 実際の画面イメージ

※以下は例としてイメージを載せています（本番サイトによってカスタマイズ可能です）

 

---

✏️ 今後の展望

• 記事に 目次 や タグ別表示機能 を追加
• 検索機能 の実装（Algoliaなどの導入を検討中）
• ダークモード対応
• SNSとの自動連携

などなど、今後も機能拡張をしていく予定です！

---

📢 最後に

エンジニアとしてアウトプットを継続するために、自分にとって心地よい執筆環境を作ること はとても大切です。

Notion × Next.js の構成はとてもシンプルでありながら強力なので、気軽にブログを始めたい方にはぜひオススメです！

何か質問などあれば、お気軽にコメントやSNSでご連絡ください！

---

🚀 開発者：いわけん

💻 GitHub｜✉️ お問い合わせ

←ホームに戻る