Next.js执行POST请求后redirect跳转失效问题求助

后端的redirect("/")对fetch/AJAX请求不生效。因为fetch是异步请求，浏览器只会接收API返回的响应，不会自动执行页面跳转——只有当请求是浏览器直接发起的（比如地址栏访问、普通表单提交），后端的redirect才会触发页面跳转。

方案1：后端返回成功状态，前端手动跳转 #

修改API路由（api/saveRecipe/route.js） #

把return redirect("/")替换为返回JSON成功响应：

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";
export async function POST(req) {
    const supabase = createRouteHandlerClient({ cookies });
    try {
        const data = await req.json();
        const { recipe, error } = await supabase.from("Recipes").insert([data]);
        if (error) {
            throw error;
        }
    } catch (error) {
        console.log(error.description || error.message);
        return NextResponse.json({ success: false }, { status: 500 });
    }

    return NextResponse.json({ success: true }, { status: 200 });
}

修改前端提交函数 #

在fetch请求成功后，手动触发页面跳转：

const handleSubmit = async () => {
    try {
        const res = await fetch("/api/saveRecipe", {
            method: "POST", 
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                title: title,
                time: time,
                time_unit: timeUnit,
                serves: serves,
                ingredients: ingredients,
                instructions: instructions,
            }),
        });
        if (res.ok) {
            // 普通跳转方式
            window.location.href = "/";
            // 若使用Next.js App Router，也可使用useRouter钩子：
            // const router = useRouter();
            // router.push("/");
        }
    } catch (e) {
        console.log(e.message || e.description);
    }
};

方案2：改用普通HTML表单提交（无需fetch） #

如果场景简单，直接用原生表单提交，后端的redirect("/")会正常生效：

<form action="/api/saveRecipe" method="POST">
    <input type="text" name="title" value={title} onChange={(e) => setTitle(e.target.value)} />
    {/* 其他表单字段... */}
    <button type="submit">保存食谱</button>
</form>

注意：这种方式需将表单数据以form-data或urlencoded格式传递，后端要调整为await req.formData()接收数据，而非req.json()。

你提到相同的redirect代码在其他路由正常工作，是因为那些路由的请求是浏览器直接发起的（比如用户点击链接访问GET路由、普通表单提交POST请求），而非通过fetch这类异步AJAX请求触发。

内容的提问来源于stack exchange，提问作者Saif eldeen Adel