Nested routes with folders in NextJS - Mini Project: Build & Apply

Nested routes with folders

📖 Scenario: You are building a simple website with multiple pages organized in folders to create nested routes.This helps visitors navigate easily and keeps your code neat.

🎯 Goal: Create nested routes in a Next.js app using folders inside the app directory.Build a homepage, an about page inside an about folder, and a contact page inside a contact folder.

📋 What You'll Learn

Create a homepage at app/page.tsx with a heading 'Home Page'.

Create an about folder inside app with a page.tsx file showing heading 'About Us'.

Create a contact folder inside app with a page.tsx file showing heading 'Contact Us'.

Use React functional components with default exports for each page.

💡 Why This Matters

🌍 Real World

Websites often have multiple pages grouped by topic or function. Using nested folders for routes keeps code organized and URLs user-friendly.

💼 Career

Understanding Next.js routing and folder structure is essential for building scalable React applications and working in modern web development teams.

1

Create the homepage component

Create a file app/page.tsx with a React functional component named HomePage that returns an <h1> with the text 'Home Page'. Export it as default.

NextJS

// Create the HomePage component in app/page.tsx
// Your code here

Hint

Use export default function HomePage() { return <h1>Home Page</h1>; }

2

Add the About page in a folder

Inside the app folder, create a new folder named about. Inside about, create a file page.tsx with a React functional component named AboutPage that returns an <h1> with the text 'About Us'. Export it as default.

NextJS

// Create AboutPage component in app/about/page.tsx
// Your code here

Hint

Create app/about/page.tsx with export default function AboutPage() { return <h1>About Us</h1>; }

3

Add the Contact page in a folder

Inside the app folder, create a new folder named contact. Inside contact, create a file page.tsx with a React functional component named ContactPage that returns an <h1> with the text 'Contact Us'. Export it as default.

NextJS

// Create ContactPage component in app/contact/page.tsx
// Your code here

Hint

Create app/contact/page.tsx with export default function ContactPage() { return <h1>Contact Us</h1>; }

4

Verify folder structure and exports

Ensure your app folder has page.tsx for the homepage, and inside app/about and app/contact folders, each has a page.tsx exporting the correct component. Confirm all components are default exports.

NextJS

// Verify folder structure and default exports
// Your code here

Hint

Check that all three components are default exported and located in correct folders.

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