如何在服务器和客户端组件之间传递props。

使用NextAuth提供的getSession()方法从服务器端获取用户信息，然后将该信息作为prop传递给客户端组件。具体实现方法如下：

1. 在pages/api/auth/[...nextauth].js中只需写入以下代码即可获取用户信息并将其储存在session对象中：

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

const options = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

  // 储存用户信息至session
  session: {
    jwt: true,
  },
};

export default (req, res) => NextAuth(req, res, options);

2. 创建包含客户端组件的页面，并使用getSession()方法从服务器端获取session对象中的用户信息：

import { getSession } from "next-auth/client";
import YourComponent from "../components/YourComponent";

export default function YourPage({ user }) {
  return <YourComponent user={user} />;
}

// 从服务器端获取用户信息
export async function getServerSideProps({ req, res }) {
  const session = await getSession({ req });

  return {
    props: {
      user: session?.user ?? null,
    },
  };
}

3. 在客户端组件中使用接收到的props：

import React from "react";

export default function YourComponent({ user }) {
  return <div>{user ? `Hello ${user.name}!` : "Please log in."}</div>;
}