Next.js 入門 #8：Vercelへのデプロイと次のステップ — 作ったものを世界に公開しよう

いよいよシリーズ最終回です。

ここまでで作ったサイトは localhost:3000 でしか見られません。

今回はそれを世界中からアクセスできる状態にします。

Next.jsのデプロイ先として最もおすすめなのが Vercel です。

Next.jsを作っている会社が運営しているホスティングサービスで、GitHubと連携するだけで自動デプロイが動きます。

個人プロジェクトなら無料枠で十分まかなえます。

デプロイ前の準備

デプロイ前のチェックリスト

以下がすべて揃っているか確認してから進めましょう。

• Gitがインストールされている → git --version で確認
• GitHubアカウントを持っている
• GitとGitHubの認証が済んでいる（SSH鍵またはGitHub CLI）
• Vercelアカウントを持っている

コードをGitHubにプッシュする

Vercelはリポジトリと連携してデプロイします。

まずコードをGitHubに上げましょう。

コマンド（create-next-app）を使ってプロジェクトを作成した場合、Next.jsは裏側で自動的に以下の2つをやってくれます。

• git init （Gitレポジトリの初期化）を自動で実行する
• .gitignore （Gitに含めないファイルを指定する設定ファイル）を自動で作る

そのため、フォルダが完成して移動した直後から、すでにGitでの管理（ファーストコミット直前の状態）が始まっています。

# プロジェクトフォルダでGitを初期化
 git init  
# ↑ 次の場合は不要
# ①npm install next react react-dom とインストールして作った場合
# ②自分のパソコンにそもそもGitがインストールされていなかった場合

# すべてのファイルをステージング
git add .

# 最初のコミット
git commit -m "first commit"

# プロジェクトフォルダでGitを初期化
 git init  
# ↑ 次の場合は不要
# ①npm install next react react-dom とインストールして作った場合
# ②自分のパソコンにそもそもGitがインストールされていなかった場合

# すべてのファイルをステージング
git add .

# 最初のコミット
git commit -m "first commit"

GitHubで新しいリポジトリを作成（ここではリポジトリ名をmy-first-nextjsとする）したら、その画面に表示されるコマンドを実行してプッシュします。

git remote add origin https://github.com/あなたのユーザー名/my-first-nextjs.git
git branch -M main
git push -u origin main

git remote add origin https://github.com/あなたのユーザー名/my-first-nextjs.git
git branch -M main
git push -u origin main

#リモートに登録したurlを一度削除
git remote rm origin 
# トークン付きのurlを登録
git remote set-url origin https://<あなたのトークン>@github.com/あなたのユーザー名/my-first-nextjs.git
git push -u origin main

#リモートに登録したurlを一度削除
git remote rm origin 
# トークン付きのurlを登録
git remote set-url origin https://<あなたのトークン>@github.com/あなたのユーザー名/my-first-nextjs.git
git push -u origin main

ビルドエラーがないか確認する

デプロイ前にローカルでビルドを走らせてエラーがないか確認しておきましょう。

npm run build

npm run build

エラーが出た場合はメッセージを読んで修正してからデプロイに進んでください。

よくあるエラーは TypeScript の型エラーや、"use client" が抜けているコンポーネントへの参照などです。

Vercelにデプロイする

1. Vercelアカウントを作成する

まだアカウントを作っていない人は、vercel.com にアクセスして、GitHubアカウントでサインアップします。

2. 新しいプロジェクトをインポートする

ダッシュボード右上の「Add New → Project」からGitHubリポジトリを選びます。

my-first-nextjs を選択しインポートしてください。

3. 設定を確認してデプロイする

Vercelは自動でNext.jsプロジェクトを検出します。

設定はデフォルトのままで問題ありません。

Framework Preset:  Next.js          ← 自動検出される
Build Command:     npm run build    ← そのままでOK
Output Directory:  .next            ← そのままでOK

Framework Preset:  Next.js          ← 自動検出される
Build Command:     npm run build    ← そのままでOK
Output Directory:  .next            ← そのままでOK

