标题重写为：Nextjs가 _app.js를 감지하는지 확실하지 않습니다. 오류: useSession은 <SessionProvider />로 래핑되어야 합니다.

Question

저는 Nextjs, Prisma 및 Auth0에 대한 몇 가지 튜토리얼을 따라왔습니다. 내 문제는 헤더에 로그인/로그아웃 버튼을 생성하려고 시도한 후("next-auth/react" 에서 헤더에 import { useSession,signIn,signOut }를 추가하여)입니다. .js 파일) next.js에 다음 오류가 발생합니다. 오류: [next-auth]: `useSession`은 에 래핑되어야 합니다. 루트 폴더에 _app.js 파일을 만든 다음 /pages/_app.js에서 마지막으로 /app/_app에 생성했습니다. .js. 이들 중 어느 것도 작동하지 않습니다.

이것은 내_app.js 파일의 내용입니다:

"next-auth/react"에서 { SessionProvider } 가져오기

기본 함수 앱 내보내기({
  요소,
  pageProps: { 세션, ...pageProps },
}) {
  반품 (
    <SessionProvider 세션={세션}>
      <구성요소 {...pageProps} />
    </세션 제공자>
  )
}

Next가 이를 감지하고 사용하는지 어떻게 확인하나요? 파일이 어느 정도 무시되고 있는 것 같아요.

프로젝트의 루트 폴더에서 _app.js 파일의 위치를 ​​/pages/_app.js 코드> ;app/_app.js . .next 폴더를 삭제하고 서버를 다시 실행해 보았지만 작동하지 않았습니다.

업데이트 1: 내가 사용하고 있는 Next.js 버전: v13.4.4

업데이트 2: console.log() 함수를 _app.js 파일에 추가했는데 터미널에는 인쇄되지만 Firefox에서는 인쇄되지 않습니다. _app.js 감지가 정상인가요, 아니면 문제가 있나요?

제가 (어느 정도) 고쳤습니다! 아래에서 내 답변을 확인하세요. 하지만 Vercel에 배포하면 작동하지 않습니다.

Answer 1

이 문제를 해결한 것 같습니다. _app.js는 잊어버리고 모든 것을 내 맞춤 레이아웃.js 파일에 넣기로 결정했습니다. header.js가layout.js 외부에 있으므로 사용자가 로그인 상태를 유지하는지 테스트해야 합니다.

해결 방법: 추가했습니다.

으아악

에서 layout.js(기본적으로 Next.js와 함께 제공되는 파일)로 이동하고 "내보내는" 함수의 매개변수에 세션을 전달합니다(기본 함수 RootLayout이 내보내집니다). 그런 다음 모든 return() 매개변수를 .

이것은 코드의 일부입니다:

으아악

중요 부분: 'use client'选项，Next将不允许您导出元数据，因此您需要删除从代码中导出 const 元数据 = {...을 사용하는 경우.

UPDATE: 어떤 이유로 Vercel에서는 작동하지 않습니다(로컬에서 실행되더라도). 문제를 해결하고 답변을 업데이트하려고 노력하겠습니다. TL;DR: 이 솔루션은 로컬에서는 작동하지만 Vercel에 배포하면 작동하지 않습니다.