Vercel AI Edge Functionsとは？概要・利用シーンと2026年最新導入ガイド

2026年7月2日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 1. Vercel AI Edge Functions の概要と主な利用シーン
- 1.1 主な利用シーン
2 2. 開発前の準備 – 必要な環境と設定
3 3. @vercel/ai SDK の導入と基本的な使い方
4 4. Edge Function の実装手順
5 5. ローカルテストとデプロイフロー
6 6. パフォーマンス最適化と費用削減のベストプラクティス
7 7. まとめ

スポンサードリンク

1. Vercel AI Edge Functions の概要と主な利用シーン

Vercel が提供する Edge Runtime は、従来の Node.js ランタイムとは異なり、JavaScript（または TypeScript）コードを V8 エンジン上で実行します。その上に @vercel/ai SDK を組み合わせることで、外部 AI API への呼び出しやストリーミング応答のハンドリングがシンプルになります。

このセクションでは、エッジ上で活用できる代表的なパターンを紹介するとともに、導入するメリットを整理します。

主な利用シーン

以下は実務で特に有効とされる例です。各ケースは「低レイテンシ」＋「スケーラビリティ」の観点から Edge Functions が適合することが公式ドキュメントでも示唆されています（Vercel Docs – Edge Functions）。

リアルタイムチャットボット
ユーザー入力を受け取り、OpenAI／Anthropic などの Chat Completion API にストリーミングで問い合わせることで、文字が打ち込まれるたびに即座に返答できます。
画像生成プレビュー
生成した画像のサムネイルや低解像度版をエッジで作成し、CDN に直接配信することで、ブラウザ側の待機時間を最小化します。
フォームバリデーション・正規化
入力内容をエッジで検証し、不正なデータがバックエンドに届く前に弾くことで、サーバー負荷と帯域使用量を削減します。

ポイント：AI Edge Functions は「ユーザーに近い」ことが最大の強みです。レイテンシはネットワーク往復時間＋関数実行時間で決まり、通常は 100 ms 未満の応答が期待できます（ただし具体的な数値はトラフィックやモデルサイズによります）。

2. 開発前の準備 – 必要な環境と設定

本章では、プロジェクトを開始するために最低限揃えるべきものを順番に解説します。前提条件が整っていれば、以降の実装作業はスムーズに進められます。

2.1 Vercel アカウントとプロジェクト初期化

Vercel の無料プランでも Edge Functions は利用可能です。まずは公式サイトからアカウントを取得し、GitHub（または GitLab）リポジトリとの連携を行います。

npm i -g vercel          # Vercel CLI をグローバルインストール
vercel login              # アカウントにログイン
vercel init nextjs        # Next.js テンプレートでプロジェクト作成

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

vercel login # アカウントにログイン

vercel init nextjs # Next.js テンプレートでプロジェクト作成

vercel init は Next.js（現在の安定版）をベースにした雛形を生成し、デフォルトで Edge Runtime 用の設定が組み込まれます。
プロジェクト作成後は Vercel のダッシュボード上で「Deploy」ボタンを押すだけでプレビュー環境が自動的に構築されます。

2.2 Node.js と Next.js のバージョン要件

Vercel AI Edge Functions は Node.js 20（LTS）と Next.js 13 以降 を推奨しています。ローカル環境で以下のコマンドを実行し、正しいバージョンがインストールされているか確認してください。

# Node バージョン確認
node -v   # v20.x 系が表示されること

# Next.js と React のアップグレード（既存プロジェクトの場合）
npm i next@13 react@18 react-dom@18

# Node バージョン確認

node -v # v20.x 系が表示されること

# Next.js と React のアップグレード（既存プロジェクトの場合）

npm i next@13 react@18 react-dom@18

Next.js 13 では app/ ディレクトリと Edge Runtime API が本格的に提供されており、runtime: 'edge' を設定するだけで関数がエッジへデプロイされます。

2.3 外部 AI サービスの API キー管理

OpenAI、Anthropic、Claude など外部モデルへのアクセスにはシークレットキーが必要です。Vercel の Environment Variables に「Secret」タイプで登録し、コードからは process.env 経由で参照します。

