Parallel routes concept in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered with parallel routes in Next.js?

Given the following Next.js app router structure using parallel routes, what will be rendered on the page?

app/(dashboard)/page.tsx
app/(dashboard)/settings/page.tsx
app/(marketing)/page.tsx
app/layout.tsx

The main route renders the dashboard parallel route and the marketing parallel route simultaneously.

NextJS

app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>Navigation Bar</nav>
        {children}
      </body>
    </html>
  )
}

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

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

app/(marketing)/page.tsx
export default function MarketingPage() {
  return <h1>Marketing Home</h1>
}

app/page.tsx
import { ReactNode } from 'react'
export default function Page({
  dashboard,
  marketing,
}: {
  dashboard: ReactNode
  marketing: ReactNode
}) {
  return (
    <>
      <section>
        {/* Render dashboard parallel route */}
        {dashboard}
      </section>
      <section>
        {/* Render marketing parallel route */}
        {marketing}
      </section>
    </>
  )
}

A <html lang="en"><body><nav>Navigation Bar</nav><section><h1>Dashboard Home</h1></section><section><h1>Marketing Home</h1></section></body></html>

B <html lang="en"><body><nav>Navigation Bar</nav><h1>Dashboard Home</h1></body></html>

C <html lang="en"><body><nav>Navigation Bar</nav><h1>Marketing Home</h1></body></html>

D <html lang="en"><body><nav>Navigation Bar</nav><section><h1>Settings</h1></section></body></html>

💡 Hint

Remember that parallel routes render multiple segments at the same time inside the layout.

The root layout renders the navigation bar and the children. The main page renders both the dashboard and marketing parallel routes inside separate sections. So both Dashboard Home and Marketing Home headings appear.

📝 Syntax

intermediate

Which code correctly defines a parallel route in Next.js app router?

Which of the following code snippets correctly defines a parallel route segment named admin inside the app directory?

A

app/admin/page.tsx
export default function AdminPage() { return <h1>Admin</h1> }

B

app/admin/(page).tsx
export default function AdminPage() { return <h1>Admin</h1> }

C

app/@admin/page.tsx
export default function AdminPage() { return <h1>Admin</h1> }

D

app/(admin)/page.tsx
export default function AdminPage() { return <h1>Admin</h1> }

💡 Hint

Parallel routes use parentheses around the folder name.

In Next.js app router, parallel routes are defined by wrapping the folder name in parentheses, e.g., (admin). This tells Next.js to treat it as a parallel route segment.

🔧 Debug

advanced

Why does this parallel route not render as expected?

Given this folder structure and code, why does the settings parallel route not appear on the page?

app/layout.tsx
app/(dashboard)/page.tsx
app/(dashboard)/settings/page.tsx
app/page.tsx

Code in app/page.tsx:

export default function Page() {
  return (
    <>
      
    
  )
}

NextJS

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

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

app/page.tsx
import DashboardPage from './(dashboard)/page'

export default function Page() {
  return (
    <>
      <DashboardPage />
    </>
  )
}

A Because the settings route is nested but not explicitly rendered inside the dashboard page component.

B Because the settings page file is named incorrectly and should be settings.tsx.

C Because parallel routes cannot be nested inside other parallel routes.

D Because the app/layout.tsx file is missing the <html> and <body> tags.

💡 Hint

Think about how nested parallel routes render their children.

The settings parallel route is nested inside (dashboard) but the DashboardPage component does not render it. Nested parallel routes must be explicitly rendered in the parent route component to appear.

❓ state_output

advanced

What is the output when toggling parallel routes with state?

Consider a Next.js component that toggles between showing two parallel routes using state. What will be the rendered output after clicking the toggle button once?

NextJS

import { useState } from 'react'

export default function ParallelToggle() {
  const [showMarketing, setShowMarketing] = useState(true)

  return (
    <>
      <button onClick={() => setShowMarketing(!showMarketing)} aria-label="Toggle routes">
        Toggle
      </button>
      <section>
        {showMarketing ? <MarketingPage /> : <DashboardPage />}
      </section>
    </>
  )
}

function MarketingPage() {
  return <h1>Marketing Home</h1>
}

function DashboardPage() {
  return <h1>Dashboard Home</h1>
}

A <button>Toggle</button><section></section>

B <button>Toggle</button><section><h1>Marketing Home</h1></section>

C <button>Toggle</button><section><h1>Dashboard Home</h1></section>

D <button>Toggle</button><section><h1>Settings</h1></section>

💡 Hint

Initial state is true, what happens after one toggle?

The initial state showMarketing is true, so MarketingPage shows. After clicking toggle once, state becomes false, so DashboardPage renders.

🧠 Conceptual

expert

How do parallel routes improve user experience in Next.js?

Which of the following best explains how parallel routes enhance user experience in Next.js applications?

A They automatically prefetch all routes in the background, eliminating any loading delays.

B They allow rendering multiple UI segments simultaneously, enabling faster navigation and preserving UI state across routes.

C They force the app to reload the entire page on every route change to ensure fresh data.

D They restrict rendering to a single route at a time to reduce memory usage.

💡 Hint

Think about how showing multiple UI parts at once affects speed and state.

