Ununterbrochenes erneutes Rendern bei Verwendung von Next-Auth in NextJS
<p>这是我的“/app/api/auth/[...nextauth]/route.js“</p>
<pre class="brush:php;toolbar:false;">NextAuth aus "next-auth/next" importieren;
GoogleProvider aus "next-auth/providers/google" importieren;
export const authOptions = {
Anbieter: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
};
const handler = NextAuth(authOptions);
export { Handler als GET, Handler als POST };</pre>
<p> und sessionProvider.js</p>
<pre class="brush:php;toolbar:false;">"Client verwenden";
import React von "react";
import { SessionProvider } from "next-auth/react";
const Sessionprovider = ({children }) => {
return <SessionProvider>{children}</SessionProvider>;
};
Standard-Sessionprovider exportieren;</pre>
<p>我用这个将子元素包装在 Layout.js 中</p>
<pre class="brush:php;toolbar:false;"><html lang="en">
<body className={inter.className}>
<Sessionprovider>{children}</Sessionprovider>
</body>
</html></pre>
<p>这是我的 page.js</p>
<pre class="brush:php;toolbar:false;">"Client verwenden";
import { getServerSession } from „next-auth“;
import { signIn, signOut, useSession } from "next-auth/react";
import { authOptions } from "./api/auth/[...nextauth]/route";
Exportieren Sie die asynchrone Standardfunktion Home() {
const { Daten: Sitzung, Status } = useSession();
console.log(session);
const _signInWithGoogle = async () => {
wait signIn("google");
};
zurückkehren (
<div className="flex justify-center items-center flex-col gap-3 p-5">
<h1 className="font-semibold text-lg">Homepage</h1>
{Sitzung ? (
<-Taste
onClick={() => Abmelden()}
className="p-1 bg-blue-400 text-white font-semibold abgerundet-md hover:bg-blue-500"
>
Abmelden
</button>
) : (
<-Taste
onClick={_signInWithGoogle}
className="p-1 bg-blue-400 text-white font-semibold abgerundet-md hover:bg-blue-500"
>
Anmelden
</button>
)}
</div>
);
}</pre>
<p>Wenn ich die App ausführe, wird sie immer wieder neu gerendert. Jede Hilfe hierzu wäre sehr dankbar. Da die Konsole das Benutzerobjekt anzeigt, verbleibt es in der Anmeldekomponente. </p>
