メインコンテンツへスキップ
Think You Lab
ブログログイン無料で始める
トップ/ブログ/how-to
VercelNext.jsデプロイSupabase環境変数

Vercel に Next.js をデプロイする — 環境変数・Root Directory・Supabase 連携の設定方法

Vercel への Next.js デプロイ手順を解説。THINK YOU LAB の実際の設定を公開し、サブディレクトリ構成での Root Directory 設定、Supabase + Stripe の環境変数5つの意味と取得場所、Supabase の Site URL 更新まで一通りカバーします。

2026-04-15·約11分

LINE 公式アカウント

AI副業スタートガイドをLINEで無料配布中

目次
  • Vercel デプロイの全体フロー
  • GitHub と Vercel の連携
  • Vercel にプロジェクトをインポートする手順
  • Root Directory の設定（サブディレクトリ構成の場合）
  • THINK YOU LAB のリポジトリ構成
  • Vercel の「Root Directory」設定で `lms` を指定する
  • `vercel.json` の配置場所
  • 環境変数の設定
  • 設定が必要な環境変数5つ（THINK YOU LAB の例）
  • `NEXT_PUBLIC_` プレフィックスの意味
  • Production / Preview / Development の環境別設定
  • Supabase の Site URL を更新する（デプロイ後に必須）
  • Site URL が `localhost` のままだとログインが壊れる
  • Supabase ダッシュボードで更新する手順
  • デプロイ後チェックリスト
  • ビルドログを確認する
  • 本番 URL でログインが通るか確認する
  • Stripe Webhook エンドポイントを本番 URL で登録する
  • よくある詰まりポイント
  • ビルドエラー（型エラー・import パスの問題）
  • 環境変数が反映されない
  • ログイン後に 404 になる
  • まとめ

目次

  • Vercel デプロイの全体フロー
  • GitHub と Vercel の連携
  • Vercel にプロジェクトをインポートする手順
  • Root Directory の設定（サブディレクトリ構成の場合）
  • THINK YOU LAB のリポジトリ構成
  • Vercel の「Root Directory」設定で `lms` を指定する
  • `vercel.json` の配置場所
  • 環境変数の設定
  • 設定が必要な環境変数5つ（THINK YOU LAB の例）
  • `NEXT_PUBLIC_` プレフィックスの意味
  • Production / Preview / Development の環境別設定
  • Supabase の Site URL を更新する（デプロイ後に必須）
  • Site URL が `localhost` のままだとログインが壊れる
  • Supabase ダッシュボードで更新する手順
  • デプロイ後チェックリスト
  • ビルドログを確認する
  • 本番 URL でログインが通るか確認する
  • Stripe Webhook エンドポイントを本番 URL で登録する
  • よくある詰まりポイント
  • ビルドエラー（型エラー・import パスの問題）
  • 環境変数が反映されない
  • ログイン後に 404 になる
  • まとめ
R

Rikuto (LAB)

非エンジニアが Claude Code × n8n × Supabase で副業システムを作り続ける実験記。 失敗も含めたリアルな一次情報を発信しています。

THINK YOU LAB 運営

関連記事

  • Next.js App Router の middleware で Supabase 認証ガードを作る — 実装コード全公開

    2026-04-15

  • Stripe Checkout を Next.js Server Action で実装する — Supabase Auth 連携つき

    2026-04-15

  • Supabase + Stripe Webhook で会員ステータスを自動更新する — Next.js App Router 実装

    2026-04-15

← ブログ一覧へ
X でシェアLINE でシェア
← 前の記事非エンジニアが Claude Code で n8n WF を 133 本作った話
次の記事 →Supabase RLS（行レベルセキュリティ）の書き方入門 — 実テーブルのポリシー例つき

目次

  • Vercel デプロイの全体フロー
  • GitHub と Vercel の連携
  • Vercel にプロジェクトをインポートする手順
  • Root Directory の設定（サブディレクトリ構成の場合）
  • THINK YOU LAB のリポジトリ構成
  • Vercel の「Root Directory」設定で `lms` を指定する
  • `vercel.json` の配置場所
  • 環境変数の設定
  • 設定が必要な環境変数5つ（THINK YOU LAB の例）
  • `NEXT_PUBLIC_` プレフィックスの意味
  • Production / Preview / Development の環境別設定
  • Supabase の Site URL を更新する（デプロイ後に必須）
  • Site URL が `localhost` のままだとログインが壊れる
  • Supabase ダッシュボードで更新する手順
  • デプロイ後チェックリスト
  • ビルドログを確認する
  • 本番 URL でログインが通るか確認する
  • Stripe Webhook エンドポイントを本番 URL で登録する
  • よくある詰まりポイント
  • ビルドエラー（型エラー・import パスの問題）
  • 環境変数が反映されない
  • ログイン後に 404 になる
  • まとめ
