App Router

Learn the new App Router structure and file-based routes.

App Router

The App Router is Next.js's recommended routing system since Next.js 13. It works in the app/ directory; each folder is a path segment, each page.js a page.

The old pages/ directory is still supported but new projects should start with App Router. They do not mix; App Router takes priority.

App Router makes Server Components the default; this improves performance.

Nested routes

In the App Router the folder structure nests routes. app/blog/[id]/page.js gives a dynamic route; [id] is a URL parameter.

You can place a layout.js in each folder; this layout wraps all pages below it. The parent layout wraps the child layout, so frames nest.

This makes it easy to manage shared UI (top nav, footer) across pages.

Exercise Write root layout

Write a RootLayout component: destructure { children }, return <html><body>{children}</body></html>. export default RootLayout.

Show example solution

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Test yourself

Where is layout defined?
- app/route.js
- app/layout.js
- app/style.css
- app/config.json
Show answer

app/layout.js — app/layout.js defines the layout.

Layout file

// app/____.js
export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

Show answer

// app/layout.js
export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

App Router: match the terms

page.js

Page content
layout.js

Frame
[id]

Dynamic parameter
app/

Route root

Next lesson: Page and layout

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies