Next js dynamic routing isues with states and categories

Question

I am working on complex routing in Next js and I am not able to find a way how can I set up it. In an e-commerce store that is based on the shop and tailormade catalog with USA states(al,ak, az).  solutions .So the URL should look like [/usstages/shop/categories] or [/usstages/tailor/categories]  and on the home page state is all states, in other words, we can silence the state on the homepage.

Also, the shop is the default option, doesn't want to keep it in the URL. So the actual URL looks like [al/{noshop}/women] or [al/tailor/women]. 

I would like to create a common routing for this so that we use [ak/women] for the shop but for tailor [al/tailor/women].  Another is on the home page and sates page, both are the page loading. so if we use only states like this [/al] it means a home page with Alabama states products. 

So my URL is the followings:

• /al
• /al/tailor
• /al/women
• /al/tailor/women

I create a dynamic root in Next pages/[...slug].js  My question: How can I pick data or align url in our code, if the single or double or triple parameters come for states and shop or tailor type are as per the above listing? 

Answer 1

In Next.js, the file-based routing system allows you to construct complex routing mechanisms by naming your files and directories in the pages directory in a certain way.

You can use dynamic route segments to define a portion of your route as dynamic. In your case, you're receiving different kinds of parameters like 'al' (which stands for Alabama state), 'shop', 'tailor', and 'women'. We can create a file called [[...slug]].js inside the pages directory to cater to this.

In your [[...slug]].js file, you can destructure the parameters from router.query.slug as follows:

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  
  // assuming that you're accessing a route like "/al/tailor/women"
  // slug would be an array ['al', 'tailor', 'women']
  let [state, type, category] = router.query.slug || [];

  // Set default values if some parameters are missing
  state = state || 'all'; // Set to 'all' if state is not provided
  type = type || 'shop';  // Set to 'shop' if type is not provided
  category = category || 'all';  // Set to 'all' if category is not provided

  // You can use state, type, category variables in your component now
  // ...

  return (
    <div>
      {/* Your component JSX */}
    </div>
  )
}

This way, the URL parameters can be deconstructed and defaulted. The [[...slug]].js route will match any route that starts at the root. Please make sure that there are no conflicts between this route and any other routes you may have defined.

This routing solution is very flexible but use it with caution, because it could potentially match many routes and might make the routing in your app a bit more complex to understand.

Keep in mind, the naming convention [[...slug]].js means it's an optional catch all route. This will match routes with any number of segments (/al, /al/tailor, /al/women, /al/tailor/women) and also routes with no segments at all (i.e., /). Be careful with this as it can potentially clash with your other defined routes.