Parallel Routes Generator

What problem does it solve?

This Skill leverages Next.js Parallel Routes to implement modals and dialogs without causing disruptive layout shifts, providing a superior user experience compared to traditional modal implementations.

Core Features & Use Cases

• Non-Destructive Modals: Opens modals as a separate route segment, preserving the underlying page's state and layout.
• Intercepted Routes: Uses the (..) convention to intercept a route and render it within a modal slot, while still allowing direct navigation to the full page.
• Layout Integration: Guides on configuring the root layout to accept and render the modal slot.
• Use Case: Implement an "Upgrade Plan" modal that appears over the current dashboard. Users can interact with the modal, close it to return to the dashboard, or share the modal's URL, which will load the full upgrade page.

Quick Start

To create a modal using Parallel Routes, define an @modal slot in your layout, create a default.tsx file returning null inside @modal, and then create an intercepted route like @modal/(..)my-modal/page.tsx for your modal content.