Next.js13实验性App目录下NextAuth无法获取会话的问题

1. 配置NextAuth的API路由（App目录版本） #

无需创建pages目录，直接在app/api/auth/[...nextauth]/route.js创建路由文件，内容如下：

import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth"; // 指向你的NextAuth配置文件

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

2. 创建客户端Providers组件 #

新建app/providers.jsx（或.tsx），添加客户端组件标记并封装SessionProvider：

'use client';

import { SessionProvider } from "next-auth/react";

export default function Providers({ children, session }) {
  return (
    <SessionProvider session={session}>
      {children}
    </SessionProvider>
  );
}

3. 在RootLayout中获取会话并传入Providers #

RootLayout作为服务器组件，可直接调用getServerSession获取会话，再传给客户端的Providers：

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/lib/auth";
import Providers from "./providers";

export default async function RootLayout({ children }) {
  const session = await getServerSession(authOptions);
  
  return (
    <html lang="zh-CN">
      <body>
        <Providers session={session}>
          {children}
        </Providers>
      </body>
    </html>
  );
}

4. 关键注意事项 #

• 确保NextAuth版本≥v4.22.0，该版本开始正式支持Next.js App Router。
• 务必设置NEXTAUTH_SECRET环境变量，可通过openssl rand -hex 32生成。
• 客户端组件中使用useSession时，记得添加'use client'指令。

这样配置后，SessionProvider就能正确获取会话，且无需创建pages目录，不会干扰现有App目录结构。

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