Next.js 14.0.3登录后redirect触发NEXT_REDIRECT错误且不跳转求助

你的问题核心是客户端组件的异步函数中不能直接使用next/navigation的redirect，以下是两种可行的解决思路：

方案1：使用客户端路由useRouter替代redirect #

在客户端组件中，改用Next.js提供的useRouter钩子来完成跳转，这是客户端环境下的标准路由方式：

"use client"

import { login } from "@/utils/api/actions/user";
import appState from "@/utils/state/zustand";
import { useRouter } from "next/navigation";
import { FormEventHandler } from "react";

const FormLogin = (): JSX.Element => {
    const router = useRouter();

    const handleLogin: FormEventHandler = async (e) => {
        e.preventDefault();

        const user = await login(/* 你的登录参数 */);

        if (user) {
            appState.setState({ User: user });
            // 跳转到应用板块，push允许回退，replace则禁止回退到登录页
            router.push("/app/");
            // router.replace("/app/");
        } else {
            // 处理登录失败逻辑
        }
    }

    return <form onSubmit={handleLogin}>
        {/* 表单内容 */}
    </form>
}

export default FormLogin;

方案2：将登录逻辑移至服务器端Action #

把登录验证和跳转逻辑放到服务器端Action中，避免在客户端组件中处理路由跳转：

1. 创建服务器端登录Action #

// @/utils/api/actions/user.ts
"use server"

import { redirect } from "next/navigation";
// 导入你的后端登录验证逻辑
import { verifyUserLogin } from "./auth-service";

export async function loginAction(formData: FormData) {
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;

    const user = await verifyUserLogin(email, password);

    if (user) {
        // 这里可以添加session设置逻辑（如用NextAuth或自定义session）
        redirect("/app/");
    } else {
        return { error: "登录失败，账号或密码错误" };
    }
}

2. 客户端组件调用服务器Action #

"use client"

import { loginAction } from "@/utils/api/actions/user";
import appState from "@/utils/state/zustand";
import { useFormState } from "react-dom";

const FormLogin = (): JSX.Element => {
    // useFormState用于处理服务器Action的返回状态
    const [formState, formAction] = useFormState(loginAction, undefined);

    return <form action={formAction}>
        <input type="email" name="email" required />
        <input type="password" name="password" required />
        <button type="submit">登录</button>
        {formState?.error && <p style={{ color: "red" }}>{formState.error}</p>}
    </form>
}

export default FormLogin;

原因说明 #

• next/navigation的redirect函数设计为在服务端组件/服务器Action中同步执行，会直接中断当前渲染流程并触发跳转，所以你的AuthGuard（服务端组件）能正常工作。
• 在客户端组件的异步函数中调用redirect时，会抛出NEXT_REDIRECT错误，且由于异步上下文的限制，无法正确触发客户端路由变化，导致报错且不跳转。

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