Question 168610 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search