我一直得到这个错误。尝试了几个小时，现在没有运气，我有一种感觉，这是放置的_app.tsx的混乱的项目。

[next-auth]: `useSession` must be wrapped in a <SessionProvider />

字符串

的数据
这就是我的文件树的样子

的
Navbar.tsx

"use client"
import React from 'react'
import Link from 'next/link'
import { NavLinks } from '@/constants'
import { signIn, signOut, useSession } from 'next-auth/react'

const Navbar = () => {
    const { data: session, status } = useSession()
    return (
        <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
            <div className="hidden lg:flex lg:flex-1 lg:justify-end">
                {status === 'authenticated' ? (
                    <a href="#" onClick={() => signOut()} className="text-sm font-semibold leading-6 text-gray-900">Sign out {session.user?.email}<span aria-hidden="true">&rarr;</span></a>
                ) : (
                    <a href="#" onClick={() => signIn('spotify')} className="text-sm font-semibold leading-6 text-gray-900">Log in <span aria-hidden="true">&rarr;</span></a>
                )}
            </div>
        </nav>
    )
}
export default Navbar

型
_app.tsx

import { SessionProvider } from "next-auth/react"
import type { AppProps } from "next/app"
import type { Session } from "next-auth"
import "./globals.css"

export default function App({ Component, pageProps: { session, ...pageProps }}: 
  AppProps<{ session: Session }>) {
  return (
    <SessionProvider session={session} refetchInterval={5 * 60}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

型
有人知道我错过了什么吗？