Nested routes with folders in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is rendered by this nested route component?

Consider a Next.js app using the App Router. The folder structure is:

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

If the user visits /dashboard/settings, what will be rendered?

NextJS

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

app/dashboard/settings/page.tsx
export default function Settings() {
  return <h2>Settings Page</h2>
}

A Nothing is rendered because nested routes require layout files.

B Both <h1>Dashboard Home</h1> and <h2>Settings Page</h2> are rendered.

C Only <h1>Dashboard Home</h1> is rendered.

D Only <h2>Settings Page</h2> is rendered.

💡 Hint

Think about how Next.js renders page components in nested folders without layouts.

In Next.js App Router, visiting /dashboard/settings renders the page.tsx inside settings folder only. The parent page.tsx is not rendered unless included via layouts.

📝 Syntax

intermediate

Which file name correctly defines a nested route in Next.js App Router?

You want to create a nested route at /blog/post. Which file path and name is correct?

A app/blog/post/page.tsx

B app/blog-post/page.tsx

C app/blog/post.tsx

D app/blog/post/index.tsx

💡 Hint

Next.js App Router uses folders for routes, not file names with dots.

Nested routes are created by folders. The file app/blog/post/page.tsx defines the /blog/post route.

🔧 Debug

advanced

Why does visiting /profile/settings show a 404 error?

Given this folder structure:

app/profile/page.tsx
app/profile/settings.tsx

Visiting /profile/settings returns 404. Why?

A Because nested routes require a folder named settings with a page.tsx inside, not a file named settings.tsx.

B Because the file settings.tsx must be named settings/page.tsx to work.

C Because the profile folder is missing a layout.tsx file.

D Because Next.js does not support nested routes under profile.

💡 Hint

Check how nested routes are defined in the App Router.

In Next.js App Router, nested routes must be folders with page.tsx files. A file named settings.tsx inside profile folder does not create /profile/settings route.

❓ state_output

advanced

What is the output when navigating between nested routes with shared layout?

Given this folder structure:

app/dashboard/layout.tsx
app/dashboard/page.tsx
app/dashboard/reports/page.tsx

The layout.tsx contains a state hook that increments a counter on button click.

What happens to the counter state when navigating from /dashboard to /dashboard/reports?

NextJS

app/dashboard/layout.tsx
'use client'
import { useState } from 'react'
export default function DashboardLayout({ children }) {
  const [count, setCount] = useState(0)
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment {count}</button>
      <main>{children}</main>
    </>
  )
}

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

app/dashboard/reports/page.tsx
export default function Reports() {
  return <h2>Reports Page</h2>
}

A The counter increments twice automatically on navigation.

B The counter resets to 0 when navigating to /dashboard/reports.

C The counter state is preserved and increments continue from previous value.

D The counter state is lost and causes an error.

💡 Hint

Layouts in Next.js persist state across nested routes.

Layouts wrap nested routes and keep their React state alive when navigating between child pages.

🧠 Conceptual

expert

How does Next.js App Router handle parallel nested routes with folders?

You want to render two different nested routes side-by-side under /dashboard:

- /dashboard/analytics
- /dashboard/notifications

You create folders app/dashboard/analytics and app/dashboard/notifications each with page.tsx.

How do you configure the layout to render both routes simultaneously?

A Place both page.tsx files inside the same folder and import them in layout.tsx to render side-by-side.

B Use named slots in layout.tsx with <Slot name="analytics" /> and <Slot name="notifications" /> and create parallel routes folders with @analytics and @notifications.

C Use nested layouts inside each folder and rely on default rendering order to show both routes.

D Create a single page.tsx that conditionally renders analytics or notifications based on URL.

💡 Hint

Parallel routes use special folder names with @ and named slots in layouts.

Next.js App Router supports parallel routes by using folders prefixed with @ and matching named components in layouts to render multiple routes simultaneously.

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