Next.js overlaps static route with dynamic route

user_6278010 0
Viewed 1609

I am using Next.JS application routing system.

I have created a dynamic route with structure like pages/[country]/[language]/index.js.

Also there is a static route with structure pages/cz/cz/index.js.

Issue appears then i am on static page and trying to navigate throught Link component to access static route content in my case should go to home page & reload same page, instead of that dynamic route content is rendered.

In my case link is just simple navigation to home page <Link to="/"> for both routes. But maybe issue lies on how index.js file is setup for predefined & dynamic routes.

cz/cz/index.js

export { default } from '../../../components/HomePage/';

const { getStaticProps } = createRoute({
  path: '/',
  locale: 'cs',
});

export { getStaticProps };

[country]/[language]/index.js

export { default } from '../../../components/HomePage/v2';

const { getStaticPaths, getStaticProps } = createRoute({
  path: '/',
  exclude: ['cs'],
  otherLocales: ['cs'],
});

export { getStaticPaths, getStaticProps };

createRoute

export default function createRoute({
  path,
  otherLocales,
  getPathParams,
  locale,
} = {}) {
  const locales = _.without(include, ...exclude);
  return {
    getStaticPaths: createGetStaticPaths({
      locales,
      getPathParams,
    }),
    getStaticProps: createGetStaticProps({
      path,
      locale,
      locales,
      otherLocales,
    }),
  };
}

Pages structure

enter image description here

So why [country]/[language]/index.js overrides cz/cz/index.js ?

So is there anything available in nextJS route to match a URL absolutely?

Or insure that going from static route should go to static route?

next.js reactjs routes javascript
2 Answers

Following next.js documentation predefined routes take precedence over dynamic routes, and dynamic routes over catch all routes. Take a look at the following examples:

  • pages/post/create.js - Will match /post/create
  • pages/post/[pid].js - Will match /post/1, /post/abc, etc. But not /post/create
  • pages/post/[...slug].js - Will match /post/1/2, /post/a/b/c, etc. But not /post/create, /post/abc

In your case you have defined predefined routes cz/cz/index.js and this route have priority

user_86605270
user_64483840
Related