Nested routes with folders in NextJS

Introduction

Nested routes help organize pages in a clear folder structure. They make your app easier to navigate and maintain.

You want to group related pages under one section, like blog posts or user profiles.

You need URLs that reflect a hierarchy, such as /products/shoes or /dashboard/settings.

You want to keep your code organized by separating pages into folders.

You want to create subpages inside a main page folder.

You want to reuse layouts or components for a group of pages.

Syntax

NextJS

app/
  folderName/
    page.tsx
    subFolder/
      page.tsx

Each folder inside app/ represents a route segment.

A page.tsx file inside a folder becomes the page for that route.

Examples

This creates a route at /about.

NextJS

app/
  about/
    page.tsx

This creates /blog and dynamic nested routes like /blog/post-1.

NextJS

app/
  blog/
    page.tsx
    [slug]/
      page.tsx

This creates a nested route at /dashboard/settings.

NextJS

app/
  dashboard/
    settings/
      page.tsx

Sample Program

This example shows a /dashboard page and a nested /dashboard/profile page. Each page is in its own folder with a page.tsx file.

NextJS

app/
  dashboard/
    page.tsx
    profile/
      page.tsx

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard Home</h1>;
}

// app/dashboard/profile/page.tsx
export default function ProfilePage() {
  return <h1>User Profile</h1>;
}

Important Notes

Folder names become URL parts automatically.

Use page.tsx inside folders to define pages.

Dynamic routes use square brackets, like [id].

Summary

Nested folders in app/ create nested routes.

Each page.tsx file is a page for its folder path.

This keeps your app organized and URLs clear.