intro

I have tried to use Next.js Parallel route for modal showing up card component, but keep not showing up and and having a hard time @modal is intercepting route that i was not intended.

problem

This is the folder structure on next.js project.

src
│   ├── app
│   │   ├── api
│   │   │   ├── endemic_life
│   │   │   │   └── route.ts
│   │   │   ├── monsters
│   │   │   │   ├── [monsterId]
│   │   │   │   │   └── route.ts
│   │   │   │   └── route.ts
│   │   │   ├── quest
│   │   │   │   └── route.ts
│   │   │   ├── search
│   │   │   │   └── route.ts
│   │   │   ├── upload-endemic_life
│   │   │   │   └── route.ts
│   │   │   ├── upload-monsters
│   │   │   │   └── route.ts
│   │   │   └── upload-quests
│   │   │       └── route.ts
│   │   ├── endemic
│   │   │   └── page.tsx
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── hooks
│   │   ├── layout.tsx
│   │   ├── @modal
│   │   │   ├── default.tsx
│   │   │   └── (.)monster
│   │   │       ├── [id]
│   │   │           └── page.tsx
│   │   │  
│   │   ├── monster
│   │   │   ├── [id]
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   ├── page.tsx
│   │   ├── quest
│   │   │   └── page.tsx
│   │   └── utils

My modal is

src/app/@modal/(.)monster/[id]/page.tsx

i was trying to intercept following route.

src/app/monster[id]/page.tsx

Yes it makes sense and it does indeed intercept from going to /monster[id] to show modal instead. I have a search component where users can search by typing monster name and when you clicked, it will redirect to /monster/monsterId. @modal is not same as they check param value like following./monster?monsterId=443n4bm5k420n72n This will indeed show modal when card is clicked. Because search result page was src/app/monster[id]/page.tsx, which is same route as @modal trying to intercept, it was not redirect to /monster/monsterId page.

solution

I end up changing the name of folder in the modal so that it does not intercept. Changing from (.)monster to monster-modal. The problem was as stated that (.)monster/[id] was trying to intercept /monster/[id]. Now monster-modal/[id] is a separate route and doesn’t conflict anymore.

I also changed name of directory from monster/[id] to monster[monsterId]. Now my modal path is

src/app/@modal/(.)monster-modal/[id]/page.tsx

and path that trying to intercept

src/app/monster[monsterId]/page.tsx