0
0
NextJSframework~20 mins

Parallel routes concept in NextJS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Parallel Routes Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
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>
Attempts:
2 left
💡 Hint

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

📝 Syntax
intermediate
2:00remaining
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 &lt;h1&gt;Admin&lt;/h1&gt; }
B
app/admin/(page).tsx
export default function AdminPage() { return &lt;h1&gt;Admin&lt;/h1&gt; }
C
app/@admin/page.tsx
export default function AdminPage() { return &lt;h1&gt;Admin&lt;/h1&gt; }
D
app/(admin)/page.tsx
export default function AdminPage() { return &lt;h1&gt;Admin&lt;/h1&gt; }
Attempts:
2 left
💡 Hint

Parallel routes use parentheses around the folder name.

🔧 Debug
advanced
2:00remaining
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 />
    </>
  )
}
ABecause the settings route is nested but not explicitly rendered inside the dashboard page component.
BBecause the settings page file is named incorrectly and should be settings.tsx.
CBecause parallel routes cannot be nested inside other parallel routes.
DBecause the app/layout.tsx file is missing the <html> and <body> tags.
Attempts:
2 left
💡 Hint

Think about how nested parallel routes render their children.

❓ state_output
advanced
2:00remaining
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>
Attempts:
2 left
💡 Hint

Initial state is true, what happens after one toggle?

🧠 Conceptual
expert
2:00remaining
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?

AThey automatically prefetch all routes in the background, eliminating any loading delays.
BThey allow rendering multiple UI segments simultaneously, enabling faster navigation and preserving UI state across routes.
CThey force the app to reload the entire page on every route change to ensure fresh data.
DThey restrict rendering to a single route at a time to reduce memory usage.
Attempts:
2 left
💡 Hint

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