next-auth中间件JS解析异常：字符串拼接引发路由重定向问题

问题现象 #

在Next.js 13.4 + NextAuth.js 4.20.1环境下，middleware.js中直接使用静态字符串定义signIn路径时，中间件可正常拦截/dashboard路由并跳转到自定义登录页：

export {default} from 'next-auth/middleware'

export const config = {
    matcher: ['/dashboard'],
    pages: {
        signIn: 'http://localhost:8000/accounts/login',
        error: '/api/auth/error',
    },
}

但改用字符串拼接生成signIn路径后，所有路由都会被错误重定向到默认的/api/auth/signin?callbackUrl=%2F：

export {default} from 'next-auth/middleware'

export const config = {
    matcher: ['/dashboard'],
    pages: {
        signIn: 'http://localhost:8000' + '/accounts/login', // 字符串拼接导致失效
        error: '/api/auth/error',
    },
}

原因分析 #

NextAuth的中间件配置（包括pages字段）是在编译/构建阶段被静态解析的，而字符串拼接属于运行时计算逻辑，编译阶段无法正确获取最终的signIn路径值。NextAuth找不到有效的自定义登录页配置，就会 fallback 到默认的登录路由，导致所有需要授权的路由（甚至可能意外覆盖全局）都被重定向到默认地址。

解决办法 #

• 使用静态字符串直接定义路径
  优先直接写完整的静态路径，避免运行时拼接：

  pages: {
      signIn: 'http://localhost:8000/accounts/login',
      error: '/api/auth/error',
  }
  

• 借助环境变量做静态拼接（如果需要动态域名）
  如果需要从环境变量获取域名部分，可以用模板字符串直接拼接，Next.js会在编译阶段注入环境变量并解析成静态字符串：

  // .env文件中配置
  // NEXTAUTH_URL=http://localhost:8000
  
  // middleware.js中
  pages: {
      signIn: `${process.env.NEXTAUTH_URL}/accounts/login`,
      error: '/api/auth/error',
  }
  

  注意：确保环境变量在中间件中可访问（Next.js中服务端/中间件无需NEXT_PUBLIC_前缀，直接配置即可）。

• 避免任何运行时计算的表达式
  不要在config对象中使用函数调用、变量计算等运行时逻辑，所有配置值都需要是静态可解析的字面量或环境变量模板字符串。

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