如何在Next.js 14页面展示Server Action获取的OpenAI API响应

你的代码核心问题是Server Action中获取的data是局部变量，组件渲染的JSX部分无法访问，而且Server Action提交后没有机制把响应数据传递回页面，导致页面无法展示结果。下面给出两种可行的修复方案：

方案一：客户端组件结合useFormState（推荐，无跳转） #

通过React的useFormState hook关联Server Action和组件状态，让Server Action的返回值直接更新组件状态，从而在页面上展示结果：

'use client';

import { useFormState } from 'react-dom';

async function getData(prevState: any, formData: FormData) {
  'use server';

  try {
    const res = await fetch(`${process.env.URL}/api/codelang`, {
      method: 'POST',
      body: JSON.stringify(formData.get('code')),
      headers: { 'Content-Type': 'application/json' },
      cache: 'no-cache',
    });

    if (!res.ok) throw new Error('请求失败');
  
    const data = await res.json();
    return data.choices; // 返回需要展示的响应数据
  } catch (error) {
    return { error: (error as Error).message }; // 捕获并返回错误信息
  }
}  

export default function Home() {
  // 初始化状态为null，将Server Action和状态绑定
  const [state, formAction] = useFormState(getData, null);

  return (
    <>
      <form action={formAction}>
        <input name="code" type="text" />
        <button>提交</button>
      </form>

      <pre>
        {/* 根据状态展示结果或错误 */}
        {state?.error ? state.error : JSON.stringify(state, null, 2)}
      </pre>
    </>
  );
}

方案二：Server Component结合重定向传参（无客户端JS） #

如果需要保持Home为纯Server Component，可以通过重定向将响应数据作为URL搜索参数传递，再在组件中读取展示：

import { redirect } from 'next/navigation';

async function getData(formData: FormData) {
  'use server';

  const res = await fetch(`${process.env.URL}/api/codelang`, {
    method: 'POST',
    body: JSON.stringify(formData.get('code')),
    headers: { 'Content-Type': 'application/json' },
    cache: 'no-cache',
  });

  if (!res.ok) throw new Error('请求失败');

  const data = await res.json();
  // 将响应数据编码后作为搜索参数传递
  const encodedResult = encodeURIComponent(JSON.stringify(data.choices));
  redirect(`/?result=${encodedResult}`);
}

export default async function Home({ searchParams }: { searchParams: { result?: string } }) {
  let result = null;
  if (searchParams.result) {
    // 解码并解析搜索参数中的数据
    result = JSON.parse(decodeURIComponent(searchParams.result));
  }

  return (
    <>
      <form action={getData}>
        <input name="code" type="text" />
        <button>提交</button>
      </form>

      <pre>{result ? JSON.stringify(result, null, 2) : ''}</pre>
    </>
  );
}

关键修复点说明 #

1. 作用域问题：原代码中getData内的data仅在函数内部有效，外部JSX无法访问，必须通过状态传递或参数传递将数据导出到组件渲染层。
2. 状态关联：useFormState是Next.js中专门用于Server Action的状态管理工具，能自动将Server Action的返回值同步到组件状态中，实现无跳转更新页面。

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