Next.js中间件跳转登录页失效及JWT_SECRET报错求助

问题梳理 #

• 开发Spotify克隆项目时，尝试用Middleware验证用户Token：存在Token则允许正常访问，未登录/登出时跳转至登录页，但跳转功能失效
• 改用TypeScript的NextRequest后，process.env.JWT_SECRET出现类型报错，无法正常运行

问题原因及修复方案 #

1. JWT_SECRET的类型与配置问题 #

TypeScript中process.env的变量默认类型是string | undefined，直接传给getToken的secret参数会触发类型校验报错。同时要确认.env.local文件里已正确配置JWT_SECRET，推荐用openssl rand -hex 32生成安全的随机字符串作为值。

2. 跳转逻辑的路径问题 #

原代码中NextResponse.redirect("/login")用相对路径可能导致跳转失效，需要基于当前请求URL生成完整跳转地址。

3. Middleware匹配范围优化 #

通过config.matcher指定需要拦截的路径，避免Middleware在静态资源、接口等不必要的路径上执行，提升性能。

修复后的完整代码 #

import { getToken } from "next-auth/jwt";
import { NextResponse, NextRequest } from "next/server";

// 对JWT_SECRET做类型断言，解决TypeScript报错
const JWT_SECRET = process.env.JWT_SECRET as string;

export async function middleware(req: NextRequest) {
  // 获取用户Token，确保参数类型正确
  const token = await getToken({ req, secret: JWT_SECRET });

  const { pathname } = req.nextURL;

  // 放行/auth相关接口，或已登录用户的请求
  if (pathname.includes("/api/auth") || token) {
    return NextResponse.next();
  }

  // 未登录且当前不在登录页时，跳转至登录页
  if (!token && pathname !== "/login") {
    // 基于当前请求URL生成完整的登录页地址，避免路径问题
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

// 配置Middleware只拦截非静态资源、非接口的路径
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

额外检查项 #

• 确认next-auth与Next.js版本兼容，优先使用最新稳定版
• 检查/login页面的路由是否正确配置，确保能正常访问
• 如果使用App Router，注意Middleware的放置位置和规则是否符合对应版本文档要求

内容的提问来源于stack exchange，提问作者Iván