Next.js router create query string and query string array

Question

I use Next.js on my project and I need to make a dynamic query string. I use this code:

const createQuery = (filter) => {
  let currentPath = router.pathname;
  let filterSize = Object.keys(filter).length;

  filterSize != 0 ? (currentPath += "?") : null;

  Object.keys(filter).map(function (key, index) {
    currentPath +=
      key + "=" + filter[key] + (index === filterSize - 1 ? "" : "&");
  });

  router.push(currentPath);
};

It works but I don't send an array to query string. How can I do this? Also, ss there an easier way to create a query string in Next.js?

Tamal Sen · Accepted Answer · 2021-09-13 09:39:50Z

2

You can easily pass dynamic query strings using nextjs/router

Router.push accepts query as an object which will be converted to query parameters.

for example:

 Router.push({
  pathname: currentPath,
  query: {
     page: 1,
     skip: 10
  }
})
// results into currentPath?page=1&skip=10

answered Sep 13, 2021 at 9:39

Tamal Sen

312 bronze badges

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

Comments

mylesthe.dev · Accepted Answer · 2021-01-11 03:11:42Z

1

You can use URLSearchParams to simplify your code

const params = new URLSearchParams({
  var1: "value",
  var2: "value2",
  arr: "foo",
});
console.log(params.toString());
//Prints "var1=value&var2=value2&arr=foo"

answered Jan 11, 2021 at 3:11

mylesthe.dev

9,7154 gold badges25 silver badges37 bronze badges

Collectives™ on Stack Overflow

Next.js router create query string and query string array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related