Next Auth问题：服务端/客户端组件及中间件中Session始终为Null

1. 版本兼容性问题（核心原因） #

你使用的Next.js 15.1.3与NextAuth 4.24.11不兼容：NextAuth 4.x仅支持Next.js 12-14，Next.js 15需要搭配Auth.js v5（原NextAuth v5）。版本不匹配会直接导致Session无法正常创建存储。

解决方案二选一： #

• 升级到Auth.js v5：

  npm uninstall next-auth
  npm install @auth/core @auth/nextjs
  

  之后按照Auth.js v5文档重新配置（API结构与NextAuth 4.x差异较大）。
• 降级Next.js到兼容版本：

  npm install next@14.2.15
  

2. 自定义回调路由拦截了NextAuth流程 #

你创建的app/api/callback/google/route.ts会覆盖NextAuth的默认回调处理逻辑，导致登录后Session无法正确生成。NextAuth默认通过/api/auth/callback/[provider]完成回调，无需自定义该路由。

解决方案： #

• 删除app/api/callback/google/route.ts文件。
• 在AuthOptions中配置callbacks实现登录后重定向：

  // app/api/[...nextauth]/auth.ts
  const authOptions: AuthOptions = {
    providers: [
      GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_SECRET,
      }),
    ],
    callbacks: {
      async redirect({ url, baseUrl }) {
        // 登录成功后重定向到首页
        return baseUrl;
      },
    },
  }
  

3. 环境变量配置检查 #

确保以下环境变量在.env.local中正确设置：

• NEXTAUTH_SECRET：必须设置，用openssl rand -hex 32生成随机加密字符串。
• GOOGLE_CLIENT_ID/GOOGLE_SECRET：确认从Google Cloud Console获取的OAuth 2.0凭证正确，且授权回调URI设置为http://localhost:3000/api/auth/callback/google（本地）或对应生产域名。
• NEXTAUTH_URL：部署环境建议设置为应用根URL（如http://localhost:3000），本地开发可忽略。

注：Next.js会自动加载.env.local，无需依赖dotenv，可卸载该包。

4. 服务端组件获取Session的正确方式 #

移除auth.ts中自定义的getSession函数，直接在服务端组件中调用getServerSession：

// 服务端组件示例
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/[...nextauth]/auth"

export default async function Home() {
  const session = await getServerSession(authOptions)
  console.log(session)
  return <div>{session ? `Logged in as ${session.user?.name}` : "Not logged in"}</div>
}

5. Middleware配置优化 #

确保getToken的secret与NEXTAUTH_SECRET一致，同时添加未登录重定向逻辑：

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { getToken } from 'next-auth/jwt';

export async function middleware(request: NextRequest) {
  const token = await getToken({ 
    req: request, 
    secret: process.env.NEXTAUTH_SECRET,
    cookieName: 'next-auth.session-token'
  });

  // 未登录时重定向到登录页
  if (!token && request.nextUrl.pathname === '/') {
    return NextResponse.redirect(new URL('/api/auth/signin', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/'], // 可添加更多需要保护的路由，如'/dashboard/:path*'
}

6. 客户端组件useSession配置 #

在根布局中添加SessionProvider包裹所有组件：

// app/layout.tsx
import { SessionProvider } from "next-auth/react"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  )
}

之后在客户端组件中使用：

'use client'
import { useSession } from "next-auth/react"

export default function ClientComponent() {
  const { data: session } = useSession()
  console.log(session)
  return <div>{session ? `Logged in as ${session.user?.name}` : "Not logged in"}</div>
}

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