第2回：NotionとNext.jsを連携してブログを表示するまで
🌍 この記事でわかること
- Notionで作成したデータベースをAPIで取得する方法
- Next.jsのテンプレートを使って表示する手順
- NotionAPIの設定ミスで起きる問題と対処
🔧 環境の準備
- Notion Integration（API連携用トークン）を作成
- GitHubアカウント
- Vercelアカウント
- Notionのアカウント & データベース作成
⚡️ Step 1: Notion 側の準備
- 記事用のDatabaseを作成
| プロパティ名 | 種類 | 説明 |
|---|---|---|
| Title | タイトル | 記事のタイトル |
| Slug | テキスト | URLに使われる英数字識別子 |
| Date | 日付 | 記事の公開日や作成日など |
| Tags | マルチセレクト | カテゴリやタグ分けに使用 |
| Published | チェックボックス | 公開状態を制御（ONで公開） |
- Integrationを作成し、正しくデータベースに共有
📑 Step 2: Next.js ブログテンプレートをfork
- notion-blog-nextjs をGitHubでfork
- VSCodeでリポジトリをcloneし、開発環境を構築
🛠️ Step 3: 環境変数の設定
.env.local に以下を設定
NOTION_TOKEN=xxxxxxxxxxxxxxxxx
# NotionのIntegrationで発行された内部トークン。シークレットとして管理。
NOTION_DATABASE_ID=xxxxxxxxxxxxxxxxx
# 表示させたいNotionデータベースのID。URL末尾にある文字列などから取得可能。📲 Step 4: ローカルで表示確認
- npm run dev でローカルサーバー起動
- localhost:3000 でNotion記事が表示
- 最初の1記事表示で感動したものの...
⚠️ つまづいたところ
- Published checkboxがフィルタに効いていない、読み取れない
- cache() を利用していたため、更新が反映されない
- yarn.lock の不正な設定によりビルド失敗
✅ まとめ
- Notion の DB構成 + API連携は、最初のカベ
- Next.js のテンプレートが優秀なので、fork だけで準備も楽
- つまづきやすいのは「Published」設定、環境変数、キャッシュシステム
👉 次回: Vercelで本番公開！ドメイン設定やPreview/Productionの差には要注意
← Go home