title: Material UI style with Next.js will break
body: <p>I tried to move a project from plain React to Next.js and I just can't make it work.
  I even tried to just copy the files to another working next.js project and it's the same.</p>
  <p>It seems that it is broken on production every time but just sometimes in dev (broken, but different from production).</p>
  <p>When I refresh the page it will break almost every time.</p>
  <p>The footer component is broken almost 90% of the time.</p>
  <p>If I navigate with the Link component it works fine almost every time (except the footer) but if I refresh or use Router it will break.</p>
  <p>I imported all the styles components (makeStyles, createStyles, Theme) from &quot;@material-ui/core/styles&quot; and then I tried with &quot;@material-ui/core&quot; and still not working.</p>
  <p>Production build images:<br />
  <img src="https://i.stack.imgur.com/GUkIg.png" alt="Production build img" />
  <img src="https://i.stack.imgur.com/KR3qk.png" alt="Production build2 img" /></p>
  <p>Dev broken images
  <img src="https://i.stack.imgur.com/ApLNU.png" alt="Dev broken img" />
  <img src="https://i.stack.imgur.com/vc7jK.png" alt="Dev working img" /></p>
  <p>Code:</p>
  <p><a href="https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js" rel="nofollow noreferrer">This is the _document file from material documentation</a></p>
  <p><a href="https://github.com/Dumnezeu1/auto-shop/blob/main/pages/_app.tsx" rel="nofollow noreferrer">The _app file</a></p>
  <p>The same files (_document and _app) are used in another project and that project works.</p>
  <p><a href="https://github.com/Dumnezeu1/auto-shop" rel="nofollow noreferrer">Github repo</a></p>