Think You Lab
このブログについて料金プランプライバシーポリシーお問い合わせ特定商取引法ログイン

© 2026 Think You Lab

この記事では THINK YOU LAB（https://think-you-lab.vercel.app）の実際のデプロイ設定を公開します。GitHub 連携からデプロイまでの手順、サブディレクトリ構成での Root Directory 設定、Supabase + Stripe の環境変数5つの意味と取得場所まで、一通りカバーします。

Vercel デプロイの全体フロー

GitHub リポジトリを用意する
  ↓
Vercel にプロジェクトをインポートする
  ↓
Root Directory を設定する（サブディレクトリ構成の場合）
  ↓
環境変数を設定する
  ↓
デプロイ実行 → 本番 URL が発行される
  ↓
Supabase の Site URL を Vercel URL に更新する
  ↓
デプロイ後チェック

GitHub と Vercel の連携

Vercel にプロジェクトをインポートする手順

  1. vercel.com にアクセスしてサインアップ・ログイン（GitHub アカウントで可）
  2. ダッシュボードの「Add New → Project」をクリック
  3. 「Import Git Repository」から対象のリポジトリを選択
  4. 権限を求められたら許可する

Vercel は GitHub のデフォルトブランチ（通常 main）への push を検知して自動でデプロイします。Pull Request を作ると Preview URL も自動で発行されます。

Root Directory の設定（サブディレクトリ構成の場合）

THINK YOU LAB のリポジトリ構成

think-you-lab/          ← リポジトリルート
├── lms/                ← Next.js アプリ（ここをデプロイする）
│   ├── app/
│   ├── lib/
│   ├── package.json
│   ├── next.config.ts
│   └── vercel.json
├── docs/
└── scripts/

リポジトリのルートに package.json がないため、Vercel はそのままではどのディレクトリをビルドすればいいか分かりません。Root Directory の設定が必要です。

Vercel の「Root Directory」設定で lms を指定する

プロジェクト設定（Import 画面または Settings → General）で「Root Directory」に lms を入力します。

Root Directory: lms

これを設定すると、Vercel は lms/ ディレクトリをプロジェクトルートとして扱い、lms/package.json を参照してビルドします。

vercel.json の配置場所

{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "outputDirectory": ".next"
}

vercel.json は Root Directory 直下（= lms/vercel.json）に置きます。リポジトリルートに置いても Root Directory が lms に設定されている場合は参照されません。

環境変数の設定

Vercel の「Settings → Environment Variables」から環境変数を設定します。

設定が必要な環境変数5つ（THINK YOU LAB の例）

1. NEXT_PUBLIC_SUPABASE_URL

  • 取得場所: Supabase ダッシュボード → Project Settings → API → Project URL
  • 例: https://xxxxxxxxxx.supabase.co
  • NEXT_PUBLIC_ がついているため、クライアントサイドのコードからも参照されます

2. NEXT_PUBLIC_SUPABASE_ANON_KEY

  • 取得場所: Supabase ダッシュボード → Project Settings → API → anon public
  • RLS（Row Level Security）が有効な状態での読み書きに使用します
  • クライアントサイドに露出しても問題ないキーですが、RLS が正しく設定されていることが前提です

3. SUPABASE_SERVICE_ROLE_KEY（絶対に NEXT_PUBLIC_ を付けない）

  • 取得場所: Supabase ダッシュボード → Project Settings → API → service_role secret

警告: このキーには NEXT_PUBLIC_ プレフィックスを絶対につけないでください。NEXT_PUBLIC_ をつけると Next.js がビルド時にクライアントサイドのコードにこのキーを埋め込みます。ブラウザの開発者ツールから誰でも確認できる状態になり、全ユーザーのデータが読み書き可能になります。

Webhook エンドポイント（サーバーサイドのみ）で使用するため、NEXT_PUBLIC_ なしにします。

RLS とサービスロールキーの詳細 → Supabase RLS の書き方入門

4. STRIPE_SECRET_KEY

  • 取得場所: Stripe ダッシュボード → 開発者 → API キー → 「シークレットキー」
  • 本番環境では sk_live_ で始まるキーを使います（テスト環境では sk_test_ のまま）
  • サーバーサイドのみで使用するため NEXT_PUBLIC_ なしで設定します

5. STRIPE_WEBHOOK_SECRET（Stripe 審査後に追加）

  • 取得場所: Stripe ダッシュボード → 開発者 → Webhook → 該当エンドポイント → 「署名シークレット」
  • Vercel にデプロイ → Stripe に本番 URL を登録 → シークレットを取得 → ここに追加 → Redeploy の順番で設定します
  • デプロイ直後には設定できないため、最初のデプロイ時は空欄でも構いません

