How to fix the NextJs Query parameter that is not working on the static export?

Question

I have exported a NextJs app. When I export it to the static app the URL parameters are not working on the server. (Exported to static HTML app)

Eg url: http://app.domain.com/?p=demo&u=udemo

export default ({ url: { query: { p ,u } } }) => (
  <div>
    <Ads pub={p} user={u} />
   </div>
)

The p and u values are not passed to the component the default ones are used. Any way to pass query parameters to the component without using node js?

Answer 1

The value of p and u can be grabbed from the URL using RegExp. These functions are placed inside the component.

  getParameterByName(name, url) {
    if (!url) url = window.location.pathname;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
} 


componentDidMount(){
  const url = window.location.href;
  const pub=this.getParameterByName('pub',url);
 const user=this.getParameterByName('user',url);
}

Credits: How can I get query string values in JavaScript?