How file-based routing works in the Next.js App Router

Folders Are Routes

In the App Router, the folder structure inside app/ directly maps to your URL structure. A folder becomes a route segment. To make a route accessible, the folder must contain a page.tsx file.

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

Special Files in App Router

Each route segment can contain these reserved filenames:

page.tsx      # The UI for this route (required to make route public)
layout.tsx    # Shared UI wrapping this segment and its children
loading.tsx   # Automatic loading UI (Suspense boundary)
error.tsx     # Error boundary for this segment
not-found.tsx # Shown when notFound() is called

Layouts Are Persistent

Layouts don't re-render when navigating between child routes. This means your navbar and sidebar stay mounted while only the page content swaps. Layouts receive a children prop:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main>{children}</main>
    </div>
  )
}

Layouts nest. The root app/layout.tsx wraps everything. A dashboard/layout.tsx wraps only dashboard routes. This nesting is how you build section-specific layouts without duplication.