前書き
NotionNext は Tangly1024 らによって開発された、Next.js と Notion API を利用したオープンソースのブログシステムです。Vercel は Next.js 公式チームが開発した Serverless ホスティングプラットフォームで、両者は非常に相性が良い組み合わせです。Vercel で NotionNext をデプロイする場合、サーバー購入、環境構築、コマンド入力は一切不要で、マウス操作だけで完了できます。
本記事では、Notion テンプレートの複製、コードの Fork、環境変数の設定、独自ドメインの紐付け、そしてサイト運用まで、Vercel による NotionNext デプロイの一連の流れをゼロから解説します。完全な初心者でも、手軽にブログを作りたいクリエイターでも、このチュートリアルに沿ってウェブサイトを公開できます。
動画による解説
1. 事前に用意するもの
作業を始める前に、以下 3 つのアカウントを準備してください。
項目 | 説明 | 無料利用 |
Notion アカウント | ブログコンテンツを保管。個人利用は無料 | ✅ 無料 |
GitHub アカウント | コードの保管と自動デプロイに使用 | ✅ 無料 |
Vercel アカウント | サイトをホスティング。GitHub アカウントで直接ログイン可 | ✅ 無料 |
いずれのサービスも個人ユーザーは完全無料で、費用ゼロで自分のブログサイトを持つことができます。
2. Notion ページの準備
NotionNext のコンテンツはすべて 1 つの Notion ページから取得されます。まず公式テンプレートを自身の Notion へ複製します。
2.1 公式テンプレートを複製する
ブラウザを開き、下記公式テンプレートページにアクセスします。
ページ右上のDuplicate（複製）ボタンをクリックします。
ポップアップウィンドウで複製先のワークスペースを選択し、Duplicate をクリックして確定します。
数秒待つと、テンプレートが自身の Notion ワークスペースに作成されます。
ヒント：Duplicate ボタンが表示されない場合は Notion にログインしていません。ログインしてから再度試してください。
2.2 ウェブ共有を有効にする
NotionNext は公開リンク経由でページ内容を読み取るため、ウェブ共有権限をオンにする必要があります。
- 先ほど複製した Notion ページを開く
- 右上のShareボタンをクリック
- 表示されたパネル内でShare to web（ウェブに共有）のスイッチをオンにする
スイッチが青色になれば有効化完了です。
2.3 ページ ID を取得する
ページ ID は NotionNext と Notion ページをつなぐ識別子で、32 文字の英数字の文字列です。取得手順は以下の通りです。
- Share パネル内の Copy link をクリックし、共有リンクをコピー
- メモ帳などのテキストエディタに貼り付け
- リンク内の
?v=より前にある 32 文字の文字列がページ ID です。
例：共有リンクが
の場合、ページ ID は
02ab3b8678004aa69e9e415905ef32a5となります。よくあるミス：
?v=以降の文字列を含めてコピーしてしまい、ページ ID が不正になるケースが多発します。?v=より前の 32 文字だけを取得してください。3. NotionNext のコードを Fork する
Vercel は GitHub リポジトリからコードを取得してデプロイを行います。NotionNext のソースコードを自身の GitHub アカウント配下に複製する操作を Fork と呼びます。
3.1 Fork とは何か
Fork とは GitHub 上で他人のプロジェクトを自分のアカウントに複製する機能です。複製後は複製元プロジェクトに影響を与えず、自由にコードを編集できます。
3.2 操作手順
- NotionNext の GitHub リポジトリにアクセス：https://github.com/tangly1024/NotionNext
- ページ右上のForkボタンをクリック
- 遷移先画面でリポジトリ名はデフォルトの
NotionNextのままで構いません。「Copy the main branch only」にチェックを入れてもよいです。
- Create forkをクリック
- 数秒後、自身のアカウント配下の NotionNext リポジトリへ自動的に遷移します。
ページ上部に
あなたのユーザー名 / NotionNext、下部にforked from tangly1024/NotionNextと表示されれば Fork 成功です。4. Vercel でデプロイを実行
GitHub にコードが用意できたら、Vercel を使ってアクセス可能なウェブサイトに変換します。
4.1 Vercel にログイン
- https://vercel.com/ にアクセス
- 右上のSign UpまたはLog Inをクリック
- Continue with GitHubを選択し、GitHub アカウントでログイン
- 画面の指示に従って認可を完了させます。
4.2 プロジェクトをインポート
ログイン後、Add New... → Projectをクリックし、新規プロジェクト画面を開きます。
「Import Git Repository」欄から、先ほど Fork した NotionNext リポジトリを探します。
一覧に表示されない場合は「Adjust GitHub App Permissions」をクリックし、Vercel にリポジトリへのアクセス権を付与してください。
NotionNext を見つけたら右側のImportボタンをクリックします。
4.3 環境変数を設定（重要手順）
設定画面が開いたら、すぐに Deploy を押さず、環境変数を設定して NotionNext が Notion のコンテンツを読み取れるようにします。
画面をスクロールし、Environment Variables（環境変数）の項目を開きます。
- Name 欄に
NOTION_PAGE_IDを入力
- Value 欄に先ほど取得した 32 文字のページ ID を貼り付け
- Addボタンをクリックして環境変数を追加
注意：環境変数名
NOTION_PAGE_IDは固定で、大文字小文字を完全に一致させる必要があります。記述ミスがあると Notion のデータが読み込めずサイトが空白になります。4.4 デプロイを開始
環境変数の追加が完了したら、画面下部のDeployボタンをクリックします。
Vercel が自動で以下の処理を実行します。
- GitHub からコードを取得
- プロジェクト依存パッケージをインストール（npm install）
- Next.js プロジェクトをビルド（npm run build）
- Vercel の CDN ネットワークへデプロイ
全体で約 1‑2 分かかり、画面上でビルドログをリアルタイムで確認できます。
4.5 デプロイ完了
「Congratulations!」と表示された完了画面が出ればデプロイ成功です。
Go to Dashboardをクリックしてプロジェクト管理画面へ移動し、右上のVisitボタンから作成したサイトを閲覧できます。
おめでとうございます！NotionNext による個人ブログサイトが完成しました。初期のアクセス URL は
notionnext‑xxx.vercel.app形式となります。
4.6 サイトのカスタマイズ
ここまでで独自のブログが完成しています。サイトタイトル、説明文、アバター、メニューバーなど、あらゆる項目を自由に変更可能です。
ヒント
NotionNext は Notion のノート内容をリアルタイムで取得します。キャッシュやネットワーク遅延の影響により、ページを最大 2 回更新すると同期後の内容が表示されます。
トラブルシューティング
サイトがノートデータを同期しない場合は、手順を再確認するか最初から作業をやり直してください。
- Notion 側で
NOTION_PAGE_IDの値が正しいか、ウェブ共有が有効になっているか確認。
- Vercel 管理画面の環境変数に
NOTION_PAGE_IDが正しく設定されているか確認し、設定修正後にRedeploy（再デプロイ）を実行。 （参照：Vercel 環境変数の確認方法、再デプロイの手順）
5. 独自ドメインを紐付ける
- Cloudflare CDN による高速化（無料、設定簡単）：ドメインの DNS を Cloudflare へ移管し、Proxy モードを有効にします。
- アクセス数が多い場合：サーバーへ移行し Docker でのデプロイを検討してください。
Vercel 無料プランの制限事項
Vercel Hobby（無料版）の主な制限は下記の通りです。
- 月間帯域幅：100GB
- 月間ビルド時間：6000 分
- Serverless 関数の最大実行時間：10 秒
- 1 プロジェクトあたりプレビューデプロイ最大 100 個
個人ブログであればこれらの上限は十分で、通常利用で超過することはほとんどありません。
6. 応用テクニック
6.1 自動デプロイ
Vercel は標準で自動デプロイが有効です。GitHub へコードをプッシュするたびに、自動でビルド・本番環境へのデプロイが実行されます。GitHub のウェブ画面上でファイルを編集・保存した場合も自動デプロイがトリガーされます。
6.2 プレビュー環境
GitHub で Pull Request を作成すると、Vercel が自動的にプレビューデプロイを生成し、専用のプレビュー URL を発行します。コードをマージする前に動作確認でき、チーム開発や新機能のテストに便利です。
6.3 環境別の環境変数管理
Vercel は Production / Preview / Development の各環境ごとに個別の環境変数を設定可能です。例えば Preview 環境にはテスト用 Notion ページ、Production 環境には本番用ページを割り当て、互いに干渉させずに運用できます。
6.4 ビルドコマンドのカスタマイズ
特殊なビルド要件がある場合、Vercel プロジェクト設定 → General → Build & Development Settings からビルドコマンドや出力ディレクトリなどを変更できます。通常は既定値のままで問題ありません。
7. まとめ
Vercel を使った NotionNext のデプロイは、現在最も簡単でコストの低いブログ構築手段の一つです。サーバー代不要、運用の手間がなく、すべて画面操作で完了します。大まかな手順は「Notion テンプレート複製 → コードを Fork → Vercel でインポート・デプロイ」の 3 ステップで、速ければ 10 分程度で公開可能です。
デプロイ完了後は Notion Config からサイト設定、テーマ切り替え、各種プラグインの有効化を Notion 画面上から行え、コードを編集する必要がありません。公式の新バージョンがリリースされたら Sync fork をクリックするだけでアップグレードできます。
ブログの構築方法に迷っているなら、NotionNext + Vercel の組み合わせを試してみてください。執筆体験と構築コストのバランスに優れた選択肢です。
サイト制作を楽しんでください！🚀
8. その他
詳細は下記サイトを参照してください。
- 作成者:LxhNolan
- リンク:https://blog.happinessrailway.com/jp/article/vercel-deploy-notion-next
- 免責事項:この記事はCC BY-NC-SA 4.0 ライセンスの下でライセンスされています。転載する場合には出典を明らかにしてください。
関連する記事
