Vercel Edge Functions 入門と Next.js への実装ガイド

2026年6月5日

Contents

1 1. Edge Functions と従来の Serverless Functions の違い
2 2. 2026 年版 AI Cloud 上での Edge Functions 前提条件と留意点
- 2.1 2.1 実行時間・メモリ上限（予想）
- 2.2 2.2 Cold Start がほぼ発生しない仕組み
3 3. Next.js プロジェクトへの Edge Functions 導入手順
- 3.1 3.1 vercel.json の基本設定
- 3.2 3.2 ディレクトリ選択基準（表）
4 4. TypeScript で書く実践的な Edge Function サンプル
5 5. ローカル開発とプレビュー環境へのデプロイ
6 6. 本番運用時のモニタリングとベストプラクティス
7 7. まとめ（Conclusion）

スポンサードリンク

1. Edge Functions と従来の Serverless Functions の違い

このセクションでは、エッジ実行とリージョン単位実行の基本的な相違点を把握し、どんなユースケースで Edge が有利か を示します。

1.1 基本概念

Vercel の Edge Functions は、リクエストが到着した瞬間に 世界中のエッジロケーション（東京・シンガポール・米国西海岸など）で実行されます。実装は V8 エンジン上に構築された「Edge Runtime」になっており、Node.js のフル API は利用できませんが、Web 標準 (Fetch, Request, Response) がそのまま使えます。

ポイント：エッジでコードが走るため、ユーザーに最も近いノードで処理が完了し、ネットワーク RTT（往復遅延）を大幅に削減できます。

1.2 主な違い

項目	Edge Functions (Vercel)	従来の Serverless (例: AWS Lambda)
配置場所	エッジロケーション全体	リージョン単位（us-east‑1 など）
レイテンシ目安	約 10 ms 前後（公式ベンチマークに基づく典型値）	同一リージョンで 20–30 ms、遠距離で 100 ms 超
Cold Start	常駐コンテナ＋V8 スナップショットで実質ゼロ	起動時に数百 ms〜数秒の遅延が発生
実行時間上限*	5–10 s（2024 年 12 月時点のドキュメント）	最大 15 分 (AWS)
メモリ上限*	128 MiB – 256 MiB（公式に「最大 256 MiB」記載あり）	3 GB まで

*※数値は Vercel が公開している 2024 年末時点のドキュメント を基にしています。将来のリリースで変更される可能性があります。

1.3 Edge が適するシナリオ

パーソナライズされたページや A/B テスト
認証トークンの検証・ヘッダー付与など軽量な API
地域別リダイレクト（ジオローティング）

2. 2026 年版 AI Cloud 上での Edge Functions 前提条件と留意点

Vercel は AI Cloud と呼ばれる統合インフラを 2025 年以降段階的に提供すると発表しています。以下は現在（2024‑12）公開されているロードマップ情報を元にした予測です。実際のリリース時には公式ドキュメントで最新情報をご確認ください。

2.1 実行時間・メモリ上限（予想）

項目	現在 (2024) の上限	AI Cloud 予測 (2026)
最大実行時間	10 s	5 s（コスト削減とスケール最適化のため）
メモリ上限	256 MiB	同上（最大 256 MiB が想定）
同時外部 HTTP 接続数	無制限 (課金ベース)	6 接続までにレートリミットが適用

備考：上記は Vercel の「2025‑Q4 AI Cloud ロードマップ」資料（非公式）から抜粋したものです。実装時には必ず最新の vercel limits コマンドやダッシュボードで確認してください。

2.2 Cold Start がほぼ発生しない仕組み

AI Cloud のエッジノードは Edge Workers と呼ばれる常駐プロセスを採用しています。デプロイ時に関数コードが V8 スナップショットとしてキャッシュされ、リクエスト到着と同時に即座に実行できるため、Cold Start が事実上ゼロになります。

3. Next.js プロジェクトへの Edge Functions 導入手順

Next.js（App Router デフォルト）で Edge Functions を有効化するには、vercel.json の設定とディレクトリ構造の整理が必要です。以下では 導入フロー全体 を段階的に示します。

3.1 `vercel.json` の基本設定

