第1回：Notionを使ったブログ構築の全体像

✅ この記事でわかること

なぜ「Notion × Next.js × Vercel」でブログを作ろうと思ったか
必要な技術やアカウント
全体構成とざっくりした流れ
初心者がつまずきやすいポイント

🧭 はじめに

副業や発信のためにブログを作ろうと思ったとき、

「WordPressは重いし管理が面倒…でも、技術者ならもっと自由に作れるんじゃないか？」

と思ったのがきっかけでした。

そこで出会ったのが、NotionをCMSとして使って、Next.jsでブログを構築し、Vercelで公開するという構成。

実際にやってみて、「想像以上に自由」で「しっかり運用できる」と感じたので、この記事ではその全体像を紹介します。

※ CMSとは「Content Management System（コンテンツ管理システム）」の略で、ブログやウェブサイトのコンテンツを簡単に作成・管理・公開できるシステムのことです。WordPressも有名なCMSの一つです。

🛠 使用するツールと技術

ツール	用途
Notion	記事の管理・投稿（CMSとして使う）
Next.js	フロントエンドフレームワーク（ブログのUI）
Notion API	Notionから記事データを取得する
GitHub	コードのバージョン管理
Vercel	本番環境としてデプロイ＆公開
カスタムドメイン	www.ys-magazine-blog.com を設定して独自ブログとして運用

🧩 全体の構成イメージ

graph TD;
A["Notionデータベース"] --> |API連携| B["Next.jsブログテンプレート"];
B --> |GitHub連携| C["Vercelで自動デプロイ"];
C --> D["独自ドメインで公開"];

%% スタイリング
style A fill:#fff5f5,stroke:#ff4444
style B fill:#f0f8ff,stroke:#4477ff
style C fill:#f0fff0,stroke:#44aa44
style D fill:#fff0f8,stroke:#ff44aa

📅 構築の流れ（ざっくり）

Notionでブログ用データベースを作る（Title / Slug / Published など）
Next.js用テンプレートをGitHubからフォーク
NotionのIntegrationを作って、API連携
.env.local で環境変数を設定
ローカルで表示確認（ここで初めて記事が表示されて感動）
GitHubへpush → Vercelで自動ビルド
カスタムドメインを設定して本番公開

⚠️ 初心者が詰まりやすいポイント（実体験）

✅ Publishedチェックをつけても記事が表示されない
✅ 記事を更新しても反映されない
✅ Notion Integrationに更新権限がない
✅ プレビュー環境では見れるのに、本番では見れない
✅ yarn.lockのエラーでビルド失敗

🔚 まとめ

「Notionを使って自分だけのブログを作る」と聞くと難しそうに見えるけど、

1つ1つのステップを押さえれば、ノーコード寄りでカスタマイズ自由なブログが手に入る。

次回は、実際にNotionとNext.jsを連携して記事を取得し、ローカルで表示するところまでを解説します。

📌 次の記事はこちら

→ 第2回：[Next.jsでNotionブログを表示するまで【API連携〜ローカル確認】]

← Go home