NextAuth.js v4 beta服务端可获取session但客户端为undefined如何解决

• 核心原因是_app.js的参数传递逻辑错误：你在解构pageProps时单独提取了session字段，后续向页面组件传递参数时仅传入了剔除session后的剩余pageProps，导致index.js的Home组件无法接收到getServerSideProps返回的session数据，自然打印为undefined。
• 你使用的next-auth@4.0.0-beta.7是早期测试版本，存在较多已知的SessionProvider相关bug，也可能引发session传递异常。
• index.js代码末尾存在多余的}]语法错误，也可能干扰代码正常运行。

1. 修正_app.js的参数传递逻辑，两种写法二选一即可：
   写法一（推荐）：不单独解构session，直接传递完整pageProps

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

export default function MyApp({
  Component,
  pageProps,
}) {
  return (
    <SessionProvider session={pageProps.session} refetchInterval={5 * 60}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

写法二：解构后手动把session传给页面组件

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

export default function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session} refetchInterval={5 * 60}>
      <Component session={session} {...pageProps} />
    </SessionProvider>
  )
}

2. 升级NextAuth到v4正式版本，同步升级配套的Prisma适配器，避免测试版bug：

npm install next-auth@latest @next-auth/prisma-adapter@latest

3. 清理index.js代码末尾多余的}]语法错误。

4. 可选优化：如果需要使用JWT模式的session，可以在[...nextauth].js中添加session配置：

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.SECRET,
  // 新增配置
  session: {
    strategy: "jwt"
  }
})

内容的提问来源于stack exchange，提问作者Abdullah Al Nahid