環境変数名	用途
`OPENAI_API_KEY`	OpenAI API 認証
`ANTHROPIC_API_KEY`	Anthropic Claude 呼び出し用
`NEXT_PUBLIC_VERCEL_URL`	デバッグ時にローカル URL を取得（※公開変数）

注意：Edge Runtime ではサーバー側のファイルシステム (fs) が利用できないため、環境変数はビルド・ランタイム両方で自動的に注入されます。ローカル開発時は .env.local に同名キーを配置し、vercel dev が読み込む形です。

3. @vercel/ai SDK の導入と基本的な使い方

@vercel/ai は Vercel が提供する AI 向けユーティリティ集で、ストリーミングやエラーハンドリングを簡潔に記述できる関数が多数用意されています。ここではインストール手順と代表的な API を紹介します。

3.1 SDK のインストール

npm（または Yarn）でパッケージを追加し、TypeScript 環境でも型情報が自動取得できるようにします。

npm i @vercel/ai

1 2	npm i @vercel/ai

公式リファレンス：@vercel/ai SDK Docs

3.2 主なエクスポートと用途

以下は Edge Function 内で頻繁に使用する関数です。各関数は Promise ベースで、await と組み合わせてシンプルに扱えます。

関数	説明
`edge(request)`	Request オブジェクトを受け取り、ストリーミングレスポンス（SSE）を自動的にラップして返すヘルパー。
`createOpenAIStream(params)`	OpenAI の Chat Completion API へストリーミングリクエストを送信し、`ReadableStream` を取得するユーティリティ。
`jsonResponse(data, init?)`	任意の JSON データを `application/json` ヘッダー付きで返す簡易関数。

3.3 簡単なインポート例

import { edge, createOpenAIStream } from '@vercel/ai';

1 2	import { edge, createOpenAIStream } from '@vercel/ai';

ポイント：SDK は ESM（ES Modules）形式で提供されているため、type: "module" が設定されたプロジェクトでも問題なく動作します。

4. Edge Function の実装手順

ここからは実際にコードを書くフェーズです。ファイル構成・エクスポート方式・AI 推論ロジックの具体例を段階的に示します。

4.1 ファイル配置とランタイム指定

Vercel は pages/api（または app/api）配下のファイルを自動的に API エンドポイントとして認識します。Edge Function として扱うためには、エクスポート前に runtime = 'edge' を明示します。

// pages/api/chat.ts
export const runtime = 'edge';   // ← ここが Edge Runtime の指示

export default async function handler(req: Request) {
  // 実装は次のサブセクションで
}

// pages/api/chat.ts

export const runtime = 'edge'; // ← ここが Edge Runtime の指示

export default async function handler(req: Request) {

// 実装は次のサブセクションで

}

runtime が 'edge' の場合、Node.js 標準モジュール（例：fs, net）は利用できません。代わりに Web 標準 API（fetch, Headers, Response など）を使用します。

4.2 OpenAI Chat Completion をストリーミングで呼び出すサンプル

以下のコードは、クライアントから送られたプロンプトを OpenAI の Chat Completion エンドポイントに渡し、取得した SSE ストリームをそのままクライアントへ転送します。

import { edge, createOpenAIStream } from '@vercel/ai';

export const runtime = 'edge';
export default async function handler(req: Request) {
  // 1&#xfe0f;&#x20e3; リクエストボディからプロンプト取得（JSON パースは標準 API で完結）
  const { prompt } = await req.json();

  // 2&#xfe0f;&#x20e3; OpenAI へのリクエストパラメータ構築
  const openaiPayload = {
    model: 'gpt-4o-mini',          // 現時点で推奨される軽量モデル例
    messages: [{ role: 'user', content: prompt }],
    stream: true,                  // ストリーミングモード有効化
  };

  // 3&#xfe0f;&#x20e3; SDK ヘルパーでストリーム取得
  const openaiStream = await createOpenAIStream({
    apiKey: process.env.OPENAI_API_KEY!,
    payload: openaiPayload,
  });

  // 4&#xfe0f;&#x20e3; Edge のレスポンスとして返却（ヘッダーは必要に応じて調整）
  return edge(openaiStream);
}

