Question 1

How do I create a deep-linkable modal in Next.js App Router?

Accepted Answer

Use intercepting routes with a @modal slot: place (.)photos/[id]/page.tsx inside an @modal folder so in-app navigation shows a modal while refresh or shared links render the full page. Ensure a non-intercepting route exists as the fallback.

Question 2

When should I use parallel routes @slot in Next.js?

Accepted Answer

Use @slot when multiple UI pieces in one layout must navigate and load independently, such as dashboard widgets or admin side panels. Each slot gets its own loading.tsx and page.tsx. For simple page sections, compose components instead.

Question 3

Why does my Next.js parallel route slot return a 404?

Accepted Answer

A slot 404s when it lacks a default page.tsx for its empty state while the parent route renders. Every @slot folder must include a page.tsx rendering its default content, otherwise Next.js throws cryptic errors.

Question 4

What is the difference between (.)foo and (..)foo intercepting routes?

Accepted Answer

The dots count route segments, not file paths: (.)foo intercepts from the same level, (..)foo from one level up, (..)(..)foo from two levels up, and (...)foo from the root. Miscounting segments is a common error.

Question 5

When should I avoid intercepting routes for modals?

Accepted Answer

Avoid intercepting routes for transient modals like delete confirmations or settings dialogs that are not shareable. Use useState with a dialog component such as Radix Dialog instead, since URL-driven routing adds complexity without benefit.

void-parallel-routes-slots

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about void-parallel-routes-slots

Related Skills

nextjs-routing

nextjs-routes-and-layouts

Parallel Routes Generator

intercept