How File-Based Routing Works in the Next.js App Router

Next.js file-based routing means the folder structure inside your app directory is the routing table. There is no separate config file listing your routes. You create a folder, and Next.js turns it into a URL segment automatically.

Create a folder named blog inside the app directory, add a page.tsx file to it, and the App Router serves that page at /blog.

App.tsx

// app/blog/page.tsx
export default function BlogIndexPage() {
  return <h1>Blog</h1>;
}

Start the dev server and visit /blog in the browser. The heading renders. No route needed to be registered anywhere else, because the folder path and the file name did the registration for you.

Nesting folders nests the URL

Each additional folder level adds one more segment to the URL. A folder placed inside the blog folder becomes a path segment that follows /blog.

text

app/
  blog/
    page.tsx        -> /blog
    archive/
      page.tsx      -> /blog/archive

The inner folder needs its own page file to be reachable on its own. Nesting folders without adding that file only nests the folder structure on disk, not the routes a visitor can open.

A route is not public until it has a page file

Creating a folder alone does not expose a URL. Next.js only makes a segment publicly accessible once that folder contains a page file, or a route file for an API endpoint. Everything else inside the app directory stays private by default.

App.tsx

// app/dashboard/settings/page.tsx
export default function SettingsPage() {
  return <h1>Settings</h1>;
}

Only /dashboard/settings becomes reachable here. If the parent dashboard folder has no page file of its own, visiting /dashboard returns a 404, even though the folder exists on disk.

This is what lets you colocate components, hooks, and utility files inside route folders. A helper file saved next to this page never becomes a URL, because its name does not match a routing convention.

Layouts wrap segments without adding a URL

A layout file renders shared UI around every page inside its folder, but it never adds its own segment to the path. Every page inside the same folder renders wrapped inside it, while the URL stays exactly what each page file defines.

App.tsx

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <section className="dashboard-shell">{children}</section>;
}

For the full rules on nesting and sharing layouts across pages, see layouts in Next.js.

What each special file does

Dynamic segments extend this same system with square-bracket folder names, which is covered in dynamic routes in Next.js.

Common mistake

Adding a folder and expecting it to route by itself is the most common mistake beginners make. Without a page file inside it, the folder stays invisible to visitors even though it appears in the project's file tree. If a route returns a 404 you did not expect, check for a missing page file before checking anything else in your configuration.