Next.js 14.0.4中redirect函数报错：无效重定向参数

问题根源 #

你代码中导入的redirect来自next/dist/server/api-utils，这是服务器端专用API，仅能在服务器组件、API路由或服务器端函数中使用，客户端组件直接调用会触发参数错误的运行时异常。

解决方案 #

客户端组件需使用Next.js提供的客户端导航API实现重定向，推荐结合next/navigation的useRouter钩子与useEffect监听认证状态变化来执行跳转，同时修正加载状态的返回值（返回false不符合React组件规范）。

修改后的代码 #

'use client'
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function ProfilePage() {
    const { status } = useSession();
    const router = useRouter();

    // 监听认证状态，未认证时跳转首页
    useEffect(() => {
        if (status === 'unauthenticated') {
            router.replace("/");
        }
    }, [status, router]);

    // 加载状态返回合理UI
    if (status === 'loading') {
        return <div>加载中...</div>;
    }

    // 已认证时渲染页面内容
    return <div>个人中心页面</div>;
}

关键注意点 #

• 客户端组件的导航操作必须在副作用（如useEffect）或事件回调中执行，不能在组件渲染阶段直接调用服务器端API。
• 加载状态需返回有效的React元素，避免返回false这类非UI值引发渲染异常。

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