Parallel routes (@slot) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a parallel route segment in Next.js using the correct folder name syntax.

NextJS

app/dashboard/[1]profile/page.tsx

Drag options to blanks, or click blank then click option'

A(user)

B[user]

Cprofile

D{user}

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets instead of parentheses for parallel routes.

Using curly braces which are invalid folder name syntax.

In Next.js parallel routes, folder names wrapped in parentheses define parallel segments. So (user) is correct.

2fill in blank

medium

Complete the code to render a parallel route slot inside the dashboard layout component.

NextJS

export default function DashboardLayout({ children, [1] }) {
  return (
    <div>
      <nav>Dashboard menu</nav>
      <main>
        {children}
        [1]
      </main>
    </div>
  )
}

Drag options to blanks, or click blank then click option'

Aparallel

Bprofile

Cslot

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'children' instead of 'slot' for parallel routes.

Trying to render 'parallel' or 'content' which are not props.

The special prop 'slot' is used to render parallel route content inside a layout.

3fill in blank

hard

Fix the error in the parallel route folder naming to correctly define two parallel routes 'profile' and 'settings'.

NextJS

app/dashboard/[1]profile+settings/page.tsx

Drag options to blanks, or click blank then click option'

A(profile+settings)

B[profile+settings]

Cprofile+settings

D{profile+settings}

Attempts:

3 left

💡 Hint

Common Mistakes

Not using parentheses, which breaks parallel route syntax.

Using square brackets or curly braces which are invalid here.

Parallel routes must be wrapped in parentheses. Using (profile+settings) defines two parallel routes.

4fill in blank

hard

Fill both blanks to correctly define a layout that renders children and a parallel route slot named 'settings'.

NextJS

export default function DashboardLayout({ children, [1] }) {
  return (
    <div>
      <header>Dashboard</header>
      <section>
        {children}
        [2]
      </section>
    </div>
  )
}

Drag options to blanks, or click blank then click option'

Asettings

Bslot

CsettingsSlot

Dparallel

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the prop name with the parallel route name.

Trying to render 'parallel' or 'settingsSlot' which are not valid.

The layout receives a prop named 'slot' as a slot, but the special prop to render parallel routes is 'slot'. So 'slot' is the prop name and 'settings' is the variable to render.

5fill in blank

hard

Fill all three blanks to create a parallel route folder, layout, and render the slot correctly for a 'chat' parallel route.

NextJS

app/dashboard/[1]/layout.tsx

export default function DashboardLayout({ children, [2] }) {
  return (
    <div>
      <nav>Menu</nav>
      <main>
        {children}
        [3]
      </main>
    </div>
  )
}

Drag options to blanks, or click blank then click option'

A(chat)

Bslot

D[chat]

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets for parallel route folder names.

Not rendering the 'slot' prop correctly.

The folder for parallel route must be named (chat). The layout receives a prop named 'slot' and renders it with {slot}.