Skip to main content

The App Router

In Next.js version 13, Vercel introduced the App Router, representing a massive structural paradigm shift away from the legacy Pages Router.

The App Router exclusively leverages React Server Components (RSC) and strict folder nesting behaviors to handle navigation and layout inheritance.

The app/ Directory​

All of your frontend routes are mapped inside the app/ directory.

The most critical files are page.tsx and layout.tsx.

1. page.tsx​

For a route segment to be publicly accessible via a URL, you must create a file specifically named page.tsx.

// app/about/page.tsx
// This creates the route: yoursite.com/about

export default function AboutPage() {
  return <h1>About Us</h1>;
}

If you create a folder named app/components/ but do not put a page.tsx inside of it, the folder remains private. This allows you to safely store reusable components next to your routes without accidentally exposing them.

2. layout.tsx​

Layout files wrap multiple pages in a shared UI (like a navigation sidebar or a footer). Layouts persist across route changes and do not re-render, solving state-loss issues present in standard React setups.

// app/layout.tsx
// This wraps every single page in your whole application

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>Global Navigation</nav>
        {children}
      </body>
    </html>
  );
}