title: How to detect the device on React SSR App with Next.js?
body: <p>on a web application I want to display two different Menu, one for the Mobile, one for the Desktop browser.
  I use Next.js application with server-side rendering and the library <a href="https://www.npmjs.com/package/react-device-detect" rel="noreferrer">react-device-detect</a>.</p>
  
  <p>Here is the <a href="https://codesandbox.io/embed/affectionate-meadow-9uhez?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noreferrer">CodeSandox link</a>.</p>
  
  <pre><code>import Link from "next/link";
  import { BrowserView, MobileView } from "react-device-detect";
  
  export default () =&gt; (
    &lt;div&gt;
      Hello World.{" "}
      &lt;Link href="/about"&gt;
        &lt;a&gt;About&lt;/a&gt;
      &lt;/Link&gt;
      &lt;BrowserView&gt;
        &lt;h1&gt; This is rendered only in browser &lt;/h1&gt;
      &lt;/BrowserView&gt;
      &lt;MobileView&gt;
        &lt;h1&gt; This is rendered only on mobile &lt;/h1&gt;
      &lt;/MobileView&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>If you open this in a browser and <strong>switch to mobile</strong> view and look the console you get this error:</p>
  
  <blockquote>
    <p>Warning: Text content did not match. Server: " This is rendered only
    in browser " Client: " This is rendered only on mobile "</p>
  </blockquote>
  
  <p>This happen because the rendering by the server detects a browser and on the client, he is a mobile device. The only workaround I found is to generate both and use the CSS like this:</p>
  
  <pre><code>.activeOnMobile {
    @media screen and (min-width: 800px) {
      display: none;
    }
  }
  
  .activeOnDesktop {
    @media screen and (max-width: 800px) {
      display: none;
    }
  }
  </code></pre>
  
  <p>Instead of the library but I don't really like this method. Does someone know the good practice to handle devices type on an SSR app directly in the react code?</p>