NextJS で Next-Auth を使用する場合のノンストップ再レンダリング
<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プロバイダー({
clientId: process.env.GOOGLE_CLIENT_ID、
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
})、
]、
};
const ハンドラー = NextAuth(authOptions);
import { GET としてのハンドラー、POST としてのハンドラー };</pre>
<p>セッションプロバイダー.js</p>
<pre class="brush:php;toolbar:false;">"クライアントを使用";
"react" から React をインポートします。
import { SessionProvider } from "next-auth/react";
const セッションプロバイダ = ({ 子 }) => {
return <SessionProvider>{children}</SessionProvider>;
};
デフォルトのセッションプロバイダーをエクスポート;</pre>
<p>私はこれを使用して子要素パッケージを Layout.js 内に置いています</p>
<pre class="brush:php;toolbar:false;"><html lang="ja">
<body className={inter.className}>
<セッションプロバイダー>{子}</セッションプロバイダー>
</ボディ>
</html></pre>
<p>これは私のpage.js</p>
<pre class="brush:php;toolbar:false;">"クライアントを使用";
import { getServerSession } from "next-auth";
import {signIn、signOut、useSession } from "next-auth/react";
import { authOptions } from "./api/auth/[...nextauth]/route";
デフォルトの非同期関数をエクスポート Home() {
const { データ: セッション、ステータス } = useSession();
コンソール.ログ(セッション);
const _signInWithGoogle = async () => {
サインインを待ちます("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 font-semiboldrounded-md hover:bg-blue-500"
>
サインアウト
</ボタン>
):(
<ボタン
onClick={_signInWithGoogle}
className="p-1 bg-blue-400 text-white font-semiboldrounded-md hover:bg-blue-500"
>
サインイン
</ボタン>
)}
</div>
);
}</pre>
<p> アプリケーション プログラムの実行中に、それらが継続的に汚染される可能性があります。これは、制御台がユーザー オブジェクトを表示するため、レジストリに残り続けます。
