Next.js 13.4.9中useEffect调用redirect()报NEXT_REDIRECT错误的解决方法

问题原因 #

Next.js App Router 中，客户端组件的 redirect() 函数是通过抛出 NEXT_REDIRECT 错误来触发重定向逻辑的，这是框架的预期行为。你用 try/catch 捕获了这个错误，导致框架无法处理重定向，同时错误被打印出来。

解决方案 #

方案一：移除 try/catch，让框架处理重定向 #

NEXT_REDIRECT 是框架内部预期的错误，不会导致页面崩溃，框架会自动捕获并执行重定向，无需手动处理。修改代码如下：

'use client';
import { redirect } from 'next/navigation';

useEffect(() => {
    getRedirectResult(auth).then(async (userCredential) => {
        if (!userCredential) return;

        fetch('/api/auth/login', {
            method: 'POST',
            headers: {
                Authorization: 'Bearer ' + (await userCredential.user.getIdToken()),
            },
        }).then((res) => {
            if (res.ok) {
                redirect('/user'); // 移除try/catch，让框架处理重定向
            }
        }).catch(err => {
            console.error('登录请求失败:', err);
        });
    }).catch(err => {
        console.error('获取重定向结果失败:', err);
    });
}, []);

方案二：使用 useRouter 的 push 方法（无错误抛出） #

如果不想看到框架抛出的错误日志，可以用 useRouter 的 push 方法替代 redirect()，这是客户端侧的导航API，不会通过抛错实现重定向：

'use client';
import { useRouter } from 'next/navigation';

const router = useRouter();

useEffect(() => {
    const handleRedirect = async () => {
        try {
            const userCredential = await getRedirectResult(auth);
            if (!userCredential) return;

            const idToken = await userCredential.user.getIdToken();
            const res = await fetch('/api/auth/login', {
                method: 'POST',
                headers: {
                    Authorization: `Bearer ${idToken}`,
                },
            });

            if (res.ok) {
                router.push('/user');
            }
        } catch (err) {
            console.error('重定向流程出错:', err);
        }
    };

    handleRedirect();
}, [router]);

注意事项 #

• 确保组件顶部添加 'use client' 指令，useEffect、useRouter、客户端 redirect 都只能在客户端组件中使用。
• 建议用 async/await 替代嵌套的 then 调用，让代码逻辑更清晰，错误处理更统一。

内容的提问来源于stack exchange，提问作者Jan Phillip Schwietzer