#How to avoid route conflict?

1 messages · Page 1 of 1 (latest)

gusty brookBOT
#

Hi @red flax. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js, predefined API routes take precedence over dynamic API routes. This means that if you have a predefined route and a dynamic route in the same directory, the predefined route will be matched first.

For example, if you have these two routes:

  • pages/api/post/create.js - Will match /api/post/create
  • pages/api/post/[pid].js - Will match /api/post/1, /api/post/abc, etc. But not /api/post/create

In your case, you have a dynamic route within the properties route and another route which is add. If you want to navigate to the /add route when you click the add property button, you should define a specific route for add in your pages directory. This will ensure that the /add route is matched before the dynamic route.

Here's how you can structure your pages directory:

pages/
├── properties/
│   ├── [id].js  // dynamic route
│   └── add.js   // specific route for add

In this structure, when you navigate to /properties/add, it will match the add.js file instead of treating add as a dynamic parameter in the [id].js file.

For more information on routing in Next.js, you can refer to the official documentation (https://nextjs.org/docs/pages/building-your-application/routing/api-routes#caveats).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@red flax kapa.ai is still learning and improving, please let us know how it did by reacting below

red flax
#

@gusty brook I'm using app router

gusty brookBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In the App Router of Next.js, the routing works a bit differently. The App Router takes priority over the Pages Router, and routes across directories should not resolve to the same URL path. If they do, it will cause a build-time error to prevent a conflict (source (https://nextjs.org/docs/app/building-your-application/routing#the-app-router)).

If you're using the App Router and you have a conflict between a dynamic route and a specific route, you should ensure that the specific route is defined in the app directory, not the pages directory. The app directory works alongside the pages directory to allow for incremental adoption. This allows you to opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior (source (https://nextjs.org/docs/app/building-your-application/routing#the-app-router)).

Here's how you can structure your app directory:

app/
├── properties/
│   ├── [id].js  // dynamic route
│   └── add.js   // specific route for add

In this structure, when you navigate to /properties/add, it will match the add.js file instead of treating add as a dynamic parameter in the [id].js file.

For more information on routing in the App Router, you can refer to the official documentation (https://nextjs.org/docs/app/building-your-application/routing#the-app-router).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@red flax kapa.ai is still learning and improving, please let us know how it did by reacting below

red flax
#

@gusty brook Got it! The error is showing because of the dynamic route. Because of the intercepting route. If you look at my files, there is a parallel route @model . When I click the add property button to navigate to the add route, it hits the intercepting route.

What can I do to avoid this?

gusty brookBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the information from the knowledge sources (https://github.com/vercel/next.js/issues/64808), it seems like you're experiencing an issue where the intercepting route is being triggered when you're trying to navigate to a specific route. This is a common issue when using parallel routing with intercepting routes in Next.js.

One solution to this problem is to use route groups with different layouts. This allows you to have finer control over which layout renders the interception modal + page, versus just rendering the page, without changing your URL structure.

Here's an example of how you can structure your route groups:

// app/routes.js
export default [
  {
    group: 'modal',
    layout: 'modal',
    routes: [
      {
        name: 'model',
        pattern: '/@model',
        page: '@/model',
      },
    ],
  },
  {
    group: 'main',
    layout: 'main',
    routes: [
      {
        name: 'properties',
        pattern: '/properties',
        page: '@/properties',
      },
      {
        name: 'add',
        pattern: '/properties/add',
        page: '@/properties/add',
      },
    ],
  },
];

In this structure, when you navigate to /properties/add, it will match the add route in the main group, and it won't trigger the intercepting route in the modal group.

For more information on route groups in Next.js, you can refer to the official documentation (https://nextjs.org/docs/app/building-your-application/routing/route-groups).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@red flax kapa.ai is still learning and improving, please let us know how it did by reacting below

red flax
#

@gusty brook

image.png image.png
gusty brookBOT
#

Let me check the knowledge base for you. One moment! :books: