Admin routes being matched by Intercepting Routes
Unanswered
Bonga shad posted this in #help-forum
Bonga shadOP
I’m having some issues that seem to have started after introducing Intercepting Routes.
Problems
Navigation from /shop/admin to /products or /categories does not work.
When I click a link, it instantly redirects me back.
However, if I open these pages via a direct URL, they load correctly.
When navigating to /shop/admin/TEST, it opens the page from /shop/[category]/[product].
Is this expected behavior?
After some “magical” actions, everything suddenly starts working and pages open correctly, but then I start getting errors like this:
⨯ Error: Invalid interception route: /shop/(.)(.)admin/products.
Must be in the format:
/<intercepting route>/(..|...)/<intercepted route>
Context
Using App Router
Using parallel routes with @modal
Using Intercepting Routes for product modals inside the shop
Here is my current folder structure:
apps/web/src/app/shop$ tree -L 4
├── (main)
│ ├── @modal
│ │ ├── (.)[category]
│ │ │ └── [product]
│ │ └── page.tsx
│ ├── [category]
│ │ ├── [product]
│ │ │ └── page.tsx
│ │ └── page.tsx
│ ├── layout.tsx
│ └── page.tsx
└── admin
├── categories
│ ├── [categoryId]
│ │ └── page.tsx
│ ├── add
│ │ └── page.tsx
│ └── page.tsx
├── layout.tsx
├── page.tsx
└── products
├── [productId]
│ └── page.tsx
├── add
│ └── page.tsx
├── page.tsx
I’m trying to understand:
Why admin routes are being intercepted by /shop/[category]/[product]
Why client-side navigation breaks, but direct access works
Whether this folder structure is valid or if intercepting routes are leaking outside of their intended scope
Any clarification on what I’m doing wrong or how intercepting routes are supposed to be isolated would be greatly appreciated 🙏
Problems
Navigation from /shop/admin to /products or /categories does not work.
When I click a link, it instantly redirects me back.
However, if I open these pages via a direct URL, they load correctly.
When navigating to /shop/admin/TEST, it opens the page from /shop/[category]/[product].
Is this expected behavior?
After some “magical” actions, everything suddenly starts working and pages open correctly, but then I start getting errors like this:
⨯ Error: Invalid interception route: /shop/(.)(.)admin/products.
Must be in the format:
/<intercepting route>/(..|...)/<intercepted route>
Context
Using App Router
Using parallel routes with @modal
Using Intercepting Routes for product modals inside the shop
Here is my current folder structure:
apps/web/src/app/shop$ tree -L 4
├── (main)
│ ├── @modal
│ │ ├── (.)[category]
│ │ │ └── [product]
│ │ └── page.tsx
│ ├── [category]
│ │ ├── [product]
│ │ │ └── page.tsx
│ │ └── page.tsx
│ ├── layout.tsx
│ └── page.tsx
└── admin
├── categories
│ ├── [categoryId]
│ │ └── page.tsx
│ ├── add
│ │ └── page.tsx
│ └── page.tsx
├── layout.tsx
├── page.tsx
└── products
├── [productId]
│ └── page.tsx
├── add
│ └── page.tsx
├── page.tsx
I’m trying to understand:
Why admin routes are being intercepted by /shop/[category]/[product]
Why client-side navigation breaks, but direct access works
Whether this folder structure is valid or if intercepting routes are leaking outside of their intended scope
Any clarification on what I’m doing wrong or how intercepting routes are supposed to be isolated would be greatly appreciated 🙏
4 Replies
Bonga shadOP
Your main issue:
Why direct URL works but client-side doesn't: Direct access does a full server route resolution. Client-side navigation uses the router cache and route matching differently — and dynamic segments are greedy.
The fix — use a route group to separate admin:
/shop/[category] is a dynamic catch-all at the same level as /shop/admin. When you navigate client-side to /shop/admin, Next.js is matching "admin" as a [category] value before it checks the static admin folder.Why direct URL works but client-side doesn't: Direct access does a full server route resolution. Client-side navigation uses the router cache and route matching differently — and dynamic segments are greedy.
The fix — use a route group to separate admin:
/shop
├── (storefront)
│ ├── @modal
│ │ └── (.)[category]
│ │ └── [product]
│ ├── [category]
│ │ └── [product]
│ ├── layout.tsx
│ └── page.tsx
└── (admin)
└── admin
├── categories
├── products
└── layout.tsx
├── (storefront)
│ ├── @modal
│ │ └── (.)[category]
│ │ └── [product]
│ ├── [category]
│ │ └── [product]
│ ├── layout.tsx
│ └── page.tsx
└── (admin)
└── admin
├── categories
├── products
└── layout.tsx
This isolates the intercepting route scope to
Also — your interception syntax
Want me to take a closer look at your full structure? Intercepting + parallel routes get messy fast and small mistakes in folder naming break everything silently. @Bonga shad
(storefront) only. The (.)[category] interception won't leak into (admin) because they're separate route groups.Also — your interception syntax
(.)[category] looks off. It should be (.) for same level, (..) for one level up. Double-check the Next.js docs on the exact folder naming.Want me to take a closer look at your full structure? Intercepting + parallel routes get messy fast and small mistakes in folder naming break everything silently. @Bonga shad