如何在Next.js中通过POST方法从客户端组件表单获取数据到服务器组件？

你的代码存在几个关键问题，以下是修复方案：

客户端组件（Form/page.tsx）问题修复 #

表单提交时默认会触发页面刷新，这会中断异步请求，需要在提交处理函数中阻止默认行为：

"use client"
import { useState } from 'react';

export default function Form() {
  const [name, setName] = useState('')

  // 接收event参数，阻止默认跳转
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    try {
      const response = await fetch('/ReceiveName', {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ name }),
      });

      if (response.ok) {
        console.log('Name added successfully');
        setName('');
      } else {
        console.error('Error adding name');
      }
    } catch (error) {
      console.error('Error:', error);
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">Search</label>
        <input 
          id="name"
          name="name"
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

服务器路由（ReceiveName/route.tsx）问题修复 #

Next.js App Router的API路由需要遵循特定规范：导出对应HTTP方法的函数，正确解析请求体，并且返回响应：

import { NextResponse } from 'next/server'

// 导出POST方法处理函数，这是Next.js路由的要求
export async function POST(request: Request) {
    // 解析JSON格式的请求体
    const { name } = await request.json(); 

    console.log('Received name:', name);

    // 返回响应，必须添加return
    return NextResponse.status(200).json({ message: 'User added successfully' });
}

关键修复点说明 #

• 客户端：添加e.preventDefault()阻止表单默认提交行为，避免页面刷新
• 服务器：
  • 导出POST函数，而非自定义函数，Next.js会自动匹配对应HTTP请求方法
  • 使用await request.json()解析JSON请求体，直接取request.body得到的是流对象，无法直接使用
  • 添加return关键字返回响应，否则请求会超时

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