title: Create url with query params in Next.js
body: <p>I want to create an url from query params in the next way:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> router.push(
        {
          pathname: '/cars',
          query: colors + type + price,
  
        },
        undefined,
        {
          shallow: true,
        },
    );</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const colors = ['red', 'blue', 'yellow']; //the arrays could contain many others values
  const type = ['offroad', 'sport'];
  const price = 'hight'  //this is a string</code></pre>
  </div>
  </div>
  </p>
  <p>I want to achieve, when i will click the button which trigger the <code>router.push</code>, the next:
  <code>/cars?color=red,yellow,blue&amp;type=offroad,sport&amp;price=hight</code></p>