Contents
Vercel Edge Functionsの有効化設定手順
Vercel Edge Functionsを使用するには、vercel.jsonファイルでの構成が不可欠です。以下に具体的な手順と注意点をまとめます。
vercel.jsonでの設定ファイル構成
- プロジェクトルートに
vercel.jsonを作成し、Edge Functionsのプロパティを追記します。 edgeFunctions配下に処理対象となるAPIエンドポイントを定義します。
|
1 2 3 4 5 6 7 8 9 |
{ "edgeFunctions": [ { "name": "example-edge-function", "entrypoint": "./src/app/api/example.edge.ts" } ] } |
注意：
entrypointのパスは、Next.js App Router環境では通常/src/app/api/配下に配置します。
Edge Function実行環境の確認方法
ローカルでのテストにはVercel CLIを使用します：
|
1 2 |
vercel dev |
この際、「Functions」タブでEdge Functionsが有効化されているかを確認してください。環境構成ミスは、早期に検出可能です。
App Router環境でのディレクトリ構造設計
Next.js 13以降ではApp Routerが標準となり、Edge Functionsとの連携によってさらに高速な処理が可能になります。以下のポイントを押さえてください。
pagesとappディレクトリの差分確認
- pagesディレクトリ（Next.js 12以前の仕様）：
/pages/api/配下にAPIエンドポイントを配置。 - appディレクトリ（App Router）：
/src/app/api/配下にEdge FunctionsやAPI Routeを配置。ファイル拡張子が.edge.tsと.tsで区別されます。
| 項目 | pagesディレクトリ | appディレクトリ |
|---|---|---|
| APIエンドポイントの配置 | /pages/api/ |
/src/app/api/ |
| Edge Functionsの拡張子 | .ts |
.edge.ts |
補足：App Routerでは、ファイル名に
.edge.tsを付けることでEdge Functionと判定されます。
Edge Functions専用ファイルの配置ルール
Edge Functionは/src/app/api/[エンドポイント].edge.tsのように配置します。ただし、Edge Functionsのみを扱うディレクトリを作成し、他の処理とは分離することが推奨されます。
Edge Functionファイルの作成規範
Edge Functionはexport default function handler()形式で実装されますが、Next.js API Routeと異なる制限があります。以下に実装手順を示します。
リクエストハンドラ関数の基本構造
|
1 2 3 4 5 6 |
// /src/app/api/example.edge.ts export default function handler(req: Request, env: Env) { return new Response("Hello from Edge Function!", { status: 200 }); } |
reqパラメータ：クライアントからのリクエスト情報（メソッド、ヘッダーなど）。envパラメータ：Vercelの環境変数を参照するためのオブジェクト。
環境変数の参照方法
Edge Functions内で使用する環境変数は、Vercelプロジェクト設定画面（Settings > Environment Variables）に登録し、以下のように取得します：
|
1 2 |
const API_KEY = env.API_SECRET_KEY; |
注意点：Edge Functionsではローカルの
.env.localファイルを読み込めません。必ずVercel側での設定が必要です。
データベース接続時の技術的制約
Edge Functionsはサーバーレス環境に実行されるため、データベースアクセスには注意が必要です。
Prisma ClientのEdge環境対応
Prisma ClientはEdge Functions環境では使用できません。主な理由：
- 接続先がサポートされていない（例：PostgreSQLやMySQLとの通信）
- 非同期処理に最適化されていない
代替案として以下の方法があります：
- データベースアクセスはクライアントサイドまたはサーバーサイドのAPIで処理し、Edge Functionsではキャッシュデータを利用する。
- Supabase Edge Functionsサポートを活用し、JavaScriptでの非同期通信を行う。
Supabase Edge Functionsサポート確認
SupabaseはEdge Functions環境でも利用可能です。ただし、以下の注意点があります：
- リアルタイム接続（PostgreSQL WebSocket）は使用不可
- リクエスト制限に注意し、APIキーを適切に管理する
パーソナライズ実装例と最適化ポイント
Edge Functionsではユーザーごとのパーソナライズ処理が可能で、特にFeature FlagやA/Bテストの実装が注目されています。
LaunchDarklyとの連携フロー
- LaunchDarkly SDKをEdge Functions内に導入
- リクエストからユーザーIDなどを取得し、Feature Flagを判定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { LDClient } from 'launchdarkly-js-client-sdk'; const client = new LDClient('YOUR_SDK_KEY'); export default async function handler(req: Request, env: Env) { const userId = req.headers.get('X-User-ID'); const flagValue = await client.boolVariation('feature-flag-name', { key: userId }); if (flagValue) { return new Response("Feature is enabled", { status: 200 }); } else { return new Response("Feature is disabled", { status: 200 }); } } |
性能への影響：SDKは軽量ですが、リクエストごとに非同期通信を行うため、処理時間を意識した設計が必要です。
Edge FunctionでのA/Bテスト実装
Edge Functionsでは、ユーザー属性に応じたA/Bテストを簡易的に実行できます。以下のようにグループ分けを行います：
|
1 2 3 4 5 6 7 8 |
const group = Math.random() < 0.5 ? 'groupA' : 'groupB'; if (group === 'groupA') { // Aバージョンの処理 } else { // Bバージョンの処理 } |
この方法では、Edge Functionsがグローバルな処理を高速に実行し、ユーザーごとの体験差別化が可能です。
実装時のチェックリスト
以下のポイントを順次確認してください：
- vercel.jsonでのEdge Functions設定
edgeFunctionsプロパティの配置場所と構文を確認- App Router環境でのディレクトリ構造
/src/app/api/配下に.edge.tsファイルを配置- データベース接続の回避策
- クライアント・サーバーサイド経由でDBアクセス
- パーソナライズ機能の導入
- Feature FlagやA/Bテストを活用
まとめ
Vercel Edge Functionsは、Next.jsプロジェクトにおける非同期処理の効率化とユーザー体験の最適化に役立ちます。記事で紹介した手順に従い、Edge Functionsを導入・運用することで、グローバルなパーソナライズや高速API処理が可能になります。実践手順を踏まえ、Edge Functionsの特性を活かしたアーキテクチャ設計を目指してください。