Next.js Middleware重定向/重写时遇无效URL错误及req.nextUrl未定义

问题核心原因 #

你混淆了Next.js的Pages Router与App Router的API体系：

• getServerSideProps属于Pages Router，它接收的req是Node.js原生的IncomingMessage对象，并非App Router中间件专属的NextRequest类型，因此不存在nextUrl属性。
• req.url在Pages Router中仅表示请求路径（如/admin），不是完整URL，直接用它作为new URL()的第二个参数会导致"invalid url"错误。

修复方案一：适配Pages Router的重定向逻辑 #

修改认证逻辑，适配Pages Router的请求对象，并通过getServerSideProps的返回值实现重定向：

1. 修改checkAuth.ts，适配Pages Router的请求类型：

import type { IncomingMessage } from 'http';

export default function checkAuth(req: IncomingMessage) {
  // 构建完整请求URL
  const host = req.headers.host || '';
  const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';
  // 返回重定向目标的完整URL
  return `${protocol}://${host}/`;
}

2. 修改index.tsx的getServerSideProps，通过指定redirect字段实现重定向：

import checkAuth from "@/Middleware/checkAuth";

export async function getServerSideProps({ req }) {
  const redirectUrl = checkAuth(req);
  
  return {
    redirect: {
      destination: redirectUrl,
      permanent: false, // 临时重定向用false，永久重定向用true
    },
  };
}

export default function HomeAdmin() {
  return (<div className='adminPanel'>
  </div>)
}

修复方案二：改用App Router中间件（推荐Next.js 13+） #

如果你的项目使用Next.js 13+的App Router，可以直接用全局中间件处理认证重定向，无需在页面中调用：

在项目根目录创建middleware.ts：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 替换为你的实际认证判断逻辑
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return NextResponse.redirect(new URL('/', request.url));
  }
}

// 指定中间件生效的路径（比如你的admin页面路径）
export const config = {
  matcher: '/admin/:path*',
};

关键注意事项 #

• Pages Router与App Router的请求对象、重定向逻辑完全不兼容，不要混用两类API。
• Pages Router中必须通过getServerSideProps返回的redirect字段实现重定向，不能直接返回NextResponse。

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