What's the alternative to pages/_app.js in app router in NextJS?

Question

I am just starting with NextJS and there is a new router called app router. Now I have some tutorials using pages/_app.js from the NextJS page router. So, what's the corresponding file for that in the app router?

score 1 · Answer 1 · answered May 14 '23 at 13:21

Inside app each folder represent a route segment. The very first folder i.e app itself represent the root route segment.

app/layout.js will now be the equivalent for _app.js in the new Next 13 app directory. Since, it is the one wrapping all route and sub routes of your whole app.

score 0 · Answer 2 · answered May 14 '23 at 13:22

there is not a corresponding file in app directory. this is what pages/_app.js used for

Set up a global state
Define global components
Inject props into pages
Add global CSS

I think if you create a context provider and use it in RootLayout like this

import NavBar from "./Navbar";
// you set the global state for auth
// you might create different contexts for different purpose
import AuthContext from "./AuthContext";
import "./global.css";
import "anyNpmModule.css";

export default function RootLayout({children }:{children:React.ReactNode}) 
 {
  return (
    <html lang="en">
      <head />
      <body>
        <main>
          <AuthContext>
            <main>
              <NavBar />
              {children}
            </main>
          </AuthContext>
        </main>
      </body>
    </html>
  );
}

What's the alternative to pages/_app.js in app router in NextJS?

2 Answers2