「Deploy」ボタンを押すとビルドが始まり、1〜2分でデプロイが完了します。

4. 公開URLにアクセスする

デプロイが完了すると https://your-project-name.vercel.app のようなURLが発行されます。

スマートフォンでアクセスしてみてください。

localhost:3000 で見ていたものが、そのままインターネット上に公開されています。

自動デプロイの仕組み

Vercelのもっとも便利な機能のひとつが 自動デプロイです。

コードを修正
  → git push
    → Vercelが自動でビルド＆デプロイ
      → 数分後に本番が更新される

コードを修正
  → git push
    → Vercelが自動でビルド＆デプロイ
      → 数分後に本番が更新される

main ブランチにプッシュするたびに自動でデプロイが走ります。

以後は手作業でデプロイする必要がありません。

また、main 以外のブランチにプッシュすると、プレビューURLが発行されます。

本番に影響を与えずに変更を確認できるので、チーム開発でも重宝します。

main ブランチ    → 本番URL（https://your-app.vercel.app）
feature ブランチ → プレビューURL（https://your-app-git-feature-xxx.vercel.app）

main ブランチ    → 本番URL（https://your-app.vercel.app）
feature ブランチ → プレビューURL（https://your-app-git-feature-xxx.vercel.app）

環境変数を設定する

APIキーやデータベースの接続情報など、コードに直接書きたくない情報は環境変数で管理します。

ローカルでの環境変数

プロジェクトのルートに .env.local ファイルを作ります。

# .env.local

API_KEY=your_secret_key_here
DATABASE_URL=postgresql://...
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# .env.local

API_KEY=your_secret_key_here
DATABASE_URL=postgresql://...
NEXT_PUBLIC_SITE_URL=http://localhost:3000

コードから読み込む方法はこうです。

// サーバー側でのみ読み込める（Server ComponentやRoute Handler）
const apiKey = process.env.API_KEY;

// クライアント側でも読み込める（NEXT_PUBLIC_ プレフィックスが必要）
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;

// サーバー側でのみ読み込める（Server ComponentやRoute Handler）
const apiKey = process.env.API_KEY;

// クライアント側でも読み込める（NEXT_PUBLIC_ プレフィックスが必要）
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;

重要： .env.local は絶対にGitにコミットしないでください。

.gitignore に最初から含まれているので通常は問題ありませんが、念のため確認しておきましょう。

Vercelでの環境変数

Vercelダッシュボードの「Settings → Environment Variables」から設定します。

ローカルの .env.local と同じキー名で登録すれば、デプロイ後のアプリから同じコードで読み込めます。

カスタムドメインを設定する（オプション）

your-app.vercel.app ではなく独自ドメインでアクセスできるようにするには、VercelダッシュボードでDNSの設定をします。

1. 「Settings → Domains」から使いたいドメインを追加
2. お名前.comなどのドメインレジストラでDNSレコードを設定（Vercelの画面に指示が表示される）
3. 数分〜数時間でSSL証明書も自動で発行される

Vercelは独自ドメインのSSL（HTTPS）を無料で自動設定してくれます。

デプロイ後に確認すること

本番環境でしか起きない問題が出ることがあります。

デプロイ直後に確認しておきたいポイントです。

Vercelのログを確認する

ダッシュボードの「Deployments」からビルドログやランタイムログを確認できます。

サーバー側のエラーはここに出ます。

パフォーマンスを確認する

ブラウザの開発者ツール（F12）→「Lighthouse」タブからパフォーマンス・SEO・アクセシビリティのスコアを計測できます。

Next.jsは最適化が標準でついてくるので、スコアは高く出やすいです。

シリーズを振り返る

全8記事を通じて学んだことをまとめます。

#1 Next.jsの概要と環境構築
   └── ReactとNext.jsの関係、SPA vs SSR、create-next-app

#2 ページとルーティング
   └── App Router、page.tsx、動的ルート[id]、Link、notFound()

#3 レイアウトとコンポーネント設計
   └── layout.tsx、ネストレイアウト、Server/Client Component

