我试图在我的nextjs应用程序中使用getServerSession方法，因为大多数用户在试图获取会话返回的配置文件数据时遇到了同样的问题，建议我使用getServerSession而不是“getSession”，所以我只是想给予一下，希望在这种情况下它能正常工作，但现在出现了这样奇怪的错误。
只有导入getServerSession后才弹出错误，我必须使用它，否则，删除它并仅使用getSession在客户端渲染会话将返回null数据，因此我无法渲染会话返回的用户配置文件数据，也检查了许多次类似的问题，但没有运气，无法告诉它对我来说有多重要，任何帮助都非常感谢。

错误：

error - ./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./pages/api/auth/[...nextauth].js
./components/header/Top.js
./components/header/index.js
./pages/_app.js

这里是我想要显示用户数据的Top组件：

import { useState } from "react";
import styles from "./styles.module.scss";
import Link from "next/link";
import Image from "next/image";
import UserMenu from "./UserMenu";
import avatar from "../../public/avatar.png";
import { useSession, signIn, signOut, getSession } from "next-auth/react"
import { getServerSession } from "next-auth";
import { authOptions } from "../../pages/api/auth/[...nextauth]";

function Top() {

  const { data: session} = useSession();

  return (
    <> 
      <div className={styles.top}>
        <div className={styles.top__container}>
          <div></div>

          <ul className={styles.top__list}>
            <li className={styles.li}>

              
              <Image
                src="/heart.svg"
                width={20}
                height={20}
                alt="heart"
                className={styles.test}
              />
              <Link href="/profile/wishlist">
                <span>Wishlist</span>
              </Link>
            </li>

            <li className={styles.li}>
              <span className={styles.cart}>3</span>
              <Image src="/cart.svg" width={22} height={22} alt="cart" />

              <Link href="/cart">
                <span>Cart</span>
              </Link>
            </li>
               
              {session ? (
                <li className={styles.li}>
                  <div className={styles.flex}>
                    
                    <Image
                      src={session.user.image || avatar}
                      width={64}
                      height={64}
                      alt="avatar"
                    />
                    <span>{session.user.name}</span>
                  </div>
                </li>
              ) : (
                <li className={styles.li}>
                  <div className={styles.flex}>
                    <span>Account</span>
                  </div>
                </li>
              )}
              {userMenuVisible && <UserMenu session={session} />}
            </li>
          </ul>
        </div>
      </div>
    </>
  );
}

export default Top;

export async function getServerSideProps(context) {

  const session = await getServerSession(authOptions)

  return {
    props: {
      session,
    },
  };
}