title: Get responsive props to any components in NextJs
body: <p>I have a code in my NextJs app to detect the <strong>userAgent</strong>. Which is totally okay for the NextJs pages. But, when I need to call this responsive <code>isMobile</code> prop to the components (e.g: Footer, Header, Navigation) then what should I do?</p>
  
  <pre><code>// index.js
  
  IndexPage.getInitialProps = ({ req }) =&gt; {
    let userAgent;
    if (req) { // if you are on the server and you get a 'req' property from your context
      userAgent = req.headers['user-agent'] // get the user-agent from the headers
    } else {
      userAgent = navigator.userAgent // if you are on the client you can access the navigator from the window object
    }
  
    let isMobile = Boolean(userAgent.match(
      /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
    ))
  
    return { isMobile }
  }
  </code></pre>
  
  <blockquote>
    <p>Now I can access the <code>isMobile</code> prop that will return either true or false</p>
  </blockquote>
  
  <pre><code>const IndexPage = ({ isMobile }) =&gt; {
    return ( 
      &lt;div&gt;
       {isMobile ? (&lt;h1&gt;I am on mobile!&lt;/h1&gt;) : (&lt;h1&gt;I am on desktop! &lt;/h1&gt;)} 
      &lt;/div&gt;
    )
  }
  </code></pre>