#4 データフェッチ
   └── async Server Component、loading.tsx、error.tsx、キャッシュ戦略、Suspense

#5 Route Handler
   └── route.ts、GET/POST、クエリパラメータ、動的エンドポイント

#6 Server Actions
   └── "use server"、useActionState、revalidatePath、redirect

#7 スタイリングとMetadata
   └── Tailwind CSS、レスポンシブ、metadata export、generateMetadata、OGP

#8 デプロイ（今回）
   └── GitHub連携、Vercel、自動デプロイ、環境変数、カスタムドメイン

#1 Next.jsの概要と環境構築
   └── ReactとNext.jsの関係、SPA vs SSR、create-next-app

#2 ページとルーティング
   └── App Router、page.tsx、動的ルート[id]、Link、notFound()

#3 レイアウトとコンポーネント設計
   └── layout.tsx、ネストレイアウト、Server/Client Component

#4 データフェッチ
   └── async Server Component、loading.tsx、error.tsx、キャッシュ戦略、Suspense

#5 Route Handler
   └── route.ts、GET/POST、クエリパラメータ、動的エンドポイント

#6 Server Actions
   └── "use server"、useActionState、revalidatePath、redirect

#7 スタイリングとMetadata
   └── Tailwind CSS、レスポンシブ、metadata export、generateMetadata、OGP

#8 デプロイ（今回）
   └── GitHub連携、Vercel、自動デプロイ、環境変数、カスタムドメイン

次に学ぶべきトピック

Next.jsの基本はすべて押さえました。

ここからは作りたいものに合わせて学習を広げていきましょう。

実践編という位置づけでこれらにも触れていく予定です。

認証（Auth）

ログイン・ログアウト機能を実装するには認証ライブラリが必要です。

• Auth.js（NextAuth.js） — GoogleやGitHubなどのOAuthログインを簡単に実装できる。Next.jsとの親和性が高く最もよく使われる
• Clerk — UIコンポーネントまで提供してくれるフルスタックな認証サービス。セットアップが非常に手軽

データベース

本番のアプリでデータを永続化するにはデータベースが必要です。

• Prisma — TypeScriptと相性のいいORMで、Next.jsと組み合わせる事例が非常に多い
• Supabase — PostgreSQLをバックエンドに持つBaaS。無料枠が充実していて個人開発に向いている
• Vercel Postgres / Neon — Vercelと親和性が高いサーバーレスPostgreSQL

テスト

コードの品質を担保するためのテストツールです。

• Vitest — Viteベースの高速なユニットテストフレームワーク
• Playwright — ブラウザを実際に動かしてテストするE2Eテストツール

状態管理

アプリが複雑になってきたら useState だけでは管理しにくくなります。

• Zustand — シンプルな書き味で人気が高いグローバル状態管理ライブラリ
• TanStack Query — サーバーのデータを効率よくフェッチ・キャッシュする仕組み。Client Componentでのデータ取得に特に有効

UIコンポーネントライブラリ

デザインを一から作るのが大変なときに役立ちます。

• shadcn/ui — Tailwindベースのコンポーネント集。コードをコピーして自分のプロジェクトに取り込むスタイルが特徴
• Radix UI — アクセシビリティに優れたヘッドレスUIコンポーネント

おわりに

このシリーズでは「Next.jsって何？」というところから始まり、ルーティング、データ取得、フォーム処理、スタイリング、そして本番デプロイまでを一通り体験しました。

最初のうちは「App Routerの仕組みがよくわからない」「Server ComponentとClient Componentの使い分けが難しい」と感じる場面もあったと思います。

それでも手を動かし続けることで、少しずつ感覚がつかめてくるはずです。

一番の近道は何かを実際に作ることです。ブログ、ToDoアプリ、お気に入りのAPIを使ったツール——なんでも構いません。

作る過程でわからないことが出てきたら、Next.jsの公式ドキュメントは非常に充実しているのでぜひ活用してください。

お疲れ様でした。

作ったサイトのURLをぜひ誰かに共有してみてください。🎉