All 5 Custom App & Document in Pages Router questions
More in Custom App & Document in Pages Router
What is the custom Document component used for in the Pages Router? Why can you not use React hooks like useState inside the custom Document component? If a project is migrating from the Pages Router to the App Router, what happens to the custom App and Document components? How would you add global error tracking or analytics scripts using the custom App and Document components together?
Advertisement
Back to results for “Layouts”
Next.js › Custom App & Document in Pages Router

What is the purpose of the custom App component in the Pages Router?

Beginner

Answer

The custom App component, defined in pages/_app.js, wraps every page in your application, making it the perfect place to add global styles, shared layouts, or context providers that need to be available across the entire site.
// pages/_app.js
import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
Real-world example A website imports its global CSS file once inside _app.js, ensuring consistent styling like fonts and colors are applied across every single page in the application.

Common follow-ups: Can you add a global navigation bar inside the custom App component?;Does the custom App component exist in the App Router as well?

Layouts & Templates;Styling in Next.js (CSS Modules Tailwind & Styled Components)
All 5 Custom App & Document in Pages Router questions