Implementing a Parallel/Intercept route with a catch-all segment.

[bjspdn]

Hello,

Recently I wanted to implement an Intercept Route for a specific use case. To give context, I'm rendering content via Storyblok and to achieve this I use a catch-all segment [[...slug]], because the slug could be of varying depth.

What I wanted to implement is a way to render some specific slug containing annex in the pathname inside a modal. Therefore I thought it would be cool to leverage what Next.js have for this.

The annex pathname could be x level deep would always be structured like this: .../annex/annex-1, .../annex/annex-2 etc

The structure looked like the following:

- app
   - [[...slug]]
       - page.tsx
   - @modal 
       - (.)[[...slug]]
          - page.tsx --> Where a modal component is rendered if the segment contains annex
          - default.tsx 

But I believe I might have faced a limitation, because it was impossible for me to make this work. When I switched for a static route for exemple, it worked like I would expect it to work. But when I try to switch back to the catch-all segment, no modal render was being triggered.

Have you faced this yourself? Am I doing the implementation wrong? Is it a known limitation/bug? Do you have work-around?

Thank you!

[lizuju]

I think this is mostly a route-shape limitation, not a missing config flag.

Intercepting routes are matched by route segment depth. The (.) / (..) markers are relative to segments, and @modal does not count as a segment. A catch-all like [[...slug]] then makes the target ambiguous because it can consume any number of segments.

So this:

app/@modal/(.)[[...slug]]/page.tsx

does not mean "open a modal for any URL whose slug contains annex". It means "intercept the same-level catch-all route", but the router still has no concrete annex/[id] segment to match for the modal slot. That is why it starts working when you switch to a static route: the target segment and relative depth are known.

For this kind of CMS route I would pick one of these approaches:

1. Keep app/[[...slug]]/page.tsx as the canonical full-page CMS renderer, and render the modal from inside that page when params.slug contains annex. This is the simplest option if annex can appear at arbitrary depth.
2. Normalize annex pages to a predictable route shape, then intercept that concrete route. For example, if you can make annex URLs live at /annex/[annexSlug], then use a normal page route plus app/@modal/(.)annex/[annexSlug]/page.tsx.
3. If you need multiple known depths, model those depths explicitly. I would avoid trying to make a single optional catch-all do this, because the intercepting matcher needs a concrete relative route shape.

Also keep app/@modal/default.tsx returning null; that handles the inactive slot state, but it will not make an arbitrary catch-all path interceptable by itself.