Explicit Route isn't Intercepted

[JamesAyres16]

Summary

My problem

I am having issues with one particular route from being intercepted.
It is a static route. My dynamic routes get intercepted as expected.
This route ends up being caught in my catchall route.

To Reproduce

1. Navigate to codesandbox
2. Click "Draft Page" link
3. Click "Add Row"
4. Note path "(...)form/[draftVer]/row" is displayed
5. Click "Create"
6. Note "Catch All" is displayed (Expected "(...)form/create")

Additional information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.4.0-canary.93 // Latest available version is detected (15.4.0-canary.93).
  eslint-config-next: 15.2.0
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Example

https://codesandbox.io/p/devbox/routing-issue-forked-yf9jdy?workspaceId=ws_99Vv8JQkByXmvk6vyjbsnP

[GaneshVarma1]

Hi! 👋 Thanks for the clear explanation and sandbox — I was able to reproduce the issue and it's a common pitfall with Next.js App Router’s routing priorities.

---

🔍 Problem Summary

You're expecting the static route:

/form/create

to be matched directly, but instead it’s falling into your dynamic catch-all route:

/form/[draftVer]/row

So when you click "Create", you’re seeing the fallback content instead of the expected static page. This happens because Next.js treats create as a value for [draftVer] since it's not declared as a static route.

---

🧠 Why This Happens

In the Next.js App Router, routing follows these rules:

• Static routes (like form/create) have higher priority, but only if defined.
• If not defined, form/create is treated as:

  [draftVer] = "create"
  → route becomes /form/create/row
  → matched by /form/[draftVer]/row
  → ends up in your catch-all
  

So since there’s no static /form/create/page.tsx, the framework falls back to matching create as a dynamic [draftVer].

---

✅ How to Fix It

You simply need to explicitly define a static route for /form/create.

📁 File Structure Fix:

app
└── form
    ├── create
    │   └── page.tsx        ✅ Create this file
    └── [draftVer]
        └── row
            └── page.tsx

This way, /form/create is treated as a static route and no longer falls into the dynamic [draftVer].

---

🧪 Optional: Clean URL Conflicts

To avoid conflicts with reserved dynamic values like create, new, or edit, it’s best to:

• Declare static routes explicitly
• Or choose dynamic patterns like [id] that don’t overlap with named paths

---

✅ TL;DR

• Next.js thinks create is a dynamic value for [draftVer]
• Fix it by creating a dedicated form/create/page.tsx
• This ensures /form/create is prioritized correctly and no longer caught in the dynamic route

---

Let me know if you'd like help editing your sandbox — happy to help you get it wired up! 🔧

[JamesAyres16]

Thank you @GaneshVarma1

I changed my structure from

app
├── form
│   ├── create
│   │   └── page.tsx
│   └── [draftVer]
│       └── row
│           ├── [rowId]
│           │   └── page.tsx
│           └── page.tsx
├── [draftVersion]
│   ├── @modal
│   │   ├── [...catchAll]
│   │   │   └── page.tsx
│   │   ├── (...)form
│   │   │   ├── create
│   │   │   │   └── page.tsx
│   │   │   └── [draftVer]
│   │   │       └── row
│   │   │           ├── [rowId]
│   │   │           │   └── page.tsx
│   │   │           └── page.tsx
│   │   ├── default.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── layout.tsx
└── page.tsx

to

app
├── form
│   ├── create
│   │   └── page.tsx
│   └── [draftVersion]
│       └── row
│           ├── [rowId]
│           │   └── page.tsx
│           └── page.tsx
├── view
│   ├── [draftVersion]
│   │   └── page.tsx
│   ├── @modal
│   │   ├── [...catchAll]
│   │   │   └── page.tsx
│   │   ├── (...)form
│   │   │   ├── create
│   │   │   │   └── page.tsx
│   │   │   └── [draftVersion]
│   │   │       └── row
│   │   │           ├── [rowId]
│   │   │           │   └── page.tsx
│   │   │           └── page.tsx
│   │   ├── default.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── layout.tsx
└── page.tsx

and that fixed the issue.