Next.js 13中如何接收URL编码的表单数据？

一、通过App Router路由处理函数接收表单数据 #

在Next.js 13的App Router模式下，你需要在项目的app/submit目录下创建route.ts文件，专门处理/submit路径的POST请求：

import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  // 解析URL编码的表单数据
  const formData = await request.formData();
  
  // 获取表单字段值
  const username = formData.get('username') as string;
  const password = formData.get('password') as string;

  // 此处添加你的业务逻辑，比如字段验证、数据存储等
  console.log('提交的用户名:', username);
  console.log('提交的密码:', password);

  // 返回响应，示例为重定向到成功页面
  return NextResponse.redirect(new URL('/success', request.url));
  // 若需返回JSON数据，可使用：return NextResponse.json({ username, status: 'success' });
}

二、在Middleware中处理表单数据的正确方式 #

你之前直接访问req.body无法获取数据，是因为NextRequest的body是未解析的ReadableStream，必须手动调用解析方法处理URL编码的表单数据：

import { NextRequest, NextResponse } from 'next/server';

export async function middleware(request: NextRequest) {
  // 仅匹配POST请求和/submit路径
  if (request.method === 'POST' && request.nextUrl.pathname === '/submit') {
    // 解析表单数据
    const formData = await request.formData();
    const username = formData.get('username') as string;
    const password = formData.get('password') as string;

    // 示例：添加前置验证逻辑
    if (!username || !password) {
      return NextResponse.json({ error: '用户名和密码不能为空' }, { status: 400 });
    }
  }

  // 继续执行后续路由逻辑
  return NextResponse.next();
}

// 指定中间件匹配的路径规则
export const config = {
  matcher: '/submit',
};

三、关键说明 #

• 无需额外配置：Next.js 13默认支持处理application/x-www-form-urlencoded格式的表单数据，直接使用request.formData()解析即可。
• formData()方法：该方法自动兼容URL编码和多部分表单（multipart/form-data）两种格式，适配你的表单场景。
• 类型处理：formData.get()返回值为FormDataEntryValue | null，建议先做非空判断，再断言为字符串类型。

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