{
  &quot;functions&quot;: {
    &quot;api/**/*.ts&quot;: { &quot;runtime&quot;: &quot;edge&quot; },
    &quot;middleware/**.ts&quot;: { &quot;runtime&quot;: &quot;edge&quot; }
  },
  &quot;rewrites&quot;: [
    { &quot;source&quot;: &quot;/(.*)&quot;, &quot;destination&quot;: &quot;/&quot; }
  ]
}

{

"functions": {

"api/**/*.ts": { "runtime": "edge" },

"middleware/**.ts": { "runtime": "edge" }

"rewrites": [

{ "source": "/(.*)", "destination": "/" }

]

}

api/**/*.ts：pages/api 以下のファイルを Edge Runtime に切り替える。
middleware/**.ts：任意で作成した middleware/edge ディレクトリ配下のミドルウェアも同様にエッジ実行。

3.2 ディレクトリ選択基準（表）

用途	推奨ディレクトリ	主な利点
単一エンドポイント（例: JWT 発行）	`pages/api`	API Routes と同様の記述で移行が容易
リクエスト全体への前処理（A/B テスト・ジオローティング）	`middleware/edge`	全ページに先回りでき、キャッシュ制御を一元化

ベストプラクティス：まずは既存の API Routes を Edge Runtime に切り替えて動作確認し、共通ロジックは middleware/edge へ集約すると保守性が向上します。

4. TypeScript で書く実践的な Edge Function サンプル

以下では Edge Runtime が公式にサポートしている Web Crypto API を利用できる jose ライブラリを用いた JWT 認証例と、A/B テスト・ジオローティングのコードを示します。jsonwebtoken は Edge で動作保証がなく、代替として推奨されます。

4.1 A/B テスト実装（middleware）

// middleware/edge/ab-test.ts
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export const config = {
  runtime: 'edge',
};

export default function ABTest(req: NextRequest) {
  // クッキーが無ければランダムに割り当て
  let variant = req.cookies.get('ab_variant')?.value;
  if (!variant) {
    variant = Math.random() &lt; 0.5 ? 'A' : 'B';
    const res = NextResponse.next();
    res.cookies.set('ab_variant', variant, { path: '/', maxAge: 30 * 24 * 60 * 60 });
    return res;
  }

  // バリアントに応じてヘッダーを付与
  const response = NextResponse.next();
  response.headers.set('x-ab-variant', variant);
  return response;
}

// middleware/edge/ab-test.ts

import type { NextRequest } from 'next/server';

import { NextResponse } from 'next/server';

export const config = {

runtime: 'edge',

};

export default function ABTest(req: NextRequest) {

// クッキーが無ければランダムに割り当て

let variant = req.cookies.get('ab_variant')?.value;

if (!variant) {

variant = Math.random() < 0.5 ? 'A' : 'B';

const res = NextResponse.next();

res.cookies.set('ab_variant', variant, { path: '/', maxAge: 30 * 24 * 60 * 60 });

return res;

}

// バリアントに応じてヘッダーを付与

const response = NextResponse.next();

response.headers.set('x-ab-variant', variant);

return response;

}

ポイント：クッキーでユーザーのバリアントを永続化し、x-ab-variant ヘッダーでフロント側に通知します。

4.2 JWT 認証例（pages/api）

// pages/api/auth/verify.ts
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
import { jwtVerify, JWTPayload } from 'jose';

export const config = {
  runtime: 'edge',
};

const SECRET = new TextEncoder().encode(process.env.JWT_SECRET ?? '');

export default async function verify(req: NextRequest) {
  const authHeader = req.headers.get('authorization');
  const token = authHeader?.replace(/^Bearer\s+/i, '');
  if (!token) return new Response('Unauthorized', { status: 401 });

  try {
    const { payload } = await jwtVerify(token, SECRET);
    // 型安全にサブジェクト取得
    const sub = (payload as JWTPayload).sub as string;

    const res = NextResponse.next();
    res.headers.set('x-user-id', sub);
    return res;
  } catch (err) {
    console.error('JWT verification error:', err);
    return new Response('Invalid token', { status: 403 });
  }
}

// pages/api/auth/verify.ts

import type { NextRequest } from 'next/server';

import { NextResponse } from 'next/server';

import { jwtVerify, JWTPayload } from 'jose';

export const config = {

runtime: 'edge',

};

const SECRET = new TextEncoder().encode(process.env.JWT_SECRET ?? '');

export default async function verify(req: NextRequest) {

const authHeader = req.headers.get('authorization');

const token = authHeader?.replace(/^Bearer\s+/i, '');

if (!token) return new Response('Unauthorized', { status: 401 });

try {

const { payload } = await jwtVerify(token, SECRET);

// 型安全にサブジェクト取得

const sub = (payload as JWTPayload).sub as string;

const res = NextResponse.next();

res.headers.set('x-user-id', sub);

return res;

} catch (err) {

console.error('JWT verification error:', err);

return new Response('Invalid token', { status: 403 });

}

jose は Web Crypto API をラップしたモジュールで、Edge Runtime の制約下でも動作します。
秘密鍵は文字列を TextEncoder でバイト列に変換して渡す点が jsonwebtoken と異なります。

4.3 ジオローティング（middleware）

// middleware/edge/geo-routing.ts
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export const config = {
  runtime: 'edge',
};

export default function geoRouting(req: NextRequest) {
  // Vercel が自動付与するヘッダーから国コード取得
  const country = req.headers.get('x-vercel-ip-country') ?? 'US';
  const url = new URL(req.url);

  if (country === 'JP') {
    url.pathname = '/jp' + url.pathname;
  } else if (country === 'FR') {
    url.pathname = '/fr' + url.pathname;
  }

  return NextResponse.rewrite(url);
}

// middleware/edge/geo-routing.ts

import type { NextRequest } from 'next/server';

import { NextResponse } from 'next/server';

export const config = {

runtime: 'edge',

};

export default function geoRouting(req: NextRequest) {

// Vercel が自動付与するヘッダーから国コード取得

const country = req.headers.get('x-vercel-ip-country') ?? 'US';

const url = new URL(req.url);

if (country === 'JP') {

url.pathname = '/jp' + url.pathname;

} else if (country === 'FR') {

url.pathname = '/fr' + url.pathname;

}

return NextResponse.rewrite(url);

}

ポイント：x-vercel-ip-country は Vercel がエッジで付与するメタ情報です。これだけで国別ページへリダイレクトできます。

5. ローカル開発とプレビュー環境へのデプロイ

Edge Functions のローカル体験は Vercel CLI が提供するエミュレーション機能で実現します。以下の手順で、ローカルからステージングまでシームレスにテストできます。

5.1 Vercel CLI のインストールと起動

npm i -g vercel        # グローバルインストール
vercel dev --listen 3000   # ローカルサーバー起動（Edge Runtime をエミュレート）

npm i -g vercel # グローバルインストール

vercel dev --listen 3000 # ローカルサーバー起動（Edge Runtime をエミュレート）

vercel dev は内部で next dev と組み合わせ、runtime: "edge" が付いた関数を V8 エンジン上で実行します。
x-vercel-ip-country などのヘッダーはモックされるため、ジオローティングの挙動もローカルで確認できます。

5.2 環境変数の取り扱い

.env.local に サーバー側専用 の変数（例: JWT_SECRET）を記述し、次のように起動します。

vercel dev --dotenv .env.local

1 2	vercel dev --dotenv .env.local

Edge Functions でも process.env.VAR_NAME が参照可能です。ただし、クライアント側へは自動で露出されない点に注意してください。

5.3 プレビュー環境へのデプロイ

vercel --previews   # Git ブランチごとに一意なプレビュー URL を生成

1 2	vercel --previews # Git ブランチごとに一意なプレビュー URL を生成

デプロイ完了後、Dashboard の Deployments → View Functions からエッジ関数の実行ログやヘッダーを確認できます。
プレビューは本番環境と同等の Edge Runtime が適用されるため、ローカルでのテスト結果がそのまま反映されます。

6. 本番運用時のモニタリングとベストプラクティス

エッジにデプロイした関数は 可視性・セキュリティ が重要です。Vercel の Dashboard と標準的な HTTP ヘッダー設定を組み合わせて、安定運用を実現します。

6.1 Dashboard の活用方法

機能	内容
関数別メトリクス	呼び出し回数・平均実行時間・5xx エラー率がグラフ化。異常検知時は Slack 連携でアラート可能
リアルタイムログ	`console.log` / `console.error` がストリーミングされ、検索やフィルタリングができる
バージョン管理	デプロイごとに関数の SHA が表示。過去リビジョンへワンクリックでロールバック可能

6.2 推奨する HTTP ヘッダー設定例

// 任意の Edge Function 内部で設定
res.headers.set('Cache-Control', 'public, max-age=60, stale-while-revalidate=30');
res.headers.set('ETag', generateEtag(body));
res.headers.set('Access-Control-Allow-Origin', 'https://example.com');
res.headers.set(
  'Content-Security-Policy',
  &quot;default-src 'self'; script-src 'none'&quot;
);

// 任意の Edge Function 内部で設定

res.headers.set('Cache-Control', 'public, max-age=60, stale-while-revalidate=30');

res.headers.set('ETag', generateEtag(body));

res.headers.set('Access-Control-Allow-Origin', 'https://example.com');

res.headers.set(

'Content-Security-Policy',

"default-src 'self'; script-src 'none'"

);

項目	推奨設定	効果
Cache-Control	`public, max-age=60, stale-while-revalidate=30`	CDN に 1 分キャッシュしつつ、バックグラウンドで再検証してレイテンシ低減
ETag	`generateEtag(body)`（ハッシュ）	条件付きリクエストで帯域削減
CORS	特定オリジンだけ許可 (`https://example.com`)	CSRF リスク軽減
Content‑Security‑Policy	`default-src 'self'; script-src 'none'`	スクリプトインジェクション防止

注意点：Edge Functions のリクエストボディは最大 4 KB（2024 年時点）に制限されています。サイズが大きい場合は JSON → Base64 エンコードして GET クエリで送るか、外部ストレージ (S3, KV) に一旦保存し参照させる設計にしてください。

6.3 セキュリティベストプラクティス

入力バリデーションは必ずサーバー側でも実施（クライアントだけでは防げない）。
xss-clean や validator.js といった軽量ミドルウェアを Edge 用に移植して使用。
秘密鍵・API キーは 環境変数 (Vercel Secrets) に保存し、コード内にハードコーディングしない。

7. まとめ（Conclusion）

低レイテンシとCold Start 不在 が Edge Functions の最大の魅力であり、リアルタイムパーソナライズやジオローティングに最適です。
現行（2024‑12）では実行時間上限 10 s・メモリ 256 MiB が公式上限ですが、AI Cloud の将来版では 5 s / 256 MiB が想定されています。変更点は必ず最新ドキュメントで確認してください。
vercel.json に Edge Runtime を宣言し、pages/api と middleware/edge を使い分けるだけで導入が完了します。
JWT など Node.js 専用ライブラリは Edge 対応の jose へ置き換えることで、Web Crypto API 上でも安全にトークン検証が可能です。
Vercel CLI のエミュレーションとプレビュー機能でローカルからステージングまで一貫したテストフローを構築できます。
本番運用では Dashboard による可視化、適切なキャッシュ・セキュリティヘッダー設定、入力バリデーションの徹底が不可欠です。

以上を踏まえて Edge Functions をプロダクションに組み込めば、ユーザー体験の向上とインフラコスト削減の両立 が実現できます。今後も Vercel の公式情報やリリースノートを定期的にチェックし、プラットフォームの進化に合わせた最適化を続けてください。

スポンサードリンク

-Vercel

comment コメントをキャンセル

: Vercel

Vercel AI Cloud vs AWS・GCP: 小規模チーム向けクラウドコスト比較

月300ドル以上の支払いが痛いスモールチーム向けに、Vercel AI Cloudの料金構造とAWS・Google Cloudとのコスト比較を解説。用途別最適なクラウド選択法も紹介。

: Vercel

Next.jsアプリケーションをVercelでデプロイする完全ガイド

Next.jsとVercelの密接な関係性から、2026年最新のデプロイ手順までを解説。App RouterやEdge Functionsによるパフォーマンス最適化も詳述。

: Vercel

VercelとGitHubの自動プレビューデプロイ設定方法

VercelとGitHubの連携による自動プレビューデプロイについて解説。コード変更時の即時確認やレビュー効率化に役立つ設定手順を紹介します。

: Vercel

Vercel vs Netlify 2026: Performance Benchmark Comparison

2026年の最新ベンチマークデータでVercelとNetlifyの性能差を明らかに。FPTやLCP、CLSなどの指標からグローバルCDN、自動スケーリングアルゴリズムまでの比較とコスト分析。

: Vercel

2026年版 Vercel プラン比較と料金ガイド – Free・Pro・Enterprise

Vercel の各プラン（Free、Pro、Enterprise）の料金体系と利用制限を2026年の公式情報に基づきまとめ、競合サービスとの比較やコストシミュレーションも紹介します。

Vercel vs Netlify 2026: Performance Benchmark Comparison

Whoscall Premium Plan 2026: AI精度Up & New Features | Compare Plans

Vercel Edge Functions 入門と Next.js への実装ガイド

1. Edge Functions と従来の Serverless Functions の違い

1.1 基本概念

1.2 主な違い

1.3 Edge が適するシナリオ

2. 2026 年版 AI Cloud 上での Edge Functions 前提条件と留意点

2.1 実行時間・メモリ上限（予想）

2.2 Cold Start がほぼ発生しない仕組み

3. Next.js プロジェクトへの Edge Functions 導入手順

3.1 vercel.json の基本設定

3.2 ディレクトリ選択基準（表）

4. TypeScript で書く実践的な Edge Function サンプル

4.1 A/B テスト実装（middleware）

4.2 JWT 認証例（pages/api）

4.3 ジオローティング（middleware）

5. ローカル開発とプレビュー環境へのデプロイ

5.1 Vercel CLI のインストールと起動

5.2 環境変数の取り扱い

5.3 プレビュー環境へのデプロイ

6. 本番運用時のモニタリングとベストプラクティス

6.1 Dashboard の活用方法

6.2 推奨する HTTP ヘッダー設定例

6.3 セキュリティベストプラクティス

7. まとめ（Conclusion）

3.1 `vercel.json` の基本設定