Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where do you put _app.js in the app directory

Documentation for next-auth (version 4) indicates that we need to put the service provider in:

pages/_app.js

I am following the example: https://next-auth.js.org/getting-started/example

If I'm using the experimental app directory instead of the pages directory in nextjs 13, where do we put that _app.js file?

like image 772
NL3294 Avatar asked Oct 24 '25 16:10

NL3294


1 Answers

Unfortunately, you have to have two implementations.

In experimental app directory you have to wrap root layout.

// app/provider.js

"use client";

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

export default function Proiders({ children }) {
  return <SessionProvider>{children}</SessionProvider>;
}

then in root layout

import Provider from "./provider";

export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

similarly you have to wrap _app.js too

import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

api file is the same directory. pages/api/auth/[...nextauth].js

like image 188
Yilmaz Avatar answered Oct 28 '25 05:10

Yilmaz