NextJS 14使用redirect()抛出Error: NEXT_REDIRECT问题求助

问题根源 #

你遇到的Error: NEXT_REDIRECT是因为在客户端组件中直接调用了服务端专属的redirect()方法。NextJS 14 AppRouter中，redirect()仅允许在服务端组件、Server Actions或Middleware中使用，客户端环境调用会触发错误。

方案1：服务端组件专属认证函数（推荐） #

由于page.jsx默认是服务端组件，直接在页面中调用认证逻辑并使用redirect()即可生效，无需额外处理。

1.1 封装通用认证函数

创建lib/auth.js：

import { redirect } from 'next/navigation';

export async function requireAuth() {
  // 向Laravel后端发送认证校验请求
  const response = await fetch('https://your-laravel-api.com/api/check-auth', {
    // 传递Cookie（如果用Cookie管理会话）
    credentials: 'include',
    // 禁用缓存，确保每次请求都校验最新状态
    cache: 'no-store'
  });

  if (!response.ok) {
    if (response.status === 401) {
      // 服务端环境调用redirect()直接生效
      redirect('/');
    }
    throw new Error('认证校验失败');
  }

  // 返回用户信息供页面使用
  return await response.json();
}

1.2 在页面中调用

修改dashboard/page.jsx：

import { requireAuth } from '@/lib/auth';

export default async function DashboardPage() {
  // 先校验认证，未授权会自动重定向
  const user = await requireAuth();

  return (
    <div>
      <h1>控制台</h1>
      <p>欢迎，{user.name}</p>
    </div>
  );
}

方案2：支持客户端组件的Server Actions #

如果页面必须是客户端组件（需要使用useState等客户端钩子），用Server Actions处理认证逻辑：

2.1 创建Server Action

创建app/actions/authActions.js：

'use server';

import { redirect } from 'next/navigation';

export async function requireAuthAction() {
  const response = await fetch('https://your-laravel-api.com/api/check-auth', {
    credentials: 'include',
    cache: 'no-store'
  });

  if (response.status === 401) {
    redirect('/');
  }

  return await response.json();
}

2.2 在客户端组件中调用

修改dashboard/page.jsx：

'use client';

import { requireAuthAction } from '@/app/actions/authActions';
import { useEffect, useState } from 'react';

export default function DashboardPage() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      try {
        const userData = await requireAuthAction();
        setUser(userData);
      } catch (err) {
        // Server Action中的redirect会自动处理，无需额外逻辑
      }
    }

    fetchUser();
  }, []);

  if (!user) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>控制台</h1>
      <p>欢迎，{user.name}</p>
    </div>
  );
}

方案3：全局Middleware拦截（最省心） #

如果希望所有受保护路由自动校验认证，无需在每个页面写逻辑，用NextJS Middleware：

创建app/middleware.js：

import { NextResponse } from 'next/server';

export async function middleware(request) {
  // 定义需要保护的路由
  const protectedRoutes = ['/dashboard', '/profile'];
  const currentPath = request.nextUrl.pathname;

  // 仅拦截受保护路由
  if (protectedRoutes.some(route => currentPath.startsWith(route))) {
    // 向Laravel发送校验请求
    const authResponse = await fetch('https://your-laravel-api.com/api/check-auth', {
      headers: {
        // 传递请求中的Cookie
        Cookie: request.headers.get('Cookie'),
      },
      cache: 'no-store'
    });

    if (authResponse.status === 401) {
      // 重定向到首页
      return NextResponse.redirect(new URL('/', request.url));
    }
  }

  // 认证通过，继续请求
  return NextResponse.next();
}

// 指定Middleware生效的路由规则
export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

关键注意事项 #

• 服务端请求Laravel时，确保credentials: 'include'（如果用Cookie会话），或正确传递Authorization令牌。
• 务必添加cache: 'no-store'，避免NextJS缓存认证结果导致状态不一致。
• 不要在客户端组件中直接调用redirect()，必须通过Server Actions或Middleware实现重定向。

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