Dynamic nested routes in Next.js

Question

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:

by category - dioptric / sunglasses
by sex - men / women
by brand - rayban / gucci

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:

/sunglasses/men
/sunglasses/rayban
/sunglasses/men/rayban
/sunglasses/rayban/men

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.

I am using Next.js and its server side rendering (getServerSideProps).

Thank you for any help.

Why don't you use query params? /products?category=x&sex=y&brand=z — Dao_K
– Dao_K, Commented Jul 1, 2021 at 16:12
I am already using query params and it works, but I want to change it this way — tomasxboda
– tomasxboda, Commented Jul 4, 2021 at 15:27

juliomalves · Accepted Answer · 2022-09-05 07:29:13Z

2

You can use the spread operator inside the route name to solve this problem.

#  pages/[...product].ts

Example: pages/sunglasses/men/gucci

Your query object will be like this

{"product": ["sunglasses","men","gucci"]}

More information check Nextjs Docs

edited Sep 5, 2022 at 7:29

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

answered Sep 1, 2022 at 11:34

mohamed salah

362 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anish Antony · Accepted Answer · 2021-07-01 22:42:09Z

2

If you don't want to create separate routes , you can use below implementation of gerServerSideProps

export async function gerServerSideProps({ params, ...props }) {
  const products = await fetchProducts();
  if (params.slugs && params.slugs instanceof Array) {
    if (params.slugs.length > 2) {
      const filteredProducts = products.filter(
        (p) =>
          p.category === params.slugs[0] &&
          (p.sex === params.slugs[1] || p.sex === params.slugs[2])&&
          (p.brand === params.slugs[1] || p.brand === params.slugs[2])
      );
      return {
        props: {
          products:filteredProducts
        },
      };
    } else if (params.slugs.length > 1) {
        const filteredProducts = products.filter(
            (p) =>
              p.category === params.slugs[0] &&
              (p.sex === params.slugs[1] || 
              p.brand === params.slugs[1])
          );
          return {
            props: {
              products:filteredProducts
            },
          };
      
    } else if(params.slugs.length > 0){
        const filteredProducts = products.filter(
            (p) =>
              p.category === params.slugs[0])
          return {
            props: {
              products:filteredProducts
            },
          };
  }
  else{
    return {
        props: {
          products:[]
        },
    };

}
}

edited Jul 1, 2021 at 22:42

answered Jul 1, 2021 at 16:03

Anish Antony

1,52511 silver badges13 bronze badges

1 Comment

tomasxboda Over a year ago

Thanks! This seems like the solution I am looking for. I'm going to try this in the next few days and will let you know if it works.

Dharman · Accepted Answer · 2021-07-01 15:43:24Z

0

You can create a separate folder for routes that have same params.

e.g

1./sunglasses/men

1./pages/sunglasses/gender/[gender].js

2./sunglasses/rayban

2./pages/sunglasses/type/[type].js

3./sunglasses/men/rayban

3./pages/sunglasses/item/[gender]/[item].js

4./sunglasses/rayban/men

4./pages/sunglasses/gender/[item]/[gender].js

edited Jul 1, 2021 at 15:43

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jul 1, 2021 at 15:38

Afaq Rashid

14 bronze badges

1 Comment

tomasxboda Over a year ago

Yes, I also came up with this solution but in my app, there are hundreds of variations, so the solution must be dynamic

Collectives™ on Stack Overflow

Dynamic nested routes in Next.js

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related