在 NextJS 中使用 Next-Auth 时不间断重新渲染-PHP中文网问答

这是我的“/app/api/auth/[...nextauth]/route.js”

import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
};

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

和sessionProvider.js

"use client";

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

const Sessionprovider = ({ children }) => {
  return <SessionProvider>{children}</SessionProvider>;
};

export default Sessionprovider;

我用这个将子元素包装在 Layout.js 中

<html lang="en">
      <body className={inter.className}>
        <Sessionprovider>{children}</Sessionprovider>
      </body>
    </html>

这是我的 page.js

"use client";
import { getServerSession } from "next-auth";
import { signIn, signOut, useSession } from "next-auth/react";
import { authOptions } from "./api/auth/[...nextauth]/route";

export default async function Home() {
  const { data: session, status } = useSession();
  console.log(session);

  const _signInWithGoogle = async () => {
   await signIn("google");
  };

  return (
    <div className="flex justify-center items-center flex-col gap-3 p-5">
      <h1 className="font-semibold text-lg">Home Page</h1>
      {session ? (
        <button
          onClick={() => signOut()}
          className="p-1 bg-blue-400 text-white font-semibold rounded-md hover:bg-blue-500"
        >
          Sign Out
        </button>
      ) : (
        <button
          onClick={_signInWithGoogle}
          className="p-1 bg-blue-400 text-white font-semibold rounded-md hover:bg-blue-500"
        >
          Sign In
        </button>
      )}
    </div>
  );
}

当我运行应用程序时，它会不停地重新渲染。对此的任何帮助将不胜感激。由于控制台显示用户对象，它仍然保留在登录组件中。