Get query parameters that aren't dynamic route parameters in next.js

Question

I have a component that needs to copy all of the query parameters from the URL. However I do not want to copy dynamic route parameters. So if it is used in a component like: /pages/model/{modelId}.tsx and the url is /model/123456?page=2&sort=column&column=value, I would like to retrieve the following object:

{
  page: 2,
  sort: "column",
  column: "value"
}

I would use useRouter().query but this would include modelId. And the router object doesn't seem to have any other list of parameters.

So how would I distinguish regular URL parameters from dynamic route parameters?

k.tten · Accepted Answer · 2023-02-07 16:18:44Z

3

Why not use the built-in URL API instead:

const url = new URL(window.location.href);

url.searchParams.get("page"); // a string or null if not present

Going a little further, you could also wrap this in a hook for future use.

If you want the search parameters as an object, you could wrap it in Object.fromEntries too:

const params = Object.fromEntries(new URL(window.location.href).searchParams);

params.page; // string or undefined now

edited Feb 7, 2023 at 16:18

answered Apr 28, 2022 at 21:00

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

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

1 Comment

kaan_atakan Over a year ago

I think I wasn't clear in my wording so I updated the question. Your answer is still very useful, but I will actually use something like Object.fromEntries(new URL(window.location.href).searchParams) in my project. If you would update your answer I would like to give you the point.

Fer Toasted · Accepted Answer · 2022-04-29 01:59:46Z

0

In my case I stripped the unwanted key from the query object. In this case the dynamic url param.

I used lodash for this, but this could be perfectly done with Javascript only.

export const ignoreQueryParam = (obj, key) => _.omit(obj, key);

Applied to your case:

const router = useRouter();
const searchQuery = ignoreQueryParam(router.query, 'modelId');

I hope it helps.

answered Apr 29, 2022 at 1:59

Fer Toasted

1,7581 gold badge21 silver badges39 bronze badges

Collectives™ on Stack Overflow

Get query parameters that aren't dynamic route parameters in next.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related