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 by this Next.js parallel route setup?

Given the following folder structure and code snippets, what will the rendered output be?

Folder structure:

app/
  layout.js
  page.js
  (sidebar)/
    layout.js
    page.js

app/layout.js:

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <div>Root Layout</div>
        {children}
      </body>
    </html>
  )
}

app/page.js:

export default function HomePage() {
  return <div>Home Page</div>
}

app/(sidebar)/layout.js:

export default function SidebarLayout({ children }) {
  return <aside>Sidebar Layout {children}</aside>
}

app/(sidebar)/page.js:

export default function SidebarPage() {
  return <div>Sidebar Page</div>
}

And the route is accessed as: / with parallel route sidebar rendered in a slot.

A<html><body><div>Root Layout</div><aside>Sidebar Layout <div>Sidebar Page</div></aside><div>Home Page</div></body></html>

B<html><body><div>Root Layout</div><div>Sidebar Page</div><div>Home Page</div></body></html>

C<html><body><div>Root Layout</div><aside>Sidebar Layout <div>Home Page</div></aside></body></html>

D<html><body><div>Root Layout</div><div>Home Page</div></body></html>

Attempts:

2 left

📝 Syntax

intermediate

2:00remaining

Which code correctly defines a parallel route slot in Next.js layout?

In Next.js App Router, how do you correctly define a slot for a parallel route named sidebar inside a layout component?

export default function Layout({ children, sidebar }) {
  return &amp;lt;div&amp;gt;{children}&amp;lt;div&amp;gt;{sidebar}&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;
}

export default function Layout({ children, slots }) {
  return &amp;lt;div&amp;gt;{children}{slots.sidebar}&amp;lt;/div&amp;gt;
}

export default function Layout({ children }) {
  return &amp;lt;div&amp;gt;{children}&amp;lt;slot name="sidebar" /&amp;gt;&amp;lt;/div&amp;gt;
}

export default function Layout({ children, sidebar }) {
  return &amp;lt;div&amp;gt;{children}{sidebar}&amp;lt;/div&amp;gt;
}

Attempts:

2 left

🔧 Debug

advanced

2:00remaining

Why does this parallel route slot not render content?

Given this layout code in Next.js App Router:

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <div>Root</div>
        {children}
        {sidebar}
      </body>
    </html>
  )
}

And the parallel route is named sidebar. The sidebar content does not appear on the page. What is the cause?

AThe 'sidebar' prop must be destructured from the function parameters to be used.

BThe children prop overwrites the sidebar prop, so sidebar is ignored.

CParallel routes require a special hook to access their content, not props.

DThe layout does not receive a prop named 'sidebar', so {sidebar} is undefined causing no render.

Attempts:

2 left

❓ state_output

advanced

2:00remaining

What is the output when parallel routes update state independently?

Consider a Next.js app with two parallel routes: main and sidebar. Each route has a button that increments its own counter state.

If you click the button in the sidebar route, what happens to the main route's counter display?

NextJS

<!-- main/page.js -->
import { useState } from 'react';
export default function MainPage() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Main count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment Main</button>
    </div>
  );
}

<!-- sidebar/page.js -->
import { useState } from 'react';
export default function SidebarPage() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Sidebar count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment Sidebar</button>
    </div>
  );
}

AClicking sidebar button increments both sidebar and main counts.

BClicking sidebar button increments sidebar count only; main count stays the same.

CClicking sidebar button resets main count to zero.

DClicking sidebar button causes an error because state is shared incorrectly.

Attempts:

2 left

🧠 Conceptual

expert

2:00remaining

Why use parallel routes with @slot in Next.js App Router?

What is the main advantage of using parallel routes with the @slot feature in Next.js App Router?

AThey replace the need for client-side routing by preloading all pages at build time.

BThey automatically optimize server-side rendering by batching all routes into a single request.

CThey allow rendering multiple UI sections independently with their own layouts and state, improving modularity and user experience.

DThey enforce a strict single layout for the entire app, simplifying CSS styling.

Attempts:

2 left