Next.js File-Based Routing Explained with Examples

Most traditional web frameworks require you to write explicit route configuration — a file listing every URL path and which component or controller handles it. Next.js takes a fundamentally different approach called file-based routing: the folders and files inside app/ ARE the route configuration. There is no separate routes.js file to maintain and keep in sync with your actual pages.

This lesson covers the three routing patterns you'll use constantly: simple static routes for fixed pages like /about, nested routes for hierarchical URLs like /blog/tech, and route groups, a special folder syntax that lets you organize files logically without affecting the actual URL structure.

Learning Objectives

• Create static routes using simple folder and page.tsx combinations.
• Build nested routes that reflect hierarchical URL structures.
• Use route groups to organize files without changing the URL.
• Understand how folder nesting depth maps directly to URL path depth.
• Recognize the difference between a folder that is a route and one that is purely organizational.

Core Definitions

• Static route: A route with a fixed, unchanging URL path, created by a plain folder name containing a page.tsx file.
• Nested route: A route whose URL reflects a folder hierarchy, such as app/blog/tech/page.tsx mapping to /blog/tech.
• Route group: A folder named in parentheses, like (marketing), that organizes files inside app/ without adding a segment to the URL path.
• URL segment: One portion of a URL path, separated by slashes; each folder in app/ (excluding route groups) typically becomes one segment.
• Root route: The route defined by app/page.tsx, corresponding to the site's homepage at '/'.

Detailed Explanation

The simplest routing pattern is a static route. Creating app/contact/page.tsx automatically makes /contact a live, visitable URL — no configuration file, no manual registration. The folder name becomes the URL segment, and the page.tsx inside it supplies the content.

Nested routes extend this naturally. If you create app/blog/page.tsx, that's your blog listing page at /blog. Adding app/blog/tech/page.tsx creates a second, deeper page at /blog/tech. Each additional folder level adds one more segment to the URL path — the folder nesting depth and the URL path depth mirror each other exactly. This makes the routing structure highly predictable: you can often guess a project's URL structure just by looking at its app/ folder in a file explorer.

Route groups solve an organizational problem that pure nesting can't: sometimes you want to group related pages together in your file system, or apply a shared layout to a set of pages, WITHOUT that grouping appearing in the URL. Wrapping a folder name in parentheses, like (marketing), tells Next.js to treat it purely as an organizational folder — it has zero effect on the resulting URL. So app/(marketing)/about/page.tsx still resolves to /about, not /marketing/about; the parentheses folder is invisible to the URL while still letting you nest a layout.tsx inside (marketing) that applies only to marketing pages, and a separate (shop)/layout.tsx that applies only to shop pages, all without cluttering the URL structure.

A related but distinct file is not-found.tsx, which Next.js automatically renders when no matching route exists for a requested URL — though the routing conventions above (static, nested, route groups) are the primary tools you'll reach for when structuring the majority of a site's pages.

Diagram Description

Visualize folder-to-URL mapping:

app/
├── page.tsx → '/'
├── contact/
│ └── page.tsx → '/contact'
├── blog/
│ ├── page.tsx → '/blog'
│ └── tech/
│ └── page.tsx → '/blog/tech'
└── (marketing)/ ← route group, invisible in URL
├── layout.tsx (applies only within this group)
├── about/
│ └── page.tsx → '/about' (NOT '/marketing/about')
└── careers/
└── page.tsx → '/careers' (NOT '/marketing/careers')

Comparison Table

Folder Pattern	Example Path	Resulting URL	Notes
Static folder	app/contact/page.tsx	/contact	Folder name becomes the URL segment directly
Nested folders	app/blog/tech/page.tsx	/blog/tech	Each folder level adds one URL segment
Route group	app/(marketing)/about/page.tsx	/about	Parentheses folder is stripped from the URL entirely
Root route	app/page.tsx	/	Defines the homepage

Next.js Practical Example

// app/page.tsx → '/'
export default function HomePage() {
  return <h1>Home</h1>;
}

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

// app/blog/tech/page.tsx → '/blog/tech'
export default function TechBlogPage() {
  return <h1>Tech Blog Posts</h1>;
}

// app/(marketing)/about/page.tsx → '/about' (route group is invisible in URL)
export default function AboutPage() {
  return <h1>About Us</h1>;
}

// app/(marketing)/layout.tsx — shared layout ONLY for pages inside (marketing)
export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return <div className="marketing-wrapper">{children}</div>;
}

Notice that TechBlogPage lives two folders deep (app/blog/tech/) and correspondingly resolves to a URL two segments deep (/blog/tech) — the nesting depth of folders and URL segments always match exactly for regular folders. AboutPage, however, lives inside app/(marketing)/about/, yet resolves to just /about, not /marketing/about, because the parentheses around (marketing) explicitly exclude that folder from the URL. This lets MarketingLayout apply exclusively to pages grouped under (marketing) — for organizational and shared-layout purposes — while keeping URLs clean and unaffected by that internal file organization.

Industry Examples

