Nested routes with folders in NextJS - Step-by-Step Execution

Concept Flow - Nested routes with folders

Start: App Router folder

↓

Create folder for route segment

↓

Add page.tsx inside folder

↓

Next.js reads folder as nested route

↓

Render nested page when URL matches

↓

Repeat for deeper nesting

↓

End: Nested routes available

Next.js reads folders inside the app directory as nested routes. Each folder with a page.tsx file becomes a route segment, creating nested URLs.

Execution Sample

NextJS

app/
  dashboard/
    page.tsx
    settings/
      page.tsx

This folder structure creates nested routes: /dashboard and /dashboard/settings.

Execution Table

Step	Action	Folder/File Processed	Route Segment Created	URL Path	Rendered Component
1	Read app folder	app/	root	/	Root layout or page if exists
2	Read folder inside app	app/dashboard/	dashboard	/dashboard	dashboard/page.tsx component
3	Read nested folder	app/dashboard/settings/	settings	/dashboard/settings	dashboard/settings/page.tsx component
4	Match URL /dashboard	app/dashboard/page.tsx	dashboard	/dashboard	Render dashboard/page.tsx
5	Match URL /dashboard/settings	app/dashboard/settings/page.tsx	settings	/dashboard/settings	Render dashboard/settings/page.tsx
6	No more folders	-	-	-	Stop reading routes

💡 All folders with page.tsx files processed, nested routes created accordingly.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
currentRoute	/	/dashboard	/dashboard/settings	/dashboard/settings
renderedComponent	root layout/page	dashboard/page.tsx	dashboard/settings/page.tsx	dashboard/settings/page.tsx

Key Moments - 3 Insights

Why does creating a folder inside app with a page.tsx file create a nested route?

Because Next.js treats each folder with a page.tsx as a route segment, building the URL path from folder names as shown in execution_table rows 2 and 3.

What happens if a folder does not have a page.tsx file?

Next.js will not create a route for that folder segment, so no URL path or component is rendered for it, stopping route nesting at that level.

How does Next.js know which component to render for a nested URL?

It matches the URL path segments to folder names and renders the page.tsx inside the matching folder, as shown in execution_table rows 4 and 5.

Visual Quiz - 3 Questions

Look at the execution_table, what component is rendered at step 5 for URL /dashboard/settings?

A app/page.tsx

B dashboard/page.tsx

C dashboard/settings/page.tsx

D settings/page.tsx

💡 Hint

Check the Rendered Component column at step 5 in execution_table.

At which step does Next.js create the route segment for /dashboard?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the Route Segment Created column in execution_table.

If the folder app/dashboard/settings/ did not have a page.tsx file, what would happen to the nested route?

A The /dashboard/settings route would not exist

B Next.js would render dashboard/page.tsx for /dashboard/settings

C Next.js would throw an error

D The /dashboard/settings route would render an empty page

💡 Hint

Refer to key_moments about folders without page.tsx files.

Concept Snapshot

Next.js nested routes use folders inside the app directory.
Each folder with a page.tsx file creates a route segment.
URL path matches folder names in order.
Nested folders create nested routes.
No page.tsx means no route segment.
This builds clean, nested URLs automatically.

Full Transcript

In Next.js, nested routes are created by organizing folders inside the app directory. Each folder that contains a page.tsx file becomes a segment of the URL path. For example, a folder named dashboard with a page.tsx inside creates the /dashboard route. If inside dashboard there is another folder settings with its own page.tsx, it creates the nested route /dashboard/settings. Next.js reads these folders step-by-step, matching URL paths to folder names and rendering the corresponding page.tsx components. If a folder does not have a page.tsx file, Next.js does not create a route for that segment. This folder-based routing system helps build nested URLs easily and clearly.

Practice

1. In Next.js 14 with the App Router, what does placing a page.tsx file inside a nested folder under app/ do?

easy

A. Bundles all pages into a single route regardless of folder structure.

B. Overrides the root page.tsx and disables routing.

C. Creates a nested route matching the folder path in the URL.

D. Automatically generates API endpoints instead of pages.

Solution

1. Step 1: Understand folder structure in Next.js App Router

   Each folder inside app/ represents a route segment in the URL.

2. Step 2: Role of page.tsx in nested folders

   A page.tsx inside a nested folder creates a page for that nested route path.

3. Final Answer:

   Creates a nested route matching the folder path in the URL. -> Option C

4. Quick Check:

   Nested folder + page.tsx = nested route [OK]

