如何在Next.js中通过Prompt获取特定格式流式数据并展示到组件？

一、先搞定数据来源 #

不管是调用AI接口还是本地模拟，核心是让返回数据严格符合索引: data: 内容的结构：

1. 调用AI接口时的Prompt写法 #

如果是让GPT这类模型返回这种格式，直接把格式要求写死在Prompt里：

请严格按照以下格式返回结果，不要添加任何额外内容：
0: data: 内容1
1: data: 内容2

这样AI返回的文本就能直接用，不用额外处理格式。

2. 本地模拟/静态数据 #

测试阶段可以直接构造符合格式的字符串：

// 紧凑格式
const rawData = "0: data: testdata1 1: data: testdata2";
// 换行格式（可读性更好）
const rawData = `0: data: testdata1
1: data: testdata2`;

二、在Next.js组件里解析并渲染 #

拿到原始字符串后，解析成可展示的结构，分两种组件类型：

客户端组件（App Router） #

适合需要交互的场景，用useEffect请求数据：

"use client";

import { useState, useEffect } from "react";

export default function PromptDataDisplay() {
  const [dataList, setDataList] = useState([]);
  const [rawData, setRawData] = useState("");

  useEffect(() => {
    const getPromptData = async () => {
      // 替换成真实的API请求，比如调用OpenAI的API
      const response = await fetch("/api/get-prompt-data");
      const fetchedRawData = await response.text();
      setRawData(fetchedRawData);
      
      // 解析数据：按「数字:」分割条目，提取内容
      const parsedList = fetchedRawData.split(/\s+(?=\d+:)/).map(item => {
        const contentMatch = item.match(/\d+: data: (.+)/);
        return contentMatch ? contentMatch[1] : null;
      }).filter(Boolean);
      
      setDataList(parsedList);
    };

    getPromptData();
  }, []);

  return (
    <div className="p-4">
      <h3>Prompt返回的数据</h3>
      <ul className="mt-2 list-disc pl-6">
        {dataList.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ul>
      {/* 可选：展示原始格式 */}
      <div className="mt-4 p-3 bg-gray-50 rounded">
        <h4>原始格式预览</h4>
        <pre className="text-sm">{rawData}</pre>
      </div>
    </div>
  );
}

服务器组件（App Router） #

适合SEO友好的静态内容，直接异步获取数据：

// 服务器端请求数据的函数
async function fetchPromptData() {
  // 这里可以直接调用AI接口（服务器端调用更安全，不用暴露API密钥）
  const rawData = "0: data: testdata1 1: data: testdata2";
  
  // 解析逻辑和客户端一致
  return rawData.split(/\s+(?=\d+:)/).map(item => {
    const contentMatch = item.match(/\d+: data: (.+)/);
    return contentMatch ? contentMatch[1] : null;
  }).filter(Boolean);
}

export default async function ServerSideDataDisplay() {
  const dataList = await fetchPromptData();

  return (
    <div className="p-4">
      <h3>服务器端获取的Prompt数据</h3>
      <ul className="mt-2 list-disc pl-6">
        {dataList.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

三、避坑提醒 #

• Prompt要绝对明确：AI很容易跑题，一定要强调「严格按格式返回，不要加任何解释」，甚至可以加一句「不符合格式的回答无效」。
• 解析逻辑要容错：如果返回的字符串有换行、多余空格，用正则/\s+(?=\d+:)/分割比单纯按空格分割更靠谱，确保每个条目都是以数字索引开头。
• API密钥要藏好：如果调用AI接口，一定要在Next.js的API路由里处理，不要在客户端直接暴露密钥。

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