如何在Next.js App Router中获取POST请求数据？

在App Router体系下，页面组件的context只能获取URL关联参数（比如searchParams、params），无法直接拿到POST提交的表单数据。你可以通过以下两种常用方案解决：

方法1：使用Server Actions（官方推荐） #

Server Actions是App Router内置的表单提交处理方案，无需额外创建路由文件，直接在页面组件内定义处理逻辑：

修改你的app/register/page.tsx代码：

// app/register/page.tsx
export default function Register() {
  // 定义Server Action，必须添加"use server"指令标记为服务器端执行
  async function handleSubmit(formData: FormData) {
    'use server'
    // 从FormData中提取表单字段
    const usr = formData.get('usr') as string
    const pwd = formData.get('pwd') as string

    // 这里可执行表单验证、数据存储等操作
    console.log('提交的用户名:', usr)
    console.log('提交的密码:', pwd)
  }

  return (
    // 将表单action直接绑定到Server Action函数
    <form action={handleSubmit}>
      <input name="usr" />
      <input name="pwd" type="password" />
      <button type="submit">Submit</button>
    </form>
  )
}

关键说明： #

• 'use server'指令确保函数在服务器端运行，避免敏感逻辑（比如密码验证）暴露给客户端
• 函数默认接收FormData对象作为参数，通过get()方法直接获取对应字段值
• 无需手动指定method="POST"，Server Actions默认使用POST请求

方法2：使用Route Handler #

如果需要更独立的请求处理逻辑，可以创建Route Handler文件专门接收POST请求：

1. 创建app/register/route.ts文件：

// app/register/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  // 解析请求中的表单数据
  const formData = await request.formData()
  const usr = formData.get('usr') as string
  const pwd = formData.get('pwd') as string

  // 执行验证、存储等业务逻辑
  console.log('POST提交数据:', { usr, pwd })

  // 返回处理结果，比如重定向到成功页面
  return NextResponse.redirect(new URL('/success', request.url))
}

2. 保持原页面的表单代码不变（确保method="POST"和action="/register"配置正确）：

// app/register/page.tsx
export default function Register() {
  return (
    <form method="POST" action="/register">
      <input name="usr" />
      <input name="pwd" type="password" />
      <button type="submit">Submit</button>
    </form>
  )
}

关键说明： #

• Route Handler文件必须命名为route.ts，放置在对应路由目录下
• 通过request.formData()方法解析POST请求携带的表单数据
• 处理完成后可通过NextResponse返回重定向、JSON等响应结果

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