0
0
NextJSframework~10 mins

Modal pattern with intercepting routes in NextJS - Step-by-Step Execution

Choose your learning style9 modes available
Concept Flow - Modal pattern with intercepting routes
User clicks link
Intercept route change
Show modal overlay
Render modal content
User closes modal
Restore previous page route
When a user clicks a link, the app intercepts the route change to show a modal overlay instead of a full page. Closing the modal restores the previous route.
Execution Sample
NextJS
import { useRouter } from 'next/navigation';
import { useState } from 'react';

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

  function openModal() {
    setModalOpen(true);
    router.push('/modal-route');
  }

  function closeModal() {
    setModalOpen(false);
    router.back();
  }

  return (
    <>
      <button onClick={openModal}>Open Modal</button>
      {modalOpen && (
        <div role="dialog" aria-modal="true">
          <p>Modal Content</p>
          <button onClick={closeModal}>Close</button>
        </div>
      )}
    </>
  );
}
This code shows a button that opens a modal by intercepting route change and renders modal content. Closing the modal goes back to the previous route.
Execution Table
StepUser ActionState modalOpenRouter ActionRendered Output
1Page loadsfalseCurrent route '/'Button 'Open Modal' visible
2User clicks 'Open Modal'truerouter.push('/modal-route')Modal overlay with content shown
3User clicks 'Close' in modalfalserouter.back() to '/'Modal closes, back to main page
4User tries to navigate normallyfalseNormal route changePage changes normally, no modal
💡 Modal closes and route returns to previous page, normal navigation resumes.
Variable Tracker
VariableStartAfter Step 2After Step 3Final
modalOpenfalsetruefalsefalse
router route'/''/modal-route''/'depends on user navigation
Key Moments - 3 Insights
Why does the modalOpen state change before the router.push?
Because setting modalOpen to true triggers React to render the modal overlay immediately, then router.push updates the URL. See execution_table step 2.
What happens if the user closes the modal but router.back() fails?
The modalOpen state is set to false, so the modal closes visually, but the URL might not change. This can cause mismatch. Always ensure router.back() works or handle fallback.
Why do we intercept route changes instead of normal navigation?
Intercepting lets us show modal content on top without full page reload, improving user experience. See concept_flow for the logical steps.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution_table, what is the value of modalOpen after the user clicks 'Open Modal'?
Aundefined
Btrue
Cfalse
Dnull
💡 Hint
Check execution_table row 2 under 'State modalOpen'
At which step does the router navigate back to the previous page?
AStep 3
BStep 2
CStep 1
DStep 4
💡 Hint
Look at execution_table row 3 under 'Router Action'
If modalOpen was never set to true, what would happen when clicking 'Open Modal'?
AModal would open but URL stays the same
BBoth modal and URL change correctly
CModal would not open but URL changes
DNothing happens
💡 Hint
Refer to variable_tracker for modalOpen state changes and router actions
Concept Snapshot
Modal pattern with intercepting routes in Next.js:
- Intercept route changes to show modal overlay
- Use state (e.g., modalOpen) to control modal visibility
- Push new route for modal content
- Close modal by setting state false and router.back()
- Improves UX by avoiding full page reloads
Full Transcript
This visual execution shows how the modal pattern with intercepting routes works in Next.js. When the user clicks the 'Open Modal' button, the app sets modalOpen state to true and pushes a new route to show modal content. The modal appears as an overlay with accessible dialog roles. Closing the modal sets modalOpen to false and navigates back to the previous route. The execution table tracks each step, showing state changes and router actions. Key moments clarify why state changes happen before routing and why intercepting routes improves user experience. The visual quiz tests understanding of modalOpen state and router navigation steps.