NextJS에서 Next-Auth를 사용할 때 논스톱 재렌더링
P粉811329034
2023-09-05 11:08:49
<p>내가 좋아하는 "/app/api/auth/[...nextauth]/route.js"</p>
<pre class="brush:php;toolbar:false;">"next-auth/next"에서 NextAuth 가져오기;;
"next-auth/providers/google"에서 GoogleProvider를 가져옵니다.
const authOptions = { 내보내기
제공업체: [
Google공급자({
클라이언트 ID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
};
const 핸들러 = NextAuth(authOptions);
내보내기 { 핸들러를 GET으로, 핸들러를 POST로 };</pre>
<p>와sessionProvider.js</p>
<pre class="brush:php;toolbar:false;">"클라이언트 사용"
"반응"에서 반응을 가져옵니다;;
"next-auth/react"에서 import { SessionProvider };
const 세션 제공자 = ({ 하위 }) => {
return <SessionProvider>{children}</SessionProvider>
};
기본 세션 제공자 내보내기</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;">"클라이언트 사용"
"next-auth"에서 import { getServerSession }을;;
"next-auth/react"에서 import { signIn, signOut, useSession }를;;
"./api/auth/[...nextauth]/route"에서 { authOptions } 가져오기;;
기본 비동기 함수 내보내기 Home() {
const { 데이터: 세션, 상태 } = useSession();
console.log(세션);
const _signInWithGoogle = async () => {
signIn("google")을 기다립니다;
};
반품 (
<div className="flex justify-center items-center flex-col gap-3 p-5">
<h1 className="font-semibold text-lg">홈 페이지</h1>
{세션? (
<버튼
onClick={() => 사인아웃()}
className="p-1 bg-blue-400 text-white 글꼴-semibold rounded-md hover:bg-blue-500"
>
로그아웃
</버튼>
) : (
<버튼
onClick={_signInWithGoogle}
className="p-1 bg-blue-400 text-white 글꼴-semibold rounded-md hover:bg-blue-500"
>
로그인
</버튼>
)}
</div>
);
}</pre>
<p>앱을 실행하면 계속해서 다시 렌더링됩니다. 이에 대한 도움을 주시면 대단히 감사하겠습니다. 콘솔에는 사용자 개체가 표시되므로 로그인 구성 요소에 남아 있습니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
클라이언트 구성 요소에서
으아악async를 제거해야 합니다.https://github.com/vercel/next.js/issues/48822