Back to results for “Routing”
Next.js › Custom App & Document in Pages Router

If a project is migrating from the Pages Router to the App Router, what happens to the custom App and Document components?

Intermediate

Answer

In the App Router, the custom App and Document components are replaced by the root layout file, typically app/layout.js, which combines their responsibilities into a single file where you define the html and body tags and wrap your pages with any global providers or styles.
// app/layout.js replaces both _app.js and _document.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
Real-world example A team migrating an older Next.js project combines the logic from their old _app.js and _document.js files into a single new root layout file as part of adopting the App Router.

Common follow-ups: Can you run both the Pages Router and App Router in the same project during a migration?;What other Pages Router specific files need to be replaced during migration?