title: Dynamic nested routes in Next.js
body: <p>I am building an e-commerce web app in Next.js and I got stuck on product filtering. Let's say there are 3 possible filtering options:</p>
  <ol>
  <li>by category - dioptric / sunglasses</li>
  <li>by sex - men / women</li>
  <li>by brand - rayban / gucci</li>
  </ol>
  <p>Now, the filters should work as subpages. Let's say the user chose sunglasses for men, so the URL should look like this: /sunglasses/men. Now, here are 4 possible example URLs on my website:</p>
  <ol>
  <li>/sunglasses/men</li>
  <li>/sunglasses/rayban</li>
  <li>/sunglasses/men/rayban</li>
  <li>/sunglasses/rayban/men</li>
  </ol>
  <p>I cannot figure out how the router should be able to distinguish between the first two URLs and figure out that the second parameter in the first URL is a sex filter, but the second parameter in the second URL is a brand filter.</p>
  <p>I am using Next.js and its server side rendering (getServerSideProps).</p>
  <p>Thank you for any help.</p>