2026-04-30·実装·⏱ 約 4 分

Vercel で AI アプリをデプロイする ─ Next.js + AI SDK 入門

Vercel にデプロイする最短ルート。Next.js の AI SDK + AI Gateway で OpenAI/Claude を統合し、ストリーミングチャット UI を 1 時間で公開する手順。

Vercel は Next.js 開発元が運営する PaaS。AI アプリのデプロイが極めて簡単で、本サイト(統計ロードマップ)も Vercel 上で動いています。

なぜ Vercel?

ゼロコンフィグデプロイ: GitHub 連携で push したら自動デプロイ
プレビュー URL: PR ごとに URL 発行、レビューが楽
AI SDK 公式統合: ストリーミング・ tool calls がネイティブ
Edge / Fluid Compute: 低レイテンシ・低コスト
無料枠: 個人開発なら $0 で運用可能

セットアップ

Next.js プロジェクト作成

npx create-next-app@latest my-ai-app
cd my-ai-app
npm install ai @ai-sdk/openai

# Vercel CLI でログイン
npm i -g vercel
vercel login

ストリーミングチャット API

app/api/chat/route.ts

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export const runtime = 'edge';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: openai('gpt-4o-mini'),
    messages,
  });

  return result.toDataStreamResponse();
}

フロントエンド

app/page.tsx(useChat)

'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type='submit'>送信</button>
      </form>
    </div>
  );
}

AI Gateway で複数プロバイダ

Vercel AI Gateway を使うと OpenAI / Anthropic / Gemini を 同じインターフェース で切替可能。フォールバック・コスト管理にも便利。

プロバイダ切替

// OpenAI
model: 'openai/gpt-4o-mini'

// Anthropic
model: 'anthropic/claude-sonnet-4-6'

// Google
model: 'google/gemini-2.0-flash'

デプロイ

本番デプロイ

# 環境変数を Vercel に設定(API キー等)
vercel env add OPENAI_API_KEY

# プレビュー
vercel

# 本番
vercel --prod

GitHub と連携していれば、main ブランチへの push で自動本番デプロイ。

本サイトの実例

統計ロードマップ(本サイト)は Next.js 15 + Vercel で運用しています。完全静的(SSG)サイトなので、毎月の運用コストは 約 $0。詳しくは [Python 環境構築](/blog/python-setup-for-stats) も参照。