The App Router

Each folder under app/ is a URL segment. Add a page.tsx and that segment becomes a routable URL.

4 min read Level 2/5 #nextjs#app-router#routing

What you'll learn

Map folders to URL segments
Recognize the file-convention pattern (page, layout, loading, error)
See how nesting composes layouts

The App Router replaces the older Pages Router with a more powerful model: folders are URL segments, and special filenames inside each segment define UI behavior.

Folders Become URLs

app/
  page.tsx            # /
  about/
    page.tsx          # /about
  blog/
    page.tsx          # /blog
    [slug]/
      page.tsx        # /blog/:slug

A folder without a page.tsx is not a route — it can still host shared layout or loading files for its children, but the URL itself will 404.

The File Conventions

Inside any segment folder you can drop files with special names:

page.tsx — the UI for that route
layout.tsx — wraps the segment and its children
loading.tsx — Suspense fallback shown while data loads
error.tsx — error boundary for the segment
not-found.tsx — rendered when notFound() is called
template.tsx — like layout, but remounts on navigation
route.ts — HTTP API for the segment

Nesting Composes

Layouts compose top-down. A page deep in the tree is wrapped by every layout above it.

// app/dashboard/layout.tsx — wraps /dashboard and its children
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="dashboard">
      <aside>Nav</aside>
      <section>{children}</section>
    </div>
  );
}

A request to /dashboard/settings renders the root layout, then the dashboard layout, then app/dashboard/settings/page.tsx inside both.

Quick Mental Model

Think of app/ as the routing tree. Each folder is a node, special filenames are the node’s behavior, and nesting builds the final UI by composing layouts around the leaf page. The next lesson zooms in on page.tsx.

page.tsx — The Route's UI →