Next.js v13 App Router重定向异常：返回text/x-component而非跳转

问题根源 #

在App Router中，Server Component（如page.js） 里返回NextResponse.redirect时，Next.js会将其视为组件渲染内容，返回text/x-component类型响应，而非触发浏览器的HTTP重定向。只有在Route Handler（app/.../route.js） 或Middleware中返回重定向，才会被识别为HTTP级别的跳转指令。

具体解决方法 #

1. 迁移重定向逻辑到Route Handler #

如果重定向是在API或页面数据处理逻辑中，将代码移到route.js文件中：

import { NextResponse } from 'next/server';

export async function GET(request) {
  // 自定义业务逻辑
  const redirectUrl = new URL('/target-page', request.url);
  // 明确指定状态码（307/302/301均可，按需选择）
  return NextResponse.redirect(redirectUrl, { status: 307 });
}

2. 使用Middleware处理全局/路径级重定向 #

如果需要在请求进入页面之前判断重定向，用Middleware更合适：

import { NextResponse } from 'next/server';

export function middleware(request) {
  // 自定义重定向判断条件
  const isAuthenticated = false;
  if (!isAuthenticated) {
    const loginUrl = new URL('/login', request.url);
    return NextResponse.redirect(loginUrl);
  }
  return NextResponse.next();
}

// 指定需要匹配的路径规则
export const config = {
  matcher: ['/dashboard/:path*', '/profile'],
};

3. 客户端组件中实现重定向 #

如果重定向逻辑需要在页面组件内触发，将组件改为客户端组件（添加'use client'指令），用useRouter钩子：

'use client';

import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function MyPage() {
  const router = useRouter();

  useEffect(() => {
    // 自定义判断逻辑
    const shouldRedirect = true;
    if (shouldRedirect) {
      router.replace('/target-page');
    }
  }, []);

  return <div>加载中...</div>;
}

4. 禁止在Server Component中返回NextResponse #

绝对不要在page.js这类Server Component中直接返回NextResponse.redirect，这会被Next.js解析为组件内容，导致返回text/x-component类型响应。

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