Intercepting routes (.) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an intercepting route segment in Next.js.

NextJS

export const metadata = { title: 'Dashboard' };

export default function DashboardLayout({ children }) {
  return <section>{children}</section>;
}

// To intercept routes, use the [1] folder inside app directory.

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

Aintercept

Bgroup

Cparallel

Dsegment

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'intercept' folder which does not exist.

Using 'segment' which is a general term but not a folder name.

Using 'parallel' which is unrelated here.

In Next.js, to intercept routes without affecting the URL, you use a group folder named (.).

2fill in blank

medium

Complete the code to define an intercepting route segment that renders a sidebar.

NextJS

export default function Layout({ children }) {
  return (
    <div>
      <aside>[1]</aside>
      <main>{children}</main>
    </div>
  );
}

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

A<Sidebar />

B<Header />

C<Footer />

D<Content />

Attempts:

3 left

💡 Hint

Common Mistakes

Putting

inside

which is semantically incorrect.

Using

or which do not represent sidebar.

The sidebar component is rendered inside the

element to show navigation or extra info.

3fill in blank

hard

Fix the error in the intercepting route segment to correctly render the children.

NextJS

export default function Layout({ children }) {
  return (
    <div>
      <nav>Menu</nav>
      [1]
    </div>
  );
}

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

A{children}

B<Children />

C<children />

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using which treats children as a component but it's a prop.

Using which is incorrect capitalization and component usage.

Using just 'children' without braces which will not render.

In React and Next.js, to render children passed as props, you use curly braces {children} without angle brackets.

4fill in blank

hard

Fill both blanks to create a parallel route segment that intercepts the main route and renders a modal.

NextJS

export default function ModalLayout({ children, modal }) {
  return (
    <>
      [1]
      <div className="modal">[2]</div>
    </>
  );
}

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

A<main>{children}</main>

B{children}

C<main />

D{modal}

Attempts:

3 left

💡 Hint

Common Mistakes

Using

which renders an empty main element.

Using {children} without wrapping in

for main content.

Putting {children} inside the modal div instead of the main content.

The main content (default slot) is wrapped in

{children}

and the modal slot is rendered inside the modal div using {modal}.

5fill in blank

hard

Fill all three blanks to create an intercepting route that uses a group folder, renders a header, and shows children content.

NextJS

export default function GroupLayout({ children }) {
  return (
    <div>
      <header>[2]</header>
      <main>[3]</main>
    </div>
  );
}

// The folder name for this layout is [1]

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

A<Header />

B{children}

C(.)

D<Content />

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the folder name with component names.

Rendering children inside header instead of main.

Using instead of {children}.

The folder name for this layout is (.), the header component

is rendered inside

, and children are rendered inside

using {children}.