Modal pattern with intercepting routes in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js router hook needed to handle route changes.

NextJS

import { [1] } from 'next/router';

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

AuseRouter

BusePathname

CuseRoute

DuseSearchParams

Attempts:

3 left

💡 Hint

Common Mistakes

Using usePathname instead of useRouter

Trying to import a hook that doesn't exist

The useRouter hook is used to programmatically navigate and intercept routes in Next.js.

2fill in blank

medium

Complete the code to define a modal component that uses state to control its visibility.

NextJS

import { useState } from 'react';

export default function Modal() {
  const [isOpen, [1]] = useState(false);
  return isOpen ? <div role="dialog">Modal Content</div> : null;
}

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

AopenModal

BsetOpen

CtoggleOpen

DsetIsOpen

Attempts:

3 left

💡 Hint

Common Mistakes

Using a setter name that doesn't match the state variable

Using a function name that implies toggling instead of setting

The setter function for isOpen state is conventionally named setIsOpen.

3fill in blank

hard

Fix the error in the code to correctly intercept route changes and open the modal.

NextJS

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

export default function Page() {
  const router = useRouter();
  const [modalOpen, setModalOpen] = useState(false);

  useEffect(() => {
    const handleRouteChange = (url) => {
      if (url.includes('modal')) {
        setModalOpen(true);
      } else {
        setModalOpen(false);
      }
    };

    router.events.[1]('routeChangeStart', handleRouteChange);

    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [router]);

  return modalOpen ? <div role="dialog">Modal Open</div> : <div>Main Page</div>;
}

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

Aon

BaddListener

CaddEventListener

DonRouteChangeStart

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'addEventListener' which is for DOM events

Using 'addListener' which does not exist

In Next.js Pages Router, the router's event emitter uses router.events.on to listen for routeChangeStart events.

4fill in blank

hard

Fill both blanks to create an intercepting route link that opens the modal without full page reload.

NextJS

import Link from 'next/link';

export default function Home() {
  return (
    <Link href="/modal" [1]=[2]>
      Open Modal
    </Link>
  );
}

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

Areplace

Bprefetch

Ctrue

Dshallow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'replace' or 'prefetch' which do different things

Not passing the boolean true as a value

The shallow prop with value true allows route changes without full reload, useful for modals.

5fill in blank

hard

Fill the blanks to correctly implement a modal that closes on backdrop click and updates the route.

NextJS

import { useRouter } from 'next/router';

export default function Modal() {
  const router = useRouter();

  function closeModal() {
    router.[1]('/');
  }

  return (
    <div role="dialog" onClick={closeModal} aria-modal="true">
      <div onClick={e => e.[2]()}>
        Modal Content
        <button onClick={closeModal} aria-label="Close modal">Close</button>
      </div>
    </div>
  );
}

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

Apush

BstopPropagation

CpreventDefault

Dreplace

Attempts:

3 left

💡 Hint

Common Mistakes

Using push instead of replace for route update

Not stopping event propagation causing modal to close immediately

Use replace to update the route without adding history entry, stopPropagation to prevent closing modal when clicking inside. push and preventDefault are distractors here.