Next.js 12 middleware中无法获取NextAuth session数据是什么原因

核心原因 #

• Next.js 12的Middleware运行在Edge Runtime中，仅支持有限的Web标准API，不兼容Node.js原生API
• 你用到的next-auth/react提供的getSession方法内部依赖Node.js专属API，无法在Edge环境正常执行，因此始终返回null

正确解决方法 #

方法1：使用next-auth官方Edge兼容的getToken方法 #

next-auth专门为Edge Runtime提供了getToken方法，无需依赖Node.js API，可以直接在Middleware中解析session对应的JWT令牌获取用户信息，示例代码如下：

import { NextResponse } from 'next/server'
import { getToken } from "next-auth/jwt"

const redirectUnauthenticatedUserMiddleware = async (req) => {
  // 此处的secret需和你next-auth配置的NEXTAUTH_SECRET环境变量保持一致
  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET })
  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url))
  }
  return NextResponse.next()
}

export default redirectUnauthenticatedUserMiddleware

// 配置middleware仅在需要保护的路径生效，避免全站生效导致重定向循环
export const config = {
  matcher: '/dashboard/:path*',
}

方法2：将鉴权逻辑移到页面层getServerSideProps #

如果项目暂时不需要用到Middleware的特性，可以把鉴权逻辑从Middleware移到需要保护的页面的getServerSideProps生命周期中，该函数运行在Node.js环境，可以正常调用getSession：

import { getSession } from "next-auth/react"

export async function getServerSideProps(context) {
  const session = await getSession(context)
  if (!session) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }
  return {
    props: { session }
  }
}

额外注意事项 #

• 必须在项目环境变量中配置正确的NEXTAUTH_SECRET，否则getToken无法正常解析令牌
• 不要忘记配置Middleware的matcher规则，避免Middleware对登录页、静态资源等不需要鉴权的路径生效，引发无限重定向问题

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