Infinite number of nested dynamic routes Next.js

Question

I am facing a problem in Next.js where I need to navigate to a URL with any number of dynamic nested routes and get value of every one of them. For example, I should be able to navigate to www.mysite.com/color/black/fit/slim/size/medium and get the values of all the routes, for example an array such as:

[ "color", "black", "fit", "slim", "size", "medium" ]

Can this be done in Next.js in getServerSideProps?

Thank you

Answer 1

Yes! You can have any number of dynamic routes. Here's the documentation on it.

If you use this page name format ([...slug]), you can get the param slug in getServerSideProps and it will be an array of strings of each part of the url.

// eg for url www.mysite.com/color/black/fit/slim/size/medium
// and page template located at pages/[...slug].js
export async function getServerSideProps({params}) {
  const slugs = params.slug
  // slugs is an array of strings
  // slugs = [ "color", "black", "fit", "slim", "size", "medium" ]
  return {
    props: {}, // will be passed to the page component as props
  }
}