NextJS 14.2.3注册成功后NextResponse.redirect()不生效问题

为什么POST请求返回307但页面不跳转？ #

没错，问题根源就是这是POST请求导致的：

• 如果你用fetch/axios等JS方式提交表单（AJAX请求），浏览器收到307/308重定向响应时，只会自动跟随重定向再发送一次POST请求，不会触发页面跳转——因为AJAX请求的重定向是在后台完成的，浏览器不会更新当前页面。
• 只有浏览器原生的表单提交（没有JS拦截提交行为），才会在收到307重定向时自动跳转到目标页面。

NextJS 14中注册成功后的正确重定向方案 #

根据表单提交方式，分两种场景处理：

场景1：使用NextJS服务器组件表单（推荐） #

NextJS 14推荐用Server Action处理表单提交，这种方式下直接用next/navigation提供的redirect函数即可自动完成页面跳转，无需手动处理前端逻辑：

1. 定义Server Action：

// app/actions/register.ts
'use server';
import { redirect } from 'next/navigation';
import { User } from '@/models/User'; // 你的Sequelize模型

export async function registerAction(formData: FormData) {
  // 解析表单数据
  const username = formData.get('username') as string;
  const email = formData.get('email') as string;
  
  // Sequelize创建用户逻辑
  await User.create({ username, email });
  
  // 直接调用redirect，NextJS会自动处理客户端跳转
  redirect('/');
}

2. 在服务器组件的表单中绑定Action：

// app/register/page.tsx
import { registerAction } from '@/actions/register';

export default function RegisterPage() {
  return (
    <form action={registerAction}>
      <input type="text" name="username" placeholder="用户名" required />
      <input type="email" name="email" placeholder="邮箱" required />
      <button type="submit">注册</button>
    </form>
  );
}

场景2：使用客户端AJAX提交表单 #

如果必须用JS手动提交（比如需要前端表单校验），可以选择两种方式：

方式A：服务器返回成功状态，前端主动跳转

• API路由代码：

// app/api/register/route.ts
import { NextResponse } from 'next/server';
import { User } from '@/models/User';

export async function POST(request: Request) {
  const { username, email } = await request.json();
  
  // 创建用户
  await User.create({ username, email });
  
  // 返回成功响应，不返回重定向
  return NextResponse.json({ success: true }, { status: 200 });
}

• 前端组件代码：

// app/register/page.tsx
'use client';
import { useRouter } from 'next/navigation';

export default function RegisterPage() {
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    
    const res = await fetch('/api/register', {
      method: 'POST',
      body: JSON.stringify({
        username: formData.get('username'),
        email: formData.get('email'),
      }),
      headers: { 'Content-Type': 'application/json' },
    });

    const data = await res.json();
    if (data.success) {
      // 前端主动跳转首页
      router.push('/');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="用户名" required />
      <input type="email" name="email" placeholder="邮箱" required />
      <button type="submit">注册</button>
    </form>
  );
}

方式B：利用浏览器原生表单提交（无JS拦截）

如果不需要前端JS处理提交逻辑，直接用原生表单提交，此时API路由返回NextResponse.redirect会触发页面跳转：

• API路由代码：

// app/api/register/route.ts
import { NextResponse } from 'next/server';
import { User } from '@/models/User';

export async function POST(request: Request) {
  const formData = await request.formData();
  const username = formData.get('username') as string;
  const email = formData.get('email') as string;
  
  await User.create({ username, email });
  
  // 返回307重定向，原生表单提交会自动跳转
  return NextResponse.redirect(new URL('/', request.url), { status: 307 });
}

• 前端表单代码（无需JS）：

// app/register/page.tsx
export default function RegisterPage() {
  return (
    <form action="/api/register" method="POST">
      <input type="text" name="username" placeholder="用户名" required />
      <input type="email" name="email" placeholder="邮箱" required />
      <button type="submit">注册</button>
    </form>
  );
}

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