Next.js 13 AppDir模式下通过Middleware实现无JWT时重定向

你的代码需要调整几个关键点，才能在App Dir模式下正常工作并避免无限重定向问题：

问题分析 #

1. 直接传递相对路径给NextResponse.redirect可能导致路径解析异常，App Dir模式要求使用完整绝对URL
2. 未配置路由匹配规则，中间件会拦截所有请求（包括/login本身），引发无限重定向循环
3. 未排除静态资源路径，可能影响页面样式、图片等资源的正常加载

修改后的代码 #

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

// 配置中间件生效的路由范围，排除登录页和静态资源
export const config = {
  matcher: ['/((?!login|_next/static|_next/image|favicon.ico).*)'],
}

export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')
  
  // 未检测到JWT token时，重定向到登录页面
  if (!token) {
    // 基于当前请求URL构造完整的登录页地址
    const loginUrl = new URL('/login', req.url)
    return NextResponse.redirect(loginUrl)
  }
  
  // 存在token时，放行请求
  return NextResponse.next()
}

关键说明 #

• config.matcher：通过正则表达式指定需要拦截的路由，同时排除/login页面、Next.js内置的静态资源路径（_next/static、_next/image）和网站图标，避免不必要的拦截和循环重定向
• new URL('/login', req.url)：确保跳转地址是完整的绝对URL，符合Next.js 13 App Dir模式的路由规范，避免路径解析错误
• token校验逻辑：仅在cookie中不存在token时执行重定向，其他情况正常放行请求

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