The title is rewritten to: Uncertain if Nextjs is detecting _app.js; Error: useSession must be wrapped in a <SessionProvider />-PHP Chinese Network Q&A

I've been following some tutorials on Nextjs, Prisma and Auth0. My problem is, after trying to create a login/logout button on the header (by adding import { useSession,signIn,signOut } from "next-auth/react" to header.js file), the following error occurs in next.jsError: [next-auth]: \`useSession\` must be wrapped in \ . I tried creating the _app.js file in the root folder, then at /pages/_app.js and finally at /app/_app Created at .js. None of these work.

This is the content of my_app.js file:

import { SessionProvider } from "next-auth/react" export default function App({ Component, pageProps: { session, ...pageProps }, }) { return (    ) }

How do I make sure Next is detecting and using it? I think the file is being ignored to some extent.

I tried changing the location of the _app.js file from the root folder of the project to /pages/_app.js and finally to ;app/_app.js . I also tried deleting the .next folder and re-running the server but it didn't work.

Update 1: Next.js version I'm using: v13.4.4

Update 2: I've added the console.log() function to the _app.js file and it prints to the terminal, but not on Firefox. _app.js Is the detection normal or is there a problem?

I (sort of) fixed it! Check my answer below. But it doesn't work when deployed to Vercel.

reply all (1)

P粉9669797652023-09-04 23:19:18 1 floor

I think I've solved this problem, I decided to forget about _app.js and put everything in my custom layout.js file. I still need to test if the user will stay logged in since header.js is outside of layout.js.

How I solved it: I added

'use client' import { SessionProvider } from "next-auth/react";

Go tolayout.js(the file that comes with Next.js by default) and pass the session in the parameter of the function being "exported" (the default function RootLayout is exported). Then I wrapped all return() parameters with .

This is part of the code:

export default function RootLayout({ children, session }) { return (   {children}   ) }

IMPORTANT PART: If you use the'use client'option, Next will not allow you to export metadata, so you need to remove export const metadata from your code = {....

UPDATE: For some reason it doesn't work on Vercel (even though it runs locally). I'll try to fix it and update my answer.TL;DR:This solution works locally but does not work when deployed to Vercel.