AI搭載アプリケーションを作りたい。でも「API」や「ストリーミング」という言葉を聞いただけで頭が混乱してしまう方は多いのではないでしょうか。この記事では、Next.js App Routerを使ってAIからのリアルタイム応答を 网页に表示する方法を、ゼロから丁寧に解説します。
私は以前、全く同じ壁に当たりました。しかしHolySheep AIのAPIとNext.jsを組み合わせることで、50ミリ秒未満の遅延で流れるようなAI応答を実装できました。この記事が、あなたの最初のAI機能実装を指針になれば幸いです。
そもそも「ストリーミング応答」って何？
通常のAI応答取得方法では、ユーザーが質問を送信してから、AIが全文を 完成させてから一度に表示されます。例えば「日本の首都は何ですか？」という質問に対して、AIが「東京都です」と完全に準備できるまで待機する必要があります。
ストリーミング応答は異なります。AIが текстを 生成しながら、少しずつ結果をクライアントに送信します。ユーザーは全文 完成を待たずに、最初の数文字から 阅读を開始できます。
実際の違いを見てみましょう
- 通常応答：質問 → 3秒待機 → 「東京都です」全文表示
- ストリーミング応答：質問 → 即時 → 「東」→「京都」→「です」と逐次表示
この技術적特性により、ユーザー体験が大幅に向上します。特に長い文章を生成する場面では、その效果が顕著です。
なぜNext.js App Routerなのか
Next.jsはReactベースのフレームワークで、2023年に大幅に刷新された「App Router」架构を導入しました。この新架构は以下の 이유로AIストリーミングに最適です：
- サーバーコンポーネント対応：AI APIとの通信をサーバー側で安全に行える
- React Server Components：大量データをクライアントに 전송する前に処理できる
- 組み込みのStreamingサポート：特別な設定なしでストリーミング応答を実装できる
準備するもの
以下の环境が整っていれば、すぐに始められます：
- Node.js 18.17以降がインストールされた电脑
- コードを書くエディタ（Visual Studio Code推奨）
- HolySheep AIのAPIキー（免费登録でクレジット付与）
💡 スクリーンショット_hint：Node.jsのバージョンはターミナルで「node -v」と入力して確認できます。18.17 미만の場合は、公式HPから最新版をインストールしてください。
プロジェクト作成：从ゼロ开始的第一歩
ステップ1：新規プロジェクトの作成
ターミナル（コマンドプロンプト）を開き、好きな場所にプロジェクトフォルダを作成します。
npx create-next-app@latest ai-streaming-app
--typescript
--tailwind
--eslint
--app
--src-dir
--import-alias "@/*"
--use-npm上記のコマンドを実行すると、Next.js App Router架构のプロジェクトが自动生成されます。「ai-streaming-app」の部分是自分の好きなプロジェクト名で置き換えてください。
💡 スクリーンショット_hint：いくつか質問が表示されますが、Defaultsを使う場合は全てEnterキーを押してください。全て「Yes」또는デフォルト値で进めると、素早くセットアップが完了します。
ステップ2：プロジェクトフォルダに移動
cd ai-streaming-app
npm installこれてプロジェクトの基本 setup は完了です。簡単ですね！
HolySheep AI APIキーの取得
AIと通信するには、まずAPIキーと呼ばれる「合键」が必要です。HolySheep AIの公式サイトから登録すると、免费クレジットが付与されます。
登録後の步骤：
- ダッシュボードにログインする
- 「API Keys」メニューをクリックする
- 「Create New Key」ボタンをクリックする
- 生成されたキーをコピーして大切に保管する
⚠️ 重要：APIキーは他没有共有しないでください。キーを含むファイルをGitHubなどの公开場所に上げることも避けてください。
環境変数の設定
プロジェクトのルートフォルダに「.env.local」というファイルを作成し、以下の内容を記述します：
HOLYSHEEP_API_KEY=YOUR_HOLYSHEEP_API_KEY「YOUR_HOLYSHEEP_API_KEY」の部分を、先ほどコピーしたActualなキーに置き換えてください。
💡 スクリーンショット_hint：.env.localファイルは 숨어있는ファイル입니다。Visual Studio Codeを使っている場合は、左側のファイル一覧から確認できます。表示されていない場合は、「表示」→「隠しファイルを表示」をチェックしてください。
核心実装：ストリーミング応答のコード
サーバーコンポーネントでAPI通信
appフォルダの中に「api」フォルダ、その中に「chat」フォルダを作成します。そして「route.ts」というファイルを作成してください。
// app/api/chat/route.ts
import { NextRequest } from "next/server";
import OpenAI from "openai";
const client = new OpenAI({
apiKey: process.env.HOLYSHEEP_API_KEY,
baseURL: "https://api.holysheep.ai/v1",
});
export async function POST(request: NextRequest) {
try {
const { messages } = await request.json();
const stream = await client.chat.completions.create({
model: "gpt-4.1",
messages: messages,
stream: true,
});
const encoder = new TextEncoder();
const stream = new ReadableStream({
async start(controller) {
for await (const chunk of stream) {
const content = chunk.choices[0]?.delta?.content || "";
if (content) {
controller.enqueue(encoder.encode(content));
}
}
controller.close();
},
});
return new Response(stream, {
headers: {
"Content-Type": "text/plain; charset=utf-8",
"Transfer-Encoding": "chunked",
},
});
} catch (error) {
console.error("API Error:", error);
return Response.json(
{ error: "エラーが発生しました" },
{ status: 500 }
);
}
}このコードのポイント：
- baseURLにHolySheep AIのエンドポイントを指定
- stream: trueでストリーミングモードを有効化
- ReadableStreamでAPIからのchunked応答をリアルタイム転送
クライアントコンポーネントで応答を表示
appフォルダのpage.tsxを 以下のように書き換えます：
// app/page.tsx
"use client";
import { useState, useRef, useEffect } from "react";
interface Message {
role: "user" | "assistant";
content: string;
}
export default function Home() {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [streamedResponse, setStreamedResponse] = useState("");
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
useEffect(() => {
scrollToBottom();
}, [messages, streamedResponse]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!input.trim() || isLoading) return;
const userMessage: Message = { role: "user", content: input };
setMessages((prev) => [...prev, userMessage]);
setInput("");
setIsLoading(true);
setStreamedResponse("");
try {
const response = await fetch("/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
messages: [...messages, userMessage],
}),
});
if (!response.ok) {
throw new Error("APIリクエストに失敗しました");
}
const reader = response.body?.getReader();
const decoder = new TextDecoder();
let fullResponse = "";
if (reader) {
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
fullResponse += chunk;
setStreamedResponse(fullResponse);
}
}
setMessages((prev) => [
...prev,
{ role: "assistant", content: fullResponse },
]);
} catch (error) {
console.error("Error:", error);
alert("エラーが発生しました。もう一度お試しください。");
} finally {
setIsLoading(false);
setStreamedResponse("");
}
};
return (
AIチャットデモ
{messages.map((message, index) => (
{message.content}
))}
{streamedResponse && (
{streamedResponse}
▊
)}
);
} 💡 スクリーンショット_hint：コードを保存後、http://localhost:3000 にアクセスすると、下の图のようなチャットインターフェースが表示されるはずです。テキスト入力欄に何かを入力して试试吧！
動作確認：从初心者のためのトラブルシューティング
以下のコマンドで開発サーバーを起動します：
npm run devブラウザで http://localhost:3000 を開いて、AIと 대화してみましょう。何か文章を入力すると、AIが少しずつ응답を生成していくのが見えるはずです。
よくあるエラーと対処法
エラー1：APIキーが認識されない
Error: No API key provided
原因：環境変数の読み込みに失敗している
解決策：.env.localファイルを再確認し、プロセスの再起動を行うNext.jsの開発サーバーを.env.local作成後に起動した場合、環境変数が反映されません。
# 開発サーバーを停止（Ctrl+C）
.env.localの内容を再確認
サーバーを再起動
npm run devエラー2：CORS関連のエラー
Failed to fetch... NetworkError when attempting to fetch resource
原因：API routeへの直接アクセス時のCORS設定問題
解決策：route.tsに適切なヘッダーを追加するnext.config.jsに以下を追加してください：
/** @type {import('next').NextConfig} */
const nextConfig = {
async headers() {
return [
{
source: "/api/:path*",
headers: [
{ key: "Access-Control-Allow-Origin", value: "*" },
{ key: "Access-Control-Allow-Methods", value: "GET, POST, OPTIONS" },
{ key: "Access-Control-Allow-Headers", value: "Content-Type" },
],
},
];
},
};
module.exports = nextConfig;エラー3：ストリーミング応答が途中で切れる
原因：ネットワーク切断またはタイムアウト
解決策：リクエスト設定の調整とエラーハンドリングの追加route.tsのcatchブロックを強化します：
export async function POST(request: NextRequest) {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 60000);
try {
// ... API呼び出しのコード ...
clearTimeout(timeout);
return new Response(stream, {
headers: {
"Content-Type": "text/plain; charset=utf-8",
"X-Content-Type-Options": "nosniff",
},
});
} catch (error) {
clearTimeout(timeout);
console.error("Streaming Error:", error);
return Response.json(
{ error: "ストリーミング中にエラーが発生しました" },
{ status: 500 }
);
}
}エラー4：モデル명이無効
Error: Model not found
原因：指定したモデル名がHolySheep AIでサポートされていない
解決策：利用可能なモデル名に置き換える現在HolySheep AIで利用可能なモデル：
- gpt-4.1（GPT-4.1）
- claude-sonnet-4.5（Claude Sonnet 4.5）
- gemini-2.5-flash（Gemini 2.5 Flash）
- deepseek-v3.2（DeepSeek V3.2）
発展編：もう少し実務的な例
システムプロンプトの設定
AIの性格やふるまいを指定したい場合は、messages配列の先頭にシステムメッセージを追加します：
const systemMessage = {
role: "system",
content: "あなたは役に立つアシスタントです。日本語で丁寧に回答してください。",
};
const response = await fetch("/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
messages: [systemMessage, ...messages, userMessage],
}),
});温度パラメータの調整
AIの回答の「創造性」を調整したい場合は、temperatureパラメータを使います：
const stream = await client.chat.completions.create({
model: "gpt-4.1",
messages: messages,
stream: true,
temperature: 0.7, // 0.0-2.0の範囲、低いほど一貫性が高く、高いほど創造的
});料金的比较：HolySheep AIの экономичность
AI APIのコストはサービス提供者によって大きく異なります。以下は主要なAIサービスの料金比較です：
| サービス | モデル | 入力 ($/MTok) | 出力 ($/MTok) | 特徴 |
|---|---|---|---|---|
| HolySheep AI | GPT-4.1 | $4 | $8 | ¥1=$1、レート85%節約 |
| HolySheep AI | Claude Sonnet 4.5 | $7.50 | $15 | WeChat Pay/Alipay対応 |
| HolySheep AI | Gemini 2.5 Flash | $1.25 | $2.50 | <50msレイテンシ |
| HolySheep AI | DeepSeek V3.2 | $0.21 | $0.42 | 超低コスト處理 |
| OpenAI | GPT-4 | $30 | $60 | 標準料金 |
| Anthropic | Claude 3.5 | $15 | $75 | 高い出力コスト |
表から分かる通り、HolySheep AI是利用規約の中で最も экономичный な選択肢の一つです。特にDeepSeek V3.2は月額利用コストを大幅に削減でき、個人開発者やスタートアップにとって魅力的です。
まとめ：実装のポイント振り返り
今回の記事で学习了内容を確認しましょう：
- Next.js App Routerのプロジェクト作成方法
- API routeを使ったサーバーサイドのストリーミング実装
- useEffectとReadableStreamを活用したクライアントサイドの実装
- エラー処理の基本的なパターン
- HolySheep AIを活用したコスト 최적화 の方法
ストリーミング応答は、一见复杂そうに見えますが、基本的なパターンを理解すればどなたにでも実装可能です。私の経験でも、この基本的な架构を押さえていれば 응용 프로그램は確実に身につきます。
次のステップ
この基本をマスターしたら、以下のような発展に挑戦してみてください：
- 複数のAIモデルを簡単に切换できる UI の作成
- チャット履歴のローカル保存機能
- Markdown 形式での応答表示対応
- タイピング效果の追加で更なる使いやすさの向上
HolySheep AIなら、今すぐ登録で無料クレジットが手に入るので、自分のプロジェクトで 实验してみたい場合に最適な出発点になります。
HolySheep AIは、レート¥1=$1（公式¥7.3=$1比85%節約）という圧倒的なコスト优势と、WeChat Pay/Alipay対応というお支払い面の柔らかさで個人開発者に嬉しいサービス内容です。DeepSeek V3.2なら$0.42/MTokという破格の安さで大量処理也能的经济的に 实现可能です。
是非、この記事を足がかりに楽しいAIアプリケーションを作ってください！