Create url with query params in Next.js

Question

I want to create an url from query params in the next way:

 router.push(
      {
        pathname: '/cars',
        query: colors + type + price,

      },
      undefined,
      {
        shallow: true,
      },
  );

const colors = ['red', 'blue', 'yellow']; //the arrays could contain many others values
const type = ['offroad', 'sport'];
const price = 'hight'  //this is a string

I want to achieve, when i will click the button which trigger the router.push, the next: /cars?color=red,yellow,blue&type=offroad,sport&price=hight

how will you get the query if you have same key for multiple values? — Shyam
– Shyam, Commented Nov 1, 2020 at 17:41
if you have query as color=red&color=blue how will you parse them? I will suggest you to have it in this format /cars?colors=red,blue,green&type=sports — Shyam
– Shyam, Commented Nov 1, 2020 at 17:54
@Shyam, i got what you mean, but i need a solution for the situation that i've described above. Could you help? — Asking
– Asking, Commented Nov 1, 2020 at 18:00
query param must be a valid object. in your case you have same key for multiple value which will be overridden. — Shyam
– Shyam, Commented Nov 1, 2020 at 18:08

Sabrina Luo · Accepted Answer · 2020-11-02 10:23:25Z

11

you can simply do:

 const router = useRouter();
 router.push(
  {
    pathname: '/cars',
    query: {
      colors,
      type,
      price,
  },
  undefined,
  {
    shallow: true,
  },

);

According to Next/Router type, query is typeof ParsedUrlQuery which equivalent to

interface ParsedUrlQuery extends NodeJS.Dict<string | string[]> { }

That is to say, next/router is able to parse both string and array of strings

answered Nov 2, 2020 at 10:23

Sabrina Luo

4,0504 gold badges19 silver badges37 bronze badges

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

1 Comment

Asking Over a year ago

Lue, thanks, could you take a look stackoverflow.com/questions/64662714/…

FDisk · Accepted Answer · 2021-10-04 13:58:48Z

5

If you have a dynamic route and want to be able to use this universally, for example, some link on every page (in the header) you can achieve this by providing all currently available route params and add or replace the additional or existing one.

// ...
const router = useRouter();
// ...

<Link
    href={{
        pathname: router.pathname,
        query: { ...router.query, colors, type, price },
    }}
    passHref
    shallow
    replace
></Link>

answered Oct 4, 2021 at 13:58

FDisk

9,6732 gold badges54 silver badges56 bronze badges

Comments

Evaldas B · Accepted Answer · 2022-08-25 13:40:14Z

If you store your params with repeating keys Next.js will recognize it as an array

router.query = color=red&color=green&color=blue
router.push(router)
router.query -> ["red", "green", "blue"]

If you store your params with the same key they will be stored as a single string:

router.query="color=red,green,blue"
router.push(router)
router.query -> red,green,blue

If you want your param key items to be stored in an array:

const params = []
const colors = ['red', 'blue', 'yellow'].map(color => `color=${color}`).join("&")
const type = ['offroad', 'sport'].map(type => `type=${type}`).join("&")
const price = 'hight'

colors && params.push(colors)
type && params.push(type)
price && params.push(price)

const paramsString = params.join('&')
router.params = paramsString
router.push(router)

// This code would result your query.params to be:
query.params -> {color: ['red', 'green', 'blue'], type: ['offroad', 'sports'], price:'hight'}

If you want your param key items to be stored as a string:

const colors = ['red', 'blue', 'yellow']
const type = ['offroad', 'sport']
const price = 'hight'

router.query.colors = colors.join(',')
router.query.type = type.join(',')
router.query.price = price
router.push(router)

// This code would result your query.params to be:
query.params -> {color: 'red,green,blue', type:'offroad,sports', price:'hight'}

Shyam · Accepted Answer · 2020-11-01 18:03:21Z

0

https://nextjs.org/docs/api-reference/next/router#with-url-object

you try this

router.push({
          pathname: '/cars',
          query: {
              colors: colors.join(","),
               types: types.join(",")
           },
 })

answered Nov 1, 2020 at 18:03

Shyam

1,4548 silver badges13 bronze badges

3 Comments

new Q Open Wid Over a year ago

Explain please?

Shyam Over a year ago

router.push resolves your query object to query string. so it will be converted from` { colors : red, blue, type: sports}` to colors=red, blue&type=sports

Asking Over a year ago

@Shyam, but how to get /cars?color=red&color=yellow&color=blue&type=offroad&type=sport&price=hight?

Collectives™ on Stack Overflow

Create url with query params in Next.js

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related