如何在Next.js中用streamText实现Gemini响应前端流式传输？

问题描述 #

使用Next.js结合ai与@ai-sdk/google构建聊天机器人，对接Gemini-1.5-flash-8b模型，后端通过streamText获取到了流式响应（日志能逐段打印textPart），但前端通过useChat钩子接收时，只能等到完整响应生成后一次性显示，丢失了实时流式效果。

错误原因 #

后端API路由中提前消费了流式响应的内容：

for await (const textPart of result.textStream) {
  console.log(textPart); // 这段代码会把整个流的内容全部读取完毕
}

当调用result.toDataStreamResponse()时，流式响应的内容已经被消耗殆尽，后端只能返回完整的聚合结果，导致前端无法实时接收分段内容。

修复方案 #

删除后端中消费textStream的循环代码，直接返回流式响应对象即可，streamText生成的结果本身已经封装了可直接返回给前端的流式响应。

修改后的后端API代码：

import { createGoogleGenerativeAI } from "@ai-sdk/google";
import { streamText } from "ai";
import { NextRequest, NextResponse } from "next/server";

const google = createGoogleGenerativeAI({
  apiKey: process.env.GOOGLE_GENERATIVE_AI_API_KEY,
});

const model = google("gemini-1.5-flash-8b");

export async function POST(req: NextRequest) {
  try {
    const { messages } = await req.json();
    console.log(messages);

    const result = streamText({
      model: model,
      system: "You are a helpful assistant.",
      prompt: messages[0].content,
    });

    // 移除消费textStream的循环，避免提前耗尽流
    return result.toDataStreamResponse(); // 直接返回流式响应
  } catch (error) {
    console.error(error);
    return new NextResponse("Error processing request", { status: 500 });
  }
}

前端无需修改 #

当前使用的useChat钩子完全支持处理后端返回的流式响应，只要后端正确返回SSE（Server-Sent Events）格式的流式数据，useChat会自动监听并实时更新messages状态，实现前端逐字/逐段显示的效果。

验证效果 #

修改后，后端不会提前消费流式内容，而是直接将模型的实时响应分段推送给前端，前端的MessageList组件会随着messages的实时更新，逐步显示AI的回复内容。

内容的提问来源于stack exchange，提问作者ninad baruah