1 何を作るか｜Vercel が引き受ける範囲と、引き受けない範囲
問い合わせフォームと管理画面を Next.js + Vercel で作る全7章の第1章。完成形の全体像と、Vercel が担当するホスティング・実行環境・配信の範囲、そして自前では持たないデータベースの扱いを最初に切り分けます。
このレッスンでわかること
このコースでは、問い合わせフォームと、その受信を確認する管理画面を Next.js で作り、Vercel に公開するところまでを7章で通します。
- 7章を終えたときに何が動いているのかがわかる
- Vercel が引き受ける範囲と、引き受けない範囲がわかる
- 同じ題材を扱う Cloudflare 入門コースとの違いがわかる
このレッスンではコードを書きません。先に地図を持ってから手を動かします。
作るもの
題材は2つの画面です。
| 画面 | 誰が使うか | 認証 | やること |
|---|---|---|---|
| 問い合わせフォーム | 誰でも | なし | 名前・メール・本文・添付ファイル1点を送る |
| 管理画面 | 自分やチームだけ | あり | 受信一覧を見る。対応済みフラグを更新する |
小さく見えますが、Web アプリの必要要素はひととおり入っています。
- フォームの送信をサーバー側で受ける（第4章）
- 送信内容を保存する（第5章）
- ファイルを保存して、後から取り出す（第5章）
- 一部の画面だけを守る（第6章）
- 独自ドメインで公開し、費用と挙動を監視する（第7章）
各章の終わりには必ず「動く状態」が残ります。第3章を終えた時点で、すでに URL を人に見せられる状態になります。
Vercel とは何を引き受けるサービスか
Vercel は、フロントエンドのコードを Git に push したら、ビルドして世界中に配信し、サーバー側の処理も動かすプラットフォームです。Next.js を開発している会社が運営しています。
引き受ける範囲を、このコースで使うものだけに絞って並べます。
| 領域 | Vercel の担当 | 本コースでの登場 |
|---|---|---|
| ビルドとデプロイ | Git 連携。push ごとにビルドして配置する | 第3章 |
| 配信（CDN） | 静的アセットとキャッシュの配信 | 第3章・第7章 |
| サーバー側の実行環境 | Vercel Functions。API やフォーム処理を動かす | 第4章 |
| ファイル保存 | Vercel Blob | 第5章 |
| 設定値の配布 | Global Config | 第5章で触れる程度 |
| URL へのアクセス制限 | Deployment Protection | 第6章 |
| ドメインと証明書 | 独自ドメイン・SSL の自動発行 | 第7章 |
| 監視 | Observability・Speed Insights | 第7章 |
引き受けないもの
ここが最初に押さえるべき点です。
Vercel は汎用のデータベースを自社では持っていません。
自社で提供しているストレージは Vercel Blob（ファイル置き場）と Global Config（低遅延で読み出す小さな設定値）の2つだけです。テーブルを作って行を検索するような一般的なデータベースは、Marketplace 経由で外部サービス（Neon / Upstash / Supabase など）をつなぐ設計になっています。
これは機能不足ではなく、方針です。第5章で実際に手を動かしながら、この設計の利点と面倒な点の両方を扱います。
もうひとつ引き受けないものがあります。
Vercel は「アプリのユーザー登録・ログイン」を提供しません。
第6章で使う Deployment Protection は、デプロイされた URL に誰がアクセスできるかを絞る仕組みであって、アプリのユーザー認証ではありません。この違いは混同しやすいので、第6章で1章ぶん使って扱います。
Cloudflare 入門コースとの違い
このサイトには、まったく同じ題材を Cloudflare で作る入門コースがあります。読み比べると、同じ課題に対する解き方の違いが見えます。
| 課題 | Cloudflare 入門コース | このコース |
|---|---|---|
| コードを動かす | Workers | Vercel Functions（Next.js の Route Handlers / Server Actions 経由） |
| データを保存する | D1（同じ会社の SQL データベース） | Marketplace の外部データベース |
| ファイルを保存する | R2 | Vercel Blob |
| 管理画面を守る | Cloudflare Access | Deployment Protection |
| デプロイ | Wrangler（CLI 中心） | Git 連携中心。CLI も併用 |
大きな違いは2つです。
1. データ層を自社で持っているかどうか。 Cloudflare は D1 も R2 も自社製品なので、設定が1か所にまとまります。Vercel は外部サービスを挟むぶん手数が増えますが、選択肢は広がります。
2. フレームワークとの距離。 Vercel は Next.js の開発元なので、Next.js の機能（Server Actions、ISR、画像最適化）がそのまま動くことが前提になっています。Next.js で作ると決まっているなら、この距離の近さがそのまま速さになります。
このサイトでは Cloudflare を主経路として案内しています。このコースは副経路です。すでに Next.js を書いている、あるいはこれから Next.js で作ると決めている場合は、こちらから入るほうが素直です。
なお、第6章で扱うとおり、一般ユーザーのログイン機能が要件に入るなら、Supabase 入門コースの構成のほうが素直です。
実例：この題材でリクエストがどう流れるか
第4章以降で作るものを、リクエストの流れとして先に見ておきます。
[訪問者] --- フォーム送信 --->
Vercel CDN
└─ Vercel Functions（Route Handler / Server Action）
├─ 添付ファイル → Vercel Blob
└─ 送信内容 → 外部データベース（Marketplace 経由）
[運営者] --- /admin へアクセス --->
Deployment Protection（ここで弾かれる or 通る）
└─ Vercel Functions → 外部データベースを読む**注目してほしいのは、/admin の手前に置かれた Deployment Protection です。**アプリのコードが動く前の段階でアクセスを判定します。だからアプリ側にログイン画面を書かずに済む反面、「アプリのユーザーごとに見せる範囲を変える」ようなことはできません。
用意しておくもの
第2章までに揃っていると進めやすいものです。
| 必要なもの | 備考 |
|---|---|
| Node.js | Next.js が要求するバージョンは第2章で確認します |
| GitHub アカウント | Git 連携デプロイに使います |
| Vercel アカウント | GitHub アカウントでサインアップできます |
| ターミナル | npm コマンドが実行できれば十分です |
料金については、**このコースの範囲は個人利用の Hobby プランで完結するように組み立てます。**プランごとの差が効いてくるのは第6章（保護方式）と第7章（費用）です。そこで具体的な数字を扱います。
手順と画面の記述は 2026-08 時点のものです。Vercel のダッシュボードは更新が早いため、ボタンの位置や文言が変わっている場合は、本文の「何をしたいのか」を手がかりに読み替えてください。
やってみよう
コードはまだ書きません。判断だけ先に済ませます。
- 完成形を言葉にする：このコースで作るものを、3行で自分の言葉で書き出してください。「誰が」「何を送り」「誰が見るか」の3点が入っていれば十分です
- データ層を意識する：上の表で「Vercel が引き受けないもの」を確認し、データベースだけは外部サービスになるという点をメモしておいてください。第5章でここが効いてきます
- アカウントを作る：GitHub アカウントで Vercel にサインアップします。第2章ですぐ使います
- 他コースを覗く：Cloudflare 入門コースの第1章だけ読んでみてください。同じ題材の別解を先に見ておくと、このコースの選択が「なぜそうしているか」が理解しやすくなります
まとめ
- 作るのは問い合わせフォームと管理画面。7章それぞれの終わりに動く状態が残る
- Vercel が引き受けるのはビルド・配信・サーバー側の実行環境・ファイル保存・URL の保護・ドメイン・監視
- **Vercel は汎用データベースを自社で持たない。**自社ストレージは Vercel Blob と Global Config だけで、データベースは Marketplace 経由の外部サービス
- Deployment Protection は URL へのアクセス制限であって、アプリのユーザー認証ではない（第6章で詳述）
- Cloudflare 入門コースとの違いは、データ層を自社で持つかと、フレームワークとの距離の2点
- 一般ユーザーのログインが要件なら、Supabase 入門コースの構成のほうが素直
理解度チェック
Q1. このコースで扱う「Vercel が自社で提供しているストレージ」はどれでしょう？
- リレーショナルデータベースとファイル置き場の両方
- Vercel Blob（ファイル置き場）と Global Config（設定値）の2つ
- ストレージは一切提供していない
- Marketplace 経由でしか使えない
答えを見る
正解：2
Vercel が自社で持つストレージは Vercel Blob と Global Config です。テーブルを作って行を検索する汎用データベースは自社では提供せず、Marketplace パートナー（Neon / Upstash / Supabase など）に委ねる設計になっています。第5章で実際につなぎます。
Q2. 第6章で使う Deployment Protection について、正しい説明はどれでしょう？
- アプリにログイン画面を追加する機能
- デプロイされた URL へのアクセスを絞る機能
- データベースの行ごとにアクセス権を設定する機能
- 攻撃トラフィックを自動的に遮断する機能
答えを見る
正解：2
Deployment Protection は、アプリのコードが動く手前で「その URL にアクセスしてよいか」を判定する仕組みです。アプリのユーザー認証ではないため、一般ユーザーごとに見せる範囲を変えるような用途には使えません。この区別は第6章で詳しく扱います。
参考リンク
- Vercel Documentation — 本コースが参照する公式ドキュメントの入口
- Vercel Storage — 自社ストレージと Marketplace の関係
- Next.js Documentation — App Router の公式ドキュメント