Next.js Add slug/params to clean URL

Question

I have a structure with a clean URL in the "pages" folder like this ...

/pages/items/[pageNumber]/index.tsx

And if I use router.push I use it like this to get to that page ...

router.replace("/items/[pageNumber]", "/items/1")

That works great, but now I want to add a query params (for filter) to that URL, how can I do that?

I tried this ...

router.push(`/items/[pageNumber]/`, `/items/1/?${filterParams}`, { shallow: true });

But that doesn't work, and I'm wondering how to do that.

when you say it's not working, you should state how exactly. Is it that you could not get the query param or the routing is not working, etc. — Joshua
– Joshua, Commented Aug 11, 2020 at 14:49
@Joshua For some reason, the URL changes but the page gets refreshed after 3 seconds. — Ruby
– Ruby, Commented Aug 11, 2020 at 14:50
@Joshua I'm wondering is what I'm doing is correct, if it is correct, I should look for the problem elsewhere, but I'm not sure if that is correct or not. — Ruby
– Ruby, Commented Aug 11, 2020 at 14:51
check this stackoverflow question stackoverflow.com/a/61470662/6220015 — Joshua
– Joshua, Commented Aug 11, 2020 at 15:09

Gokhan Sari · Accepted Answer · 2020-08-11 14:54:20Z

3

When you use it like this

router.push(`/items/[pageNumber]/`, `/items/1/?${filterParams}`, { shallow: true });

you are not passing query params to the page, you are only showing them in the address bar, I guess.

How about something like this:

router.push({
  pathname '/items/[pageNumber]/',
  query: {
    param1: 'yes',
  },
}, {
  pathname: '/items/1/',
  query: {
    param1: 'yes',
  },
});

Don't forget to update query part for your case.

answered Aug 11, 2020 at 14:54

Gokhan Sari

8,1245 gold badges37 silver badges38 bronze badges

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

5 Comments

Ruby Over a year ago

Ok, but the thing is I have no idea what kind of filter params I'm going to receive, it could be ?typ=1,2, or ?type=1,2&make=2,3, so I need it to be dynamic, how can I do that?

Gokhan Sari Over a year ago

I don't know where do you get those from but, you can go with something like { type: '1,2' } or { type: '1,2', make: '2,3' }?

Ruby Over a year ago

When I try your solution, the URL changes but the page refreshes itself after 3 seconds for some reason.

Ruby Over a year ago

Well, I updated Next.js and re-ran the project and the page doesn't refresh anymore, which is good, I'll try your solution and see if it works.

Ruby Over a year ago

Your solution worked great, and I found out why the page reloads a few seconds after the query params changes, here's the link to the issue if anyone stumbles on this thread ... github.com/vercel/next.js/issues/9958

Collectives™ on Stack Overflow

Next.js Add slug/params to clean URL

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related