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.