Hint: Remember: folder path + page.tsx = nested URL route [OK]

Common Mistakes:

• Thinking nested folders disable routing
• Confusing API routes with page routes
• Assuming all pages merge into one route

2. Which of the following is the correct folder and file structure to create a nested route /dashboard/settings in Next.js App Router?

easy

A. app/dashboard/settings/page.tsx

B. app/dashboard-settings/page.tsx

C. app/dashboard/page.tsx/settings.tsx

D. app/page.tsx/dashboard/settings.tsx

Solution

1. Step 1: Identify folder nesting for nested routes

   Nested routes require nested folders matching the URL segments.

2. Step 2: Match file placement for the nested page

   The page.tsx file must be inside the deepest folder representing the route.

3. Final Answer:

   app/dashboard/settings/page.tsx -> Option A

4. Quick Check:

   Nested folders + page.tsx file = nested route [OK]

Hint: Use nested folders named after URL segments with page.tsx inside [OK]

Common Mistakes:

• Placing page.tsx outside the nested folder
• Using hyphens instead of folders for nested routes
• Misplacing files inside page.tsx instead of folders

3. Given this folder structure inside app/:

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

What URL will render the page inside app/blog/[slug]/page.tsx?

medium

A. /blog/[slug]

B. /blog/*

C. /blog/{slug}

D. /blog/:slug

Solution

1. Step 1: Understand dynamic route syntax in Next.js

   Folders with square brackets like [slug] represent dynamic route segments.

2. Step 2: Translate dynamic folder to URL pattern

   The dynamic segment is represented as :slug in URL patterns, meaning any value matches.

3. Final Answer:

   /blog/:slug -> Option D

4. Quick Check:

   Dynamic folder [slug] = URL param :slug [OK]

Hint: Dynamic folders [name] map to :name in URLs [OK]

Common Mistakes:

• Using literal [slug] in URL
• Confusing dynamic segment syntax
• Assuming wildcard * matches dynamic segments

4. You have this folder structure:

app/
  products/
    page.tsx
  details/
    page.tsx

But navigating to /products/details shows a 404 error. What is the likely cause?

medium

A. The details/page.tsx file is misplaced; it should be inside products/details/page.tsx.

B. The details folder should be named [details] for dynamic routing.

C. The products folder must not have its own page.tsx when nested routes exist.

D. Missing page.tsx inside details folder.

Solution

1. Step 1: Verify folder and file placement

   The details/page.tsx must be inside products/details/ folder to match the route /products/details.

2. Step 2: Check the given structure

   The structure shows details/page.tsx inside app/ root, not nested under products/.

3. Final Answer:

   The details/page.tsx file is misplaced; it should be inside products/details/page.tsx. -> Option A

4. Quick Check:

   Nested route files must be inside matching nested folders [OK]

Hint: Check file location matches nested folder path exactly [OK]

Common Mistakes:

• Misplacing nested page.tsx outside correct folder
• Confusing dynamic and static folder names
• Removing parent page.tsx unnecessarily

5. You want to create a nested route /profile/settings/privacy in Next.js App Router. You also want to share a layout between /profile/settings and /profile/settings/privacy. How should you organize your folders and files inside app/?

hard

A. app/profile/settings/privacy/page.tsx only; layouts are not needed for nested routes

B. app/profile/settings/layout.tsx, app/profile/settings/page.tsx, app/profile/settings/privacy/page.tsx

C. app/profile/layout.tsx, app/profile/settings/page.tsx, app/profile/settings/privacy/page.tsx

D. app/profile/settings/page.tsx, app/profile/settings/privacy/layout.tsx, app/profile/settings/privacy/page.tsx

Solution

1. Step 1: Understand layout sharing in nested routes

   Layouts placed in a folder apply to all nested routes inside that folder.

2. Step 2: Organize folders for shared layout

   To share layout between /profile/settings and /profile/settings/privacy, place layout.tsx inside settings/ folder.

3. Step 3: Place page.tsx files correctly

   Put page.tsx inside settings/ and inside settings/privacy/ for those pages.

4. Final Answer:

   app/profile/settings/layout.tsx, app/profile/settings/page.tsx, app/profile/settings/privacy/page.tsx -> Option B

5. Quick Check:

   Layout in parent folder shares UI with nested pages [OK]

Hint: Put layout.tsx in parent folder to share with nested routes [OK]

Common Mistakes:

• Placing layout.tsx too deep to share with sibling routes
• Omitting layout.tsx and expecting shared UI
• Misplacing page.tsx files outside correct folders