• News websites commonly nest routes by category and article, such as app/world/politics/[slug]/page.tsx mapping to a specific article's clean URL.
• SaaS marketing sites use a (marketing) route group for public pages like pricing and about, paired with a separate (app) route group for the authenticated dashboard, each with its own layout but clean, non-nested URLs.
• E-commerce platforms nest category and subcategory pages, such as app/shop/electronics/laptops/page.tsx, mirroring the store's real navigation hierarchy in both the file system and the URL.
• Documentation platforms use route groups to separate versioned docs internally (e.g., (v1) and (v2) folders) while keeping public URLs like /docs/getting-started consistent regardless of internal versioning organization.
• Multi-brand companies use route groups to apply different root-level layouts (fonts, colors, headers) per brand section of a single Next.js app without changing the clean public-facing URL structure.

Interview Questions and Answers

Q1. How does Next.js determine a page's URL in the App Router?

Next.js reads the folder structure inside the app/ directory directly. Each folder (except route groups) becomes one segment of the URL path, and a page.tsx file inside a folder marks it as an accessible route, with nesting depth in folders matching nesting depth in the resulting URL.

Q2. What is a route group and what problem does it solve?

A route group is a folder wrapped in parentheses, like (marketing), that organizes files and can hold its own layout.tsx without adding a segment to the URL. It solves the problem of needing to group and share layouts across a set of pages while keeping the public URL structure clean and flat.

Q3. If you have app/shop/shoes/page.tsx, what URL does it map to?

It maps to /shop/shoes. Each folder in the nested path becomes one segment in the URL, so a two-level-deep folder structure produces a two-segment URL path.

Q4. Does wrapping a folder in parentheses affect its ability to hold a layout.tsx?

No. A route group folder can still contain its own layout.tsx, which applies to all pages nested within that group. The parentheses only affect the URL — they have no effect on the file's ability to define shared layouts, loading states, or other special files.

Q5. What determines the homepage route in the App Router?

The homepage is defined by app/page.tsx directly at the root of the app/ directory, corresponding to the '/' URL path with no additional segments.

MCQs With Answers

1. What URL does app/services/page.tsx map to?

1. /app/services
2. /services
3. /page/services
4. /services/page

Answer: B. /services

Explanation: The folder name becomes the URL segment directly, and the page.tsx file inside marks it as an accessible route at /services.

2. What is the primary purpose of a route group (folder in parentheses)?

1. To make the URL longer
2. To organize files and apply layouts without affecting the URL
3. To block a route from being accessed
4. To create a dynamic route

Answer: B. To organize files and apply layouts without affecting the URL

Explanation: Route groups let developers organize related files and apply shared layouts to a group of pages while keeping that grouping invisible in the final URL.

3. Given app/(shop)/cart/page.tsx, what is the resulting URL?

1. /shop/cart
2. /(shop)/cart
3. /cart
4. /shop

Answer: C. /cart

Explanation: Parentheses folders are stripped from the URL entirely, so despite being nested inside (shop), the page resolves to /cart, not /shop/cart.

4. How many URL segments does app/a/b/c/page.tsx produce?

1. 1
2. 2
3. 3
4. 4

Answer: C. 3

Explanation: Each regular (non-route-group) folder adds one segment to the URL, so three nested folders (a, b, c) produce a three-segment path: /a/b/c.

5. Which file defines the site's homepage route ('/')?

1. app/home/page.tsx
2. app/index.tsx
3. app/page.tsx
4. app/root/page.tsx

Answer: C. app/page.tsx

Explanation: The page.tsx file located directly at the root of the app/ directory defines the homepage, corresponding to the '/' URL.

Common Mistakes to Avoid

• Assuming a route group folder name (in parentheses) appears in the URL, when it is actually stripped out entirely.
• Creating a folder without a page.tsx file and expecting it to be a visitable route on its own.
• Miscounting nested folder depth versus resulting URL depth when route groups are involved, since route groups don't add a segment.
• Forgetting that multiple route groups can coexist at the same level (e.g., (marketing) and (shop)) each with completely different layouts, without any URL collision.
• Confusing static/nested routing with dynamic routing (covered separately), and trying to hardcode folders for content that should instead use dynamic segments.

Interview Notes

• File-based routing: app/ folder structure directly determines URL structure, with no separate routing config file.
• Each regular folder in the app/ directory adds one segment to the URL path; page.tsx marks a folder as an accessible route.
• Route groups (folder names in parentheses) organize files and can hold layouts without adding a URL segment.
• app/page.tsx at the root defines the homepage ('/').
• Folder nesting depth and URL segment depth match exactly, except when route groups are involved.

Key Takeaways

• Next.js's file-based routing removes the need for a separate route configuration file — folders themselves define your site's URL structure.
• Nested folders naturally produce nested URLs, keeping your file system a reliable map of your site's navigation.
• Route groups are the tool for applying organization and shared layouts to sets of pages without leaking that structure into public URLs.
• Understanding these three patterns — static, nested, and route groups — covers the majority of routing needs before diving into dynamic routes.

Summary

Next.js's file-based routing turns the app/ directory's folder structure directly into your site's URL structure, eliminating the need for a separate routes configuration file. Static routes are created by a folder containing a page.tsx file, with the folder name becoming the URL segment. Nested routes extend this naturally — folder nesting depth matches URL path depth exactly. Route groups, created by wrapping a folder name in parentheses like (marketing), let you organize files and apply shared layouts to a set of pages without that grouping appearing in the public URL. Together, these patterns give you full control over both your project's file organization and its resulting URL structure.