Parallel routes let Next.js render multiple UI segments side-by-side. This means users can see different parts of the app without waiting for full page reloads, and UI state can be preserved, improving speed and experience.

Practice

1. What is the main purpose of parallel routes in Next.js?

easy

A. To disable navigation between pages

B. To load pages sequentially one after another

C. To replace client-side routing with server-side only

D. To display multiple parts of a page simultaneously

Solution

1. Step 1: Understand what parallel routes do

   Parallel routes allow showing multiple UI sections at the same time on a page.

2. Step 2: Compare options with this understanding

   Only To display multiple parts of a page simultaneously correctly describes this purpose; others describe unrelated behaviors.

3. Final Answer:

   To display multiple parts of a page simultaneously -> Option D

4. Quick Check:

   Parallel routes = show multiple parts [OK]

Hint: Parallel routes show multiple page parts at once [OK]

Common Mistakes:

• Thinking parallel routes load pages one after another
• Confusing parallel routes with disabling navigation
• Assuming parallel routes replace client-side routing

2. Which folder naming pattern is used to define a parallel route in Next.js?

easy

A. Using parentheses like (route)

B. Using square brackets like [route]

C. Using curly braces like {route}

D. Using angle brackets like <route>

Solution

1. Step 1: Recall folder naming for parallel routes

   Next.js uses parentheses around folder names to mark parallel routes.

2. Step 2: Match options to this rule

   Only Using parentheses like (route) uses parentheses, which is correct for parallel routes.

3. Final Answer:

   Using parentheses like (route) -> Option A

4. Quick Check:

   Parallel routes folder = parentheses [OK]

Hint: Parallel routes folders use parentheses ( ) [OK]

Common Mistakes:

• Using square brackets which are for dynamic routes
• Confusing with curly braces or angle brackets
• Not using any special characters for parallel routes

3. Given this folder structure in Next.js:

app/
  (sidebar)/
    page.jsx
  (content)/
    page.jsx
  layout.jsx

What will happen when the app renders layout.jsx with parallel routes?

medium

A. Both sidebar and content pages render side by side inside layout

B. Only the sidebar page renders, content is ignored

C. Only the content page renders, sidebar is ignored

D. Neither sidebar nor content pages render automatically

Solution

1. Step 1: Understand parallel routes folder names

   Folders named with parentheses define parallel routes that render simultaneously.

2. Step 2: Apply to given structure

   Both (sidebar) and (content) are parallel routes, so their pages render side by side inside layout.

3. Final Answer:

   Both sidebar and content pages render side by side inside layout -> Option A

4. Quick Check:

   Parallel routes render all named folders simultaneously [OK]

Hint: Parentheses folders render together inside layout [OK]

Common Mistakes:

• Thinking only one parallel route renders at a time
• Assuming parallel routes need manual import to render
• Confusing parallel routes with nested routes

4. You have this code in your layout.jsx to render parallel routes:

import { Slot } from 'next/navigation';

export default function Layout() {
  return (
    

      <Slot name="sidebar" />
      <Slot name="content" />
    
  );
}

Why does this code cause an error?

medium

A. Because Slot must be imported from 'next/navigation' as a named import

B. Because <Slot /> should be self-closing JSX tags, not string literals

C. Because parallel routes cannot use Slot components

D. Because Slot requires a default export, not named

Solution

1. Step 1: Check JSX syntax in return statement

   The code uses <Slot name="sidebar" /> as a string literal, not as JSX tags.

2. Step 2: Correct JSX usage

   It should be <Slot name="sidebar" /> without quotes, as a self-closing JSX component.

3. Final Answer:

   Because <Slot /> should be self-closing JSX tags, not string literals -> Option B

4. Quick Check:

   JSX tags must not be strings [OK]

Hint: Use JSX tags, not strings, for [OK]

Common Mistakes:

• Writing JSX tags as strings inside return
• Importing Slot incorrectly
• Thinking Slot can't be used in parallel routes

5. You want to create a page with a sidebar and main content using parallel routes. Which folder structure and code snippet correctly implements this in Next.js?

app/
  (sidebar)/
    page.jsx
  (main)/
    page.jsx
  layout.jsx

And in layout.jsx:

export default function Layout() {
  return (
    

      {/* What goes here? */}
    
  );
}

hard

A. <Slot />

B. <Slot name="content" />
<Slot name="sidebar" />

C. <Slot name="sidebar" />
<Slot name="main" />

D. <Outlet name="sidebar" />
<Outlet name="main" />

Solution

1. Step 1: Match folder names to Slot names

   Folders are named (sidebar) and (main), so Slots must use these exact names.

2. Step 2: Check code snippet for correct Slot usage

   <Slot name="sidebar" /> <Slot name="main" /> uses <Slot name="sidebar" /> and <Slot name="main" />, matching folder names and correct JSX syntax.

3. Final Answer:

   <Slot name="sidebar" /> <Slot name="main" /> -> Option C

4. Quick Check:

   Slot names = folder names [OK]

Hint: Slot names must match parallel route folder names [OK]

Common Mistakes:

• Using wrong Slot names that don't match folders
• Using instead of
• Using only one Slot for multiple parallel routes