我使用NextAuth.js v4测试版来设置服务器端渲染并通过道具添加会话session数据从index.js文件中的getServerSideProps函数获取控制台日志，但session的客户端控制台日志结果为undefined。
这里可能有什么问题？我该怎么解决这个问题？
_app.js代码：
import { SessionProvider } from "next-auth/react"
export default function MyApp({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session} refetchInterval={5 * 60}>
<Component {...pageProps} />
</SessionProvider>
)
}
[...nextauth].js代码：
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"
const prisma = new PrismaClient()
export default NextAuth({
adapter: PrismaAdapter(prisma),
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
secret: process.env.SECRET,
})
index.js代码：
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { signIn, signOut, getSession } from 'next-auth/react'
export default function Home({session}) {
return (
<div className={styles.container}>
<Head>
<title>Nextjs</title>
<meta name="description" content="Nextjs" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
{!session && (
<>
<h1>
Nextjs
</h1>
<h2 className={styles.subheader}>
You're not logged in
</h2>
<br />
<button onClick={() => signIn("google")}>Sign In</button>
</>
)}
{session && (
<>
<h1>
Dashboard
</h1>
<h2 className={styles.subheader}>
Signed in as {session.user.email}
</h2>
<br />
<button onClick={signOut}>Sign Out</button>
</>
)}
</main>
</div>
)
}
export async function getServerSideProps(ctx) {
const session = await getSession(ctx)
return {
props: { session },
}
}]
这是我的dependencies:
"@next-auth/prisma-adapter": "^0.5.2-next.19",
"@prisma/client": "^3.5.0",
"next": "12.0.4",
"next-auth": "^4.0.0-beta.7",
"react": "17.0.2",
"react-dom": "17.0.2"
这似乎有效：
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { signIn, signOut, getSession } from 'next-auth/react'
export default function Home({user}) {
return (
<div className={styles.container}>
<Head>
<title>Nextjs</title>
<meta name="description" content="Nextjs" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
{!user && (
<>
<h1>
Nextjs
</h1>
<h2 className={styles.subheader}>
You're not logged in
</h2>
<br />
<button onClick={() => signIn("google")}>Sign In</button>
</>
)}
{user && (
<>
<h1>
Dashboard
</h1>
<h2 className={styles.subheader}>
Signed in as {user.email}
</h2>
<br />
<button onClick={signOut}>Sign Out</button>
</>
)}
</main>
</div>
)
}
export async function getServerSideProps(ctx) {
const session = await getSession(ctx)
if (!session) {
return {
props: {}
}
}
const { user } = session;
return {
props: { user },
}
}