title: NextJS - Appending a query param to a dynamic route
body: <p>In my NextJS app, I have a language selector that's visible on every page. When I select a new language, I just want to replace the current URL by appending a query param <code>lang=en</code> to it.</p>
  
  <p>Here's the function that replaces the URL:</p>
  
  <pre><code>const changeLanguage = (lang: LanguageID) =&gt; {
      replace({
        pathname,
        query: { ...query, lang },
      });
    };
  </code></pre>
  
  <p>In this example, <code>replace</code>, <code>query</code> and <code>pathname</code> are coming from the next router.</p>
  
  <p>Now, everything works for static routes, but I'm unable to make it work for dynamic routes. For example, I have the following folder structure:</p>
  
  <pre><code>pages
  |_customers
  |__index.tsx
  |__[customerId].tsx
  </code></pre>
  
  <p>If I'm on <code>http://localhost/customers</code> and I change my language to English, the URL changes to <code>http://localhost/customers?lang=en</code> which is what I want. However, if I'm on <code>http://localhost/customer/1</code> and I change my language to English, the URL changes to <code>http://localhost/customers/[customerId]?customerId=1&amp;lang=en</code>, instead of the URL I'm expecting <code>http://localhost/customers/1?lang=en</code>. </p>
  
  <p>Now, I know that I could use <code>asPath</code> on the router, and reconstruct the query string object by appending <code>lang</code> to it, but I feel that it's something that should be build into Next. Also, I know it could be easily done with vanilla JS, but it's not the point here.</p>
  
  <p>Am I missing something? Is there an easier way to append query params to a dynamic route without doing a server-side re-rendering?</p>
  
  <p>Thanks </p>