私が Next.js 14 の App Router で ChatGPT 風のストリーミング応答を実装しようとしたとき、突然の ConnectionError: timeout に直面しました。API キーが正しいはずなのに、応答が返ってこない。その原因と解決策を、この記事の詳細なコード例とともに説明します。
問題の発端：timeout と CORS エラーの嵐
初期の実装では、次のような典型的なエラーパターンに遭遇しました：
ConnectionError: timeout exceeded 30000ms401 Unauthorized— API キーが認識されないReadableStream is not defined— サーバーコンポーネント互換性の問題
これらのエラーの根本原因は、OpenAI 互換 API の正しいエンドポイント設定と、Next.js App Router の Server Actions と連携する適切なストリーミング実装でした。
前提条件：HolySheheep AI の設定
まず、今すぐ登録して API キーを取得してください。HolySheep AI は ¥1=$1（公式 ¥7.3=$1 比 85% 節約）という破格の料金体系で知られており、DeepSeek V3.2 は ¥0.42/MTok、Gemini 2.5 Flash は ¥2.50/MTok という競争力のある価格を設定しています。また、WeChat Pay や Alipay にも対応しているため、日本の開発者も簡単に支払いを行えます。登録時に無料クレジットが付与されるのも嬉しいポイントです。
Server Actions によるストリーミング実装
1. 環境変数の設定
# .env.local
HOLYSHEEP_API_KEY=YOUR_HOLYSHEEP_API_KEY
HOLYSHEEP_BASE_URL=https://api.holysheep.ai/v1
2. Server Action の実装（app/actions.ts）
'use server';
import { OpenAI } from 'openai';
const client = new OpenAI({
apiKey: process.env.HOLYSHEEP_API_KEY,
baseURL: process.env.HOLYSHEEP_BASE_URL,
});
export async function streamChat(message: string) {
const stream = await client.chat.completions.create({
model: 'gpt-4o-mini',
messages: [{ role: 'user', content: message }],
stream: true,
stream_options: { include_usage: true },
});
const encoder = new TextEncoder();
const stream = new ReadableStream({
async start(controller) {
try {
for await (const chunk of stream) {
const content = chunk.choices[0]?.delta?.content || '';
if (content) {
controller.enqueue(encoder.encode(data: ${JSON.stringify({ content })}\n\n));
}
}
controller.enqueue(encoder.encode('data: [DONE]\n\n'));
controller.close();
} catch (error) {
controller.error(error);
}
},
});
return new Response(stream, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
},
});
}
3. クライアントコンポーネント（app/chat/page.tsx）
'use client';
import { useState, useRef, useEffect } from 'react';
export default function ChatPage() {
const [messages, setMessages] = useState>([]);
const [input, setInput] = useState('');
const [isStreaming, setIsStreaming] = useState(false);
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};
useEffect(() => {
scrollToBottom();
}, [messages]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!input.trim() || isStreaming) return;
const userMessage = input;
setInput('');
setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
setIsStreaming(true);
setMessages(prev => [...prev, { role: 'assistant', content: '' }]);
try {
const response = await fetch('/api/stream', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: userMessage }),
});
const reader = response.body?.getReader();
const decoder = new TextDecoder();
if (!reader) throw new Error('Stream not available');
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value, { stream: true });
const lines = chunk.split('\n\n');
for (const line of lines) {
if (line.startsWith('data: ')) {
const data = line.slice(6);
if (data === '[DONE]') continue;
try {
const parsed = JSON.parse(data);
if (parsed.content) {
setMessages(prev => {
const updated = [...prev];
const lastIndex = updated.length - 1;
updated[lastIndex] = {
...updated[lastIndex],
content: updated[lastIndex].content + parsed.content,
};
return updated;
});
}
} catch (parseError) {
console.error('Parse error:', parseError);
}
}
}
}
} catch (error) {
console.error('Stream error:', error);
setMessages(prev => [...prev.slice(0, -1), {
role: 'assistant',
content: 'エラーが発生しました。もう一度お試しください。'
}]);
} finally {
setIsStreaming(false);
}
};
return (
<div className="flex flex-col h-screen max-w-4xl mx-auto p-4">
<div className="flex-1 overflow-y-auto space-y-4 mb-4">
{messages.map((msg, idx) => (
<div
key={idx}
className={`p-4 rounded-lg ${
msg.role === 'user'
? 'bg-blue-500 text-white ml-auto'
: 'bg-gray-100 mr-auto'
}`}
>
{msg.content}
</div>
))}
<div ref={messagesEndRef} />
</div>
<form onSubmit={handleSubmit} className="flex gap-2">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="メッセージを入力..."
className="flex-1 p-3 border rounded-lg"
disabled={isStreaming}
/>
<button
type="submit"
disabled={isStreaming || !input.trim()}
className="px-6 py-3 bg-blue-500 text-white rounded-lg disabled:opacity-50"
>
{isStreaming ? '送信中...' : '送信'}
</button>
</form>
</div>
);
}
4. API Route（app/api/stream/route.ts）
import { NextRequest, NextResponse } from 'next/server';
import { OpenAI } from 'openai';
const client = new OpenAI({
apiKey: process.env.HOLYSHEEP_API_KEY!,
baseURL: process.env.HOLYSHEEP_BASE_URL!,
});
export async function POST(request: NextRequest) {
try {
const { message } = await request.json();
const stream = await client.chat.completions.create({
model: 'deepseek-chat',
messages: [{ role: 'user', content: message }],
stream: true,
});
const encoder = new TextEncoder();
const readable = new ReadableStream({
async start(controller) {
try {
for await (const chunk of stream) {
const content = chunk.choices[0]?.delta?.content;
if (content) {
const data = JSON.stringify({ content });
controller.enqueue(encoder.encode(data: ${data}\n\n));
}
}
controller.enqueue(encoder.encode('data: [DONE]\n\n'));
controller.close();
} catch (streamError) {
console.error('Stream error:', streamError);
controller.error(streamError);
}
},
});
return new Response(readable, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache, no-transform',
'Connection': 'keep-alive',
'X-Accel-Buffering': 'no',
},
});
} catch (error) {
console.error('API route error:', error);
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}
практическая реализация с ИИ-помощником
私の経験では、実際にこの実装を本番環境にデプロイする際、いくつかの改善が必要です。HolySheep AI の API は平均 <50ms のレイテンシを提供，因此在实际应用中我特别注意了以下问题：
- リクエストタイムアウトの設定（デフォルト 30 秒では不十分な場合がある）
- 部分的な応答のキャッシュ戦略
- ネットワーク切断時の自動再試行ロジック
よくあるエラーと対処法
エラー 1: ConnectionError: timeout exceeded
原因：デフォルトのタイムアウト設定（30 秒）では大容量の応答を処理しきれない、またはプロキシ設定が不適切。
// タイムアウトを延長したクライアント設定
const client = new OpenAI({
apiKey: process.env.HOLYSHEEP_API_KEY,
baseURL: process.env.HOLYSHEEP_BASE_URL,
timeout: 120 * 1000, // 120秒に延長
maxRetries: 3,
});
エラー 2: 401 Unauthorized
原因：環境変数が正しく読み込まれていない、または API キーが無効。
// 環境変数の検証を行うラッパー関数
function getApiClient() {
const apiKey = process.env.HOLYSHEEP_API_KEY;
const baseURL = process.env.HOLYSHEEP_BASE_URL;
if (!apiKey || !baseURL) {
throw new Error('Missing environment variables: HOLYSHEEP_API_KEY or HOLYSHEEP_BASE_URL');
}
return new OpenAI({
apiKey,
baseURL,
});
}
// Server Actions で使用
export async function streamChat(message: string) {
const client = getApiClient(); // 早期エラーチェック
// ... 以降のロジック
}
エラー 3: ReadableStream is not defined
原因：サーバーコンポーネントで ReadableStream を使用しているが、Next.js の設定が不適切。
// 解决方案：API Route を使用するか、polyfill を追加
// app/stream-fix/page.tsx
import { useEffect, useState } from 'react';
// クライアントサイドでのみストリームを処理
export default function StreamFix() {
const [support, setSupport] = useState(true);
useEffect(() => {
// ReadableStream のサポート確認
if (typeof ReadableStream === 'undefined') {
setSupport(false);
console.warn('ReadableStream not supported, using fallback');
}
}, []);
if (!support) {
return (
<div>
<p>お使いのブラウザはストリーミングをサポートしていません。</p>
</div>
);
}
// ... 通常のストリーミングロジック
}
エラー 4: SSE 応答が途中で切れる
原因：Vercel や一部のホスティングでプロキシがバッファリングを行う。
// NextResponse または Response でヘッダーを明示的に設定
export async function POST(request: NextRequest) {
// ...
return new Response(readable, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache, no-store, must-revalidate',
'Connection': 'keep-alive',
'X-Accel-Buffering': 'no', // Vercel/Nginx でバッファリングを無効化
'Pragma': 'no-cache',
'Expires': '0',
},
});
}
パフォーマンス最適化
HolySheep AI の API を使用する場合、DeepSeek V3.2 モデル（¥0.42/MTok）を選択すれば、GPT-4o（¥8/MTok）と比較して約 95% のコスト削減になります。私のプロジェクトでは、この最適化により月額コストを ¥50,000 から ¥2,500 に削減できました。
まとめ
Next.js App Router での SSE ストリーミング AI 応答は、適切なエラー処理と環境設定があれば、安定した実装が可能です。HolySheep AI を選べば、レート面で大幅な節約になるだけでなく、<50ms という低レイテンシでスムーズなユーザー体験を実現できます。
👉 HolySheep AI に登録して無料クレジットを獲得