Next.js 14 API无法访问：客户端请求报500内部服务器错误

核心问题 #

浏览器提示500内部服务器错误，根源是客户端请求格式与服务器解析逻辑不匹配，同时代码中还有几处语法/逻辑错误需要修正：

1. 请求格式不匹配（导致500的直接原因） #

客户端通过FormData发送请求，但服务器端调用await request.json()尝试解析JSON格式数据，这会触发解析失败，直接抛出异常引发500错误。

修复方案（二选一） #

方案A：客户端改为发送JSON格式数据

将FormData转换为JSON对象，并设置请求头Content-Type: application/json：

async function handleSubmit(e: FormEvent<HTMLFormElement>) {
  e.preventDefault()
  try {
    const formData = new FormData(e.currentTarget)
    // 将FormData转为普通对象
    const payload = Object.fromEntries(formData.entries())
    const response = await fetch('/api/about', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json', // 明确指定JSON格式
      },
      body: JSON.stringify(payload),
    })
    const data = await response.json()
    setData(data)
  } catch (error) {
    console.error("请求出错:", error)
  }
  router.refresh()
}

方案B：服务器端改为解析FormData

如果要保留FormData格式，服务器端需要用request.formData()解析：

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData();
    const description = formData.get('description'); // 对应表单元素的name属性
    console.log(description);

    return NextResponse.json({ description, status: 200 });
  } catch (error) {
    console.error("服务器解析出错:", error);
    return NextResponse.json({ error: "解析失败" }, { status: 500 });
  }
};

2. 客户端fetch响应处理错误 #

原代码中.then(res => res.json)是引用函数而非调用，无法获取响应数据，需改为：

// 错误写法
// .then(res => res.json)

// 正确写法
.then(res => res.json())
// 或者用await更直观
const data = await response.json()

3. 表单缺少输入元素 #

当前form标签为空，无法收集用户输入，需添加带name属性的输入控件（name属性对应FormData的键名）：

<form onSubmit={handleSubmit}>
  <Textarea 
    name="description" 
    placeholder="输入描述内容" 
    className="mb-4"
  />
  <Button type="submit">提交</Button>
</form>

4. 状态更新逻辑错误 #

原代码中setData(data)放在try/catch外部，但data是try块内部的局部变量，外部无法访问，会导致setData传入undefined，需将setData移到try块内：

try {
  // ... 请求逻辑
  const data = await response.json()
  setData(data) // 移到try内部
} catch (error) {
  console.error("请求出错:", error)
}
router.refresh()

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