使用Next.js 13与NextAuth时每次刷新均跳转登录页问题

我近期在应用中使用Next.js 13和NextAuth实现认证功能，但遇到棘手问题：每次刷新任意页面时，即便用户已完成认证，仍会跳转至登录页，不符合预期用户体验。我怀疑问题出在Session Provider的包裹方式或布局组件上。

相关代码 #

components/Layout.js #

"use client";
import Image from "next/image";
import { useSession, signIn, signOut } from "next-auth/react";

import Nav from "./Nav";
export default function Layout({ children }) {
  const { data: session } = useSession();

  if (!session) {
    return (
      <div className="bg-blue-900 w-screen h-screen flex items-center">
        <div className="text-center w-full">
          <button
            onClick={(e) => {
              e.preventDefault();
              signIn("google");
            }}
            className="bg-white p-2 px-4 rounded-lg"
          >
            Login With
          </button>
        </div>
      </div>
    );
  }
  return (
    <div className="bg-blue-900 min-h-screen flex">
      <Nav />
      <div className="bg-white flex-grow mt-2 mr-2 rounded-lg p-4">
        {children}
      </div>
    </div>
  );
}

根目录 layout.js #

import { NextAuthProvider } from "./NextAuthProvider";
import Layout from "./components/Layout";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
import { getServerSession } from "next-auth/next";
import { authOptions } from "../pages/api/auth/[...nextauth]";
export default async function RootLayout({ children }) {
  const session = await getServerSession(authOptions);
  return (
    <html>
      <head />
      <body>
        <NextAuthProvider>
          <Layout>{children}</Layout>
        </NextAuthProvider>
        ;
      </body>
    </html>
  );
}

pages/api/auth/[...nextauth].js #

import clientPromise from "@/lib/mongodb";
import { MongoDBAdapter } from "@auth/mongodb-adapter";
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export const authOptions = {
  // https://next-auth.js.org/configuration/providers/oauth
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
};

export default NextAuth(authOptions);

补充说明 #

此前我用getServerSession解决过该问题，但现在出现JWT会话错误，因此移除了该临时方案。

项目结构 #

内容的提问来源于stack exchange，提问作者JOHn