import { edge, createOpenAIStream } from '@vercel/ai';

export const runtime = 'edge';

export default async function handler(req: Request) {

// 1️⃣ リクエストボディからプロンプト取得（JSON パースは標準 API で完結）

const { prompt } = await req.json();

// 2️⃣ OpenAI へのリクエストパラメータ構築

const openaiPayload = {

model: 'gpt-4o-mini', // 現時点で推奨される軽量モデル例

messages: [{ role: 'user', content: prompt }],

stream: true, // ストリーミングモード有効化

};

// 3️⃣ SDK ヘルパーでストリーム取得

const openaiStream = await createOpenAIStream({

apiKey: process.env.OPENAI_API_KEY!,

payload: openaiPayload,

});

// 4️⃣ Edge のレスポンスとして返却（ヘッダーは必要に応じて調整）

return edge(openaiStream);

}

コード解説

await req.json() は Edge Runtime が提供する標準の JSON パーサです。
model は利用可能なモデル名を公式ドキュメントで確認してください（例：gpt-4o-mini, claude-3-haiku-20240307）。
createOpenAIStream は内部で fetch と SSE パース処理を行い、ReadableStream を返します。
最後に edge() でラップするだけで、ブラウザ側は Server‑Sent Events (EventSource) と同様にリアルタイムでトークンを受信できます。

4.3 環境変数の安全な取得方法（Edge 特有）

Edge Runtime では process.env が 読み取り専用 かつ ビルド時に埋め込まれる 形式です。シークレットは Vercel のダッシュボードで「Secret」タイプとして登録し、以下のように参照します。

const openAiKey = process.env.OPENAI_API_KEY; // undefined になることは基本なし
if (!openAiKey) {
  throw new Error('OPENAI_API_KEY が設定されていません');
}

const openAiKey = process.env.OPENAI_API_KEY; // undefined になることは基本なし

if (!openAiKey) {

throw new Error('OPENAI_API_KEY が設定されていません');

}

ローカル開発時は .env.local に同名キーを記入し、vercel dev が自動的に注入します。
本番環境では Vercel が暗号化されたシークレットをエッジノードへ安全に配布するため、コード上でキーが露出する心配はありません。

要点：runtime='edge' と @vercel/ai の組み合わせだけで、数行のコードでリアルタイムチャット API が完成します。

5. ローカルテストとデプロイフロー

実装が完了したら、ローカル環境で動作確認を行い、その後 Vercel にデプロイしてプレビューや本番環境で検証します。

5.1 `vercel dev` でエッジランタイムをエミュレート

Vercel CLI の dev モードは、ローカルマシン上に Edge Runtime のサンドボックスを構築します。以下のコマンドで起動し、実装した API エンドポイントへリクエストを送ります。

vercel dev               # http://localhost:3000/api/chat が利用可能に
curl -X POST http://localhost:3000/api/chat \
  -H &quot;Content-Type: application/json&quot; \
  -d '{&quot;prompt&quot;:&quot;こんにちは&quot;}'

vercel dev # http://localhost:3000/api/chat が利用可能に

curl -X POST http://localhost:3000/api/chat \

-H "Content-Type: application/json" \

-d '{"prompt":"こんにちは"}'

コンソールにはリクエストヘッダーやレスポンスステータスがリアルタイムで表示され、デバッグ情報として活用できます。
.env.local に設定したシークレットは自動的に注入されるため、本番と同等の挙動をローカルで確認できます。

5.2 Git 連携によるプレビュー環境の自動作成

Vercel は GitHub（GitLab、Bitbucket）と連携すると、プッシュや Pull Request のたびに Preview Deploy を生成します。プレビュー URL は PR ごとに固有で、チーム全員がエッジ上の実際のレスポンスを確認できます。

vercel.json で Edge Function 固有の設定（例：タイムアウト、メモリ）を上書き可能です。

{
  &quot;functions&quot;: {
    &quot;api/**/*.ts&quot;: {
      &quot;memory&quot;: 128,
      &quot;maxDuration&quot;: 10   // 秒単位
    }
  }
}

