title: Match and Param object in Next.js router for Server side rendering
body: <p>I am trying to convert my client side application to server side rendered because of problem in SEO. For client side I have used react router which is passing the prop to other child components while render. </p>
  
  <p><strong>Below is current code</strong></p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>render() {
  return (
  &lt;Switch&gt;
  &lt;Route path={constant.pathId + constant.pathGender} render={(props) =&gt; &lt;HomeScreen {...props} /&gt;} /&gt;
  &lt;/Switch&gt;
  );
  }
  </code></pre>
  
  <p><strong>Const</strong></p>
  
  <pre><code>export const industryRegexGender = "(men||women)";
  export const industryRegex = "(en-kw||en-qa||en-ae||en-bh||en-om||en-sa||ar-kw||ar-qa||ar-ae||ar-bh||ar-om||ar-sa)";
  export const pathId = `/:id${industryRegex}`;
  export const pathGender = `/:gender${industryRegexGender}`;
  </code></pre>
  
  <p><strong>Homescreen component</strong> ( Getting the value here in the child components)</p>
  
  <pre><code>let paramId = this.props.match.params.id
  </code></pre>
  
  <p><strong>Screenshot of console</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ARUu7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ARUu7.png" alt="enter image description here"></a></p>
  
  <p><strong>I am not sure how to achieve this with Next/router, already tried following next.js documentation.</strong> </p>
  
  <p><strong>Any help of sample would be really appreciated.</strong> </p>