这是我的“/app/api/auth/[...nextauth]/route.js”importNextAuthfrom"next-auth/next";importGoogleProviderfrom"next-auth/providers/google";exportconstauthOptions={providers:[GoogleProvider （

您需要从客户端组件中删除 async 。 "use client"; export default function Home() { } https://github.com/vercel/next.js/issues/48822

在 NextJS 中使用 Next-Auth 时不间断重新渲染

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

从“next-auth/next”导入 NextAuth;
从“next-auth/providers/google”导入 GoogleProvider；

导出常量 authOptions = {
  提供者：[
    谷歌提供商({
      clientId：process.env.GOOGLE_CLIENT_ID，
      clientSecret：process.env.GOOGLE_CLIENT_SECRET，
    }),
  ],
};

const 处理程序 = NextAuth(authOptions);
导出 { 处理程序为 GET，处理程序为 POST };

; 和sessionProvider.js

“使用客户端”;

从“反应”导入反应；
从“next-auth/react”导入{SessionProvider}；

const Sessionprovider = ({ 孩子 }) => {
  返回 {children};
};

导出默认Sessionprovider;</pre>
<p>我在 Layout.js 中使用这个将子元素包装</p>

      <body className={inter.className}>
        {children}
      </正文>
    </html></pre>
<p>这是我的 page.js</p>
“使用客户端”;
从“next-auth”导入{ getServerSession }；
从“next-auth/react”导入{signIn、signOut、useSession}；
从“./api/auth/[...nextauth]/route”导入{ authOptions }；

导出默认异步函数 Home() {
  const { 数据：会话，状态 } = useSession();
  控制台.log(会话);

  const _signInWithGoogle = async () =>; {
   等待登录（“谷歌”）；
  };

  返回 （
    <div className=“flex justify-center items-center flex-col gap-3 p-5”>
      主页
      {会议 ？ （
        <按钮
          onClick={() =>;登出（）}
          className =“p-1 bg-blue-400 文本-白色字体-半粗体圆形-md悬停：bg-blue-500”
        >
          登出
        </按钮>
      ) : (
        <按钮
          onClick={_signInWithGoogle}
          className =“p-1 bg-blue-400 文本-白色字体-半粗体圆形-md悬停：bg-blue-500”
        >
          登入
        </按钮>
      )}

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

在 NextJS 中使用 Next-Auth 时不间断重新渲染

主页

全部回复(1)我来回复