File-Based Routing

Every folder under app/ that contains a page.tsx becomes a route. There is no router config file to maintain.

4 min read Level 2/5 #nextjs#routing

What you'll learn

Create static routes by adding folders
Group routes under a shared layout
Add an index page with `page.tsx` at the segment root

File-based routing is the heart of the App Router. The folder tree is the route table, and the framework reads it on every build.

Static Routes

A folder with a page.tsx is a route. Nest folders to nest URLs.

app/
  page.tsx                       # /
  about/page.tsx                 # /about
  marketing/
    pricing/page.tsx             # /marketing/pricing
    contact/page.tsx             # /marketing/contact

No config. The folder structure is the routes.

Index Pages

There is no special index.tsx. A folder’s index is just a page.tsx placed directly inside it. The root app/page.tsx is the homepage at /.

// app/marketing/page.tsx → /marketing
export default function MarketingHome() {
  return <h1>Marketing Home</h1>;
}

Shared Layouts

Drop a layout.tsx inside any folder and every page under it inherits the wrapper.

// app/marketing/layout.tsx
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="marketing">
      <nav>Marketing Nav</nav>
      {children}
    </div>
  );
}

Now /marketing, /marketing/pricing, and /marketing/contact all share that nav.

Folders Without Routes

A folder that has no page.tsx is not routable. It can still hold layout, loading, or template files for its descendants. This is useful for grouping without creating a visitable URL.

The next lesson introduces dynamic segments with [bracket] syntax.

Dynamic Routes — [slug] →