【2026年最新】Vercel完全ガイド｜無料で始めるモダンWeb開発

「Next.jsで作ったサイトを簡単にデプロイしたい」「無料でWebサイトを公開したい」

そんな悩みを解決するのがVercelです。

Vercelは、フロントエンド開発者に最も人気のあるホスティングプラットフォームの1つ。Git連携による自動デプロイ、無料SSL、CDNによる高速配信など、モダンWeb開発に必要な機能が揃っています。

この記事では、Vercelの基本から実践的な使い方まで、初心者にもわかりやすく解説します。

Vercelとは？

Vercelは、Next.jsの開発元であるVercel社が提供するホスティングプラットフォームです。

主な特徴

特徴	説明
Git連携デプロイ	GitHub/GitLabにプッシュするだけで自動デプロイ
プレビューデプロイ	PRごとにプレビューURLを自動生成
グローバルCDN	世界中のエッジサーバーから高速配信
無料SSL	HTTPSが自動で有効化
サーバーレス関数	API Routes/Edge Functionsが使える

対応フレームワーク

Vercelは様々なフレームワークに対応しています：

Next.js（最適化済み）
React
Vue.js / Nuxt
Astro
SvelteKit
Remix
静的サイト（HTML/CSS/JS）

Vercelの料金プラン

全プランでWAF（Webアプリケーションファイアウォール）とDDoS軽減が標準装備です。

無料プラン（Hobby）

個人的で非営利目的の利用なら無料プランで十分です。

項目	無料プラン
Edge Requests	月100万件
Fast Data Transfer	月100GB
Active CPU	月4時間
関数呼び出し	月100万件
カスタムファイアウォール規則	3個まで
チームメンバー	開発者1名のみ
用途制限	個人・非商用のみ

有料プラン

プラン	月額料金	主な違い
Pro	$20/ユーザー/月	商用利用可、月1000万Edge Requests（$32相当含む）、月1TB帯域（$350相当含む）、ファイアウォール規則40個、IPブロッキング100個、無制限ビューアシート
Enterprise	要問い合わせ	99.99% SLA、SCIM/ディレクトリ同期、WAF管理ルールセット、マルチリージョンコンピュート、監査ログ、SAML SSO

ポイント: Hobbyは「個人的で非営利目的」のみ。商用利用にはProプラン必須。Proには$32相当のEdge Requestsと$350相当の帯域幅が含まれるので、実質的な価値は高い。

Vercelの始め方

Step 1: アカウント作成

Vercel公式サイトにアクセス
「Start Deploying」をクリック
GitHub/GitLab/Bitbucketでログイン

Step 2: プロジェクトをインポート

# 既存プロジェクトをGitHubにプッシュ
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/repo.git
git push -u origin main

Vercelダッシュボードで「Import Project」→ リポジトリを選択するだけでデプロイが始まります。

Step 3: 環境変数の設定

# Vercelダッシュボード → Settings → Environment Variables
DATABASE_URL=postgresql://...
API_KEY=your-api-key

Next.jsとVercelの連携

VercelはNext.jsの開発元なので、最も相性が良いです。

自動最適化機能

// pages/index.js
import Image from 'next/image';

export default function Home() {
  return (
    <Image
      src="/hero.png"
      alt="Hero"
      width={1200}
      height={630}
      // Vercelが自動で画像を最適化
    />
  );
}

ISR（Incremental Static Regeneration）

// pages/posts/[id].js
export async function getStaticProps({ params }) {
  const post = await fetchPost(params.id);
  return {
    props: { post },
    revalidate: 60, // 60秒ごとに再生成
  };
}

Edge Functions

// pages/api/hello.js
export const config = {
  runtime: 'edge',
};

export default function handler(req) {
  return new Response('Hello from the Edge!');
}

プレビューデプロイの活用

Vercelの最大の魅力の1つがプレビューデプロイです。

仕組み

GitHubでPull Requestを作成
Vercelが自動でプレビュー環境を構築
一意のURLが発行される（例: my-app-git-feature-xxx.vercel.app）
PRにコメントでURLが通知される

メリット

レビューが楽になる: コードを見なくても動作確認できる
本番環境を汚さない: マージ前に問題を発見できる
クライアント確認: 開発中のサイトを関係者に共有しやすい

Vercel CLI

コマンドラインからVercelを操作できます。

インストール

npm install -g vercel

主なコマンド

# ログイン
vercel login

# プロジェクトをデプロイ
vercel

# 本番環境にデプロイ
vercel --prod

# 環境変数を確認
vercel env ls

# ログを確認
vercel logs

ローカルでの開発

# 環境変数を自動で読み込んで開発サーバー起動
vercel dev

Vercelのベストプラクティス

1. 環境変数の管理

Production: 本番用の値
Preview: ステージング用の値
Development: ローカル開発用の値

2. ビルドキャッシュの活用

// package.json
{
  "scripts": {
    "build": "next build"
  }
}

Vercelはnode_modulesや.next/cacheを自動でキャッシュし、ビルド時間を短縮します。

3. 画像最適化

// next.config.js
module.exports = {
  images: {
    domains: ['example.com'], // 外部画像を許可
  },
};

4. リダイレクト設定

// vercel.json
{
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true }
  ]
}

Vercel vs Netlify

よく比較される2つのサービスを比較します。

項目	Vercel	Netlify
Next.js対応	◎ 最適化済み	○ 対応
無料帯域幅	100GB/月	100GB/月
無料ビルド	100時間/月	300分/月
フォーム機能	なし	あり（無料100件）
料金（Pro）	$20/月	$19/月
Edge Functions	◎	○

選び方の目安:

Next.jsを使うなら → Vercel
静的サイト + フォームなら → Netlify

まとめ

Vercelは、モダンフロントエンド開発に最適なホスティングプラットフォームです。

Vercelがおすすめな人

Next.jsでWebアプリを開発している
Git連携で自動デプロイしたい
無料で高品質なホスティングを使いたい
チーム開発でプレビュー環境が欲しい