NEXT_PUBLIC_ プレフィックスの意味

NEXT_PUBLIC_ がついた変数は、next build 時にクライアントサイドの JavaScript バンドルに静的に埋め込まれます。ブラウザで動くコードから参照できる代わりに、ビルド後に変更するには Redeploy が必要です。

NEXT_PUBLIC_ がない変数はサーバーサイド（API Route / Server Component / Server Action）でのみ参照できます。

Production / Preview / Development の環境別設定

| 環境 | 用途 | |------|------| | Production | main ブランチへの push でデプロイされる本番環境 | | Preview | Pull Request ごとに発行される Preview URL | | Development | vercel dev コマンドでのローカル開発 |

STRIPE_SECRET_KEY は Production には sk_live_ キー、Preview には sk_test_ キーを設定するといった使い分けができます。

Supabase の Site URL を更新する（デプロイ後に必須）

Site URL が localhost のままだとログインが壊れる

Supabase Auth の「Site URL」は、メール認証（magic link）のリダイレクト先 URL として使われます。初期設定では http://localhost:3000 になっているため、本番 URL にデプロイしてもログイン後に localhost にリダイレクトされてしまいます。

Supabase ダッシュボードで更新する手順

  1. Supabase ダッシュボードにログイン → 対象プロジェクトを選択
  2. 左メニューの「Authentication」→「URL Configuration」を開く
  3. Site URL を Vercel の本番 URL に変更する 
    https://think-you-lab.vercel.app
  4. Redirect URLs に以下を追加する 
    https://think-you-lab.vercel.app/**
https://*.vercel.app/**

https://*.vercel.app/** を追加することで Vercel の Preview URL でもログインが動作します。

デプロイ後チェックリスト

ビルドログを確認する

Vercel ダッシュボードの「Deployments」から最新のデプロイを開き、ビルドログを確認します。Error が含まれている行を探し、TypeScript の型エラーや import パスの問題がないか確認します。

ローカルで先に確認する: npm run build をローカルで実行してビルドエラーを事前に潰しておくと Vercel 上でのデバッグが楽になります。

本番 URL でログインが通るか確認する

  1. https://think-you-lab.vercel.app/login にアクセス
  2. メールアドレスを入力してログインを試みる
  3. メールが届いてリンクをクリック → 正しくリダイレクトされるか確認

Stripe Webhook エンドポイントを本番 URL で登録する

Stripe ダッシュボード → 「開発者」→「Webhook」→「エンドポイントを追加」

URL: https://think-you-lab.vercel.app/api/webhooks/stripe
受信イベント:
  - checkout.session.completed
  - invoice.payment_failed
  - customer.subscription.deleted

登録後に発行される「署名シークレット」を Vercel の環境変数 STRIPE_WEBHOOK_SECRET に追加し、Redeploy します。

Stripe Webhook の本番登録手順はこちら → Supabase + Stripe Webhook で会員ステータスを自動更新する

よくある詰まりポイント

ビルドエラー（型エラー・import パスの問題）

Vercel はデフォルトで TypeScript の型エラーをビルドエラーとして扱います。ローカルで npm run build が通ることを確認してから push してください。

@/ のパスエイリアスが解決されない場合は tsconfig.json の paths 設定を確認します。

環境変数が反映されない

NEXT_PUBLIC_ の変数はビルド時に埋め込まれます。Vercel の環境変数を変更した後は必ず Redeploy してください。変数を追加しただけでは既存のデプロイには反映されません。

ログイン後に 404 になる

Supabase の Site URL または Redirect URLs が未更新の可能性が高いです。上記の設定手順を確認してください。

まとめ

  • GitHub 連携からデプロイまでのステップバイステップ手順

  • Root Directory を lms に設定する方法（サブディレクトリ構成）

  • 環境変数5つの意味・取得場所・NEXT_PUBLIC_ の使い分け

  • SUPABASE_SERVICE_ROLE_KEY に NEXT_PUBLIC_ を付けてはいけない理由

  • Supabase の Site URL / Redirect URL を更新しないとログインが壊れる理由

  • Stripe Webhook の本番登録手順はこちら → Supabase + Stripe Webhook で会員ステータスを自動更新する

  • Supabase Auth の magic link 実装はこちら → Supabase magic link でログイン機能を実装する

Vercel へのデプロイは「環境変数の設定ミス」でほぼ全員が詰まります。Next.js + Supabase Vercel デプロイチェックリスト（環境変数設定確認込み）を LINE で無料配布中です。

→ Vercel デプロイチェックリストを受け取る（LINE登録・無料）

LINE 公式アカウント

Vercel × Supabase 本番設定チェックリストをLINEで無料配布中