{

"functions": {

"api/**/*.ts": {

"memory": 128,

"maxDuration": 10 // 秒単位

}

プレビュー環境でもシークレットは自動的に注入されるため、本番と同一条件でテストが行えます。

5.3 デプロイ後のパフォーマンス測定（Analytics）

Vercel のダッシュボード > Analytics タブでは、エッジ関数ごとの平均応答時間やコールドスタート回数をミリ秒単位で可視化できます。指標例は次の通りです。

指標	説明
p95 latency	95% のリクエストがこの値以下で完了したことを示す。目安として 200 ms 以下が快適な体感になる。
Cold Starts	関数が未ロード状態から初回実行される回数。頻繁に起きる場合は Warm‑up リクエストの導入やメモリ増加を検討。
Invocations	合計呼び出し回数。費用見積もりのベースとなる指標。

注意：Analytics のデータは実測値であり、過去 24 時間の平均が表示されます。パフォーマンス改善策を講じたら、再度計測して効果を確認しましょう。

6. パフォーマンス最適化と費用削減のベストプラクティス

エッジ関数は高速である反面、呼び出し回数やバンドルサイズがコストに直結します。以下では実務で役立つ具体的なテクニックをまとめます。

6.1 キャッシュ戦略とコールドスタート対策

Cache‑Control ヘッダー を活用すると、同一リクエストのレスポンスが CDN にキャッシュされ、次回以降は外部 AI API への呼び出しを省くことができます。

return new Response(stream, {
  headers: { 'Cache-Control': 'public, max-age=60, stale-while-revalidate=30' }
});

return new Response(stream, {

headers: { 'Cache-Control': 'public, max-age=60, stale-while-revalidate=30' }

});

max-age はキャッシュの有効期限（秒）です。短時間で内容が変わらないプロンプトやシステムメッセージに適しています。
stale-while-revalidate を設定すると、キャッシュが期限切れでも古いレスポンスを即座に返しつつバックグラウンドで新しいデータを取得できます。

コールドスタート緩和策
- デプロイ直後に軽量な「ping」リクエスト（例：GET /api/health）を自動実行させ、関数をウォーム状態に保つ。
- vercel.json の functions 設定で memory を 128 MB 以上にすると起動が速くなるケースがあります（公式ドキュメント参照）。

6.2 バンドルサイズの最適化（5 MB 上限）

Vercel の Edge Function は 最大 5 MB のバンドルサイズが上限です（公式リファレンス）。この制約を超えるとデプロイエラーになります。対策は次の通りです。

依存ライブラリの見直し
npm ls でインストールされているパッケージツリーを確認し、不要なものは削除。
大容量のユーティリティ（例：lodash 全体）ではなく、個別メソッドだけをインポートする。
Tree Shaking の徹底
tsconfig.json に "module": "ESNext" と "target": "ES2022" を設定し、Webpack/Vite が未使用コードを除去できるようにする。
動的インポート (import()) の活用
重いライブラリはリクエスト時に遅延ロードし、実行パス上で必要になったときだけ読み込む。

// 例：画像処理ライブラリを遅延ロード
if (needsResize) {
  const { resize } = await import('sharp');
  // ...処理続行
}

// 例：画像処理ライブラリを遅延ロード

if (needsResize) {

const { resize } = await import('sharp');

// ...処理続行

}

6.3 費用見積もりとモニタリング

Edge Functions の課金は「実行回数 × 実行時間（ms）」で算出されます。Analytics で取得した p95 latency と Invocations を掛け合わせることで、月間コストの概算が可能です。

例）月間リクエスト数 200,000 回、平均実行時間 120 ms
費用 ≈ (200,000 × 0.12 秒) × $0.000025/秒 = 約 $0.60

例）月間リクエスト数 200,000 回、平均実行時間 120 ms

費用 ≈ (200,000 × 0.12 秒) × $0.000025/秒 = 約 $0.60

ポイント：キャッシュヒット率が上がるほど外部 API 呼び出し回数が減り、コスト削減につながります。定期的にキャッシュ設定と実行統計を見直すことが重要です。

7. まとめ

Vercel AI Edge Functions は、エッジでの高速推論 と サーバーレスの柔軟性 を同時に提供する強力なプラットフォームです。本ガイドでは以下を網羅しました。

項目	内容
概要と利用シーン	低レイテンシが必要なチャット・画像生成・バリデーションなど
開発前準備	アカウント作成、Node.js 20＋Next.js 13 設定、シークレット管理
@vercel/ai SDK	インストール方法と主要ユーティリティ
実装手順	ファイル配置、runtime 指定、OpenAI ストリーミングサンプル
テスト・デプロイ	`vercel dev` エミュレーション、プレビュー自動作成、Analytics 計測
最適化と費用削減	キャッシュ戦略、コールドスタート対策、5 MB バンドル上限への対応

実践の第一歩として、上記手順に沿ってローカルで簡易チャット API を構築し、Vercel にプレビューデプロイしてみましょう。エッジ上で動く AI サービスは、ユーザー体験の向上だけでなく、スケーラビリティとコスト効率の両面でも大きなメリットをもたらします。

本稿の情報は 2024 年 11 月時点の Vercel 公式ドキュメントに基づいています。機能追加や仕様変更があった場合は、最新の公式リファレンスをご確認ください。

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Vercel

comment コメントをキャンセル

: Vercel

Vercel AI Cloud 2025年以降の新機能と導入メリット

Vercel AI CloudのAI駆動型自動最適化やMACH認定インフラが開発効率と運用コストに与える影響を解説。プロジェクト作成からデプロイメントプレビューまでの手順も掲載。

: Vercel

Vercelアカウント作成とNext.jsデプロイ手順

Vercelアカウントの作成からNext.jsプロジェクトの準備、CLIによるデプロイフロー、環境変数設定、カスタムドメイン設定までの詳細な手順を解説します。

: Vercel

Vercel vs Netlify: 2026 Serverless Platform Benchmarks

2026年のサーバーレスプラットフォーム選定では、VercelのEdge FunctionsとServerless Functionsの技術的アプローチが注目。静的サイト生成速度やグローバル配信性能を比較し、ベンチマークデータに基づく最適な選択方法を解説。

: Vercel

2025 AIクラウド比較: Vercel AI CloudとNext.jsのエッジコンピューティング最適化

Vercel AI CloudのNext.js連携によるエッジコンピューティング性能や、AWS Lambdaとの遅延・コスト比較を解説。企業規模別の導入事例も紹介。

: Vercel

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

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

Consul と Kubernetes の連携とハイブリッド構成ガイド

Envoy と Nginx の比較：アーキテクチャ・ベンチマーク・Kubernetes導入ガイド

Vercel AI Edge Functionsとは？概要・利用シーンと2026年最新導入ガイド

1. Vercel AI Edge Functions の概要と主な利用シーン

主な利用シーン

2. 開発前の準備 – 必要な環境と設定

2.1 Vercel アカウントとプロジェクト初期化

2.2 Node.js と Next.js のバージョン要件

2.3 外部 AI サービスの API キー管理

3. @vercel/ai SDK の導入と基本的な使い方

3.1 SDK のインストール

3.2 主なエクスポートと用途

3.3 簡単なインポート例

4. Edge Function の実装手順

4.1 ファイル配置とランタイム指定

4.2 OpenAI Chat Completion をストリーミングで呼び出すサンプル

コード解説

4.3 環境変数の安全な取得方法（Edge 特有）

5. ローカルテストとデプロイフロー

5.1 vercel dev でエッジランタイムをエミュレート

5.2 Git 連携によるプレビュー環境の自動作成

5.3 デプロイ後のパフォーマンス測定（Analytics）

6. パフォーマンス最適化と費用削減のベストプラクティス

6.1 キャッシュ戦略とコールドスタート対策

6.2 バンドルサイズの最適化（5 MB 上限）

6.3 費用見積もりとモニタリング

7. まとめ

1. Vercel AI Edge Functions の概要と主な利用シーン

5.1 `vercel dev` でエッジランタイムをエミュレート

6.2 バンドルサイズの最適化（5 MB 上限）