What is the purpose of the _app.js file?

The _app.js file holds the code that every page shares, because Next.js uses it to initialize every page. It is a custom App component that wraps all page components. You use it to:

• Keep state when navigating between pages
• Add global CSS
• Inject additional data into pages
• Handle global error boundaries
• Add common layout components

Next.js passes it the active page as Component and that page's props as pageProps. Whatever wraps Component, such as the header and footer below, appears on every page.

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <GlobalHeader />
      <Component {...pageProps} />
      <GlobalFooter />
    </div>
  );
}

export default MyApp;

_app.js belongs to the Pages Router. In the App Router, the root app/layout.js replaces both _app.js and _document.js.