title: How to integrate Nextjs + styled-components with material-ui
body: <p><strong>1.</strong>  To build a next.js app using styled components it's really easy. You just have to use their <code>_document.js</code> snippet to enable SSR and prevent styles flickering on page load: <a href="https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js" rel="noreferrer">https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js</a></p>
  
  <p><strong>2.</strong> To build a next.js app using material-ui is almost as simple. You just have to start with ther project base: <a href="https://github.com/mui-org/material-ui/tree/master/examples/nextjs" rel="noreferrer">https://github.com/mui-org/material-ui/tree/master/examples/nextjs</a>, which has its own implementation on <code>_document.js</code>: <a href="https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js" rel="noreferrer">https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js</a> </p>
  
  <p><strong>3.</strong> Sadly, I couldn't figure out how to "merge" both implementations and get a next app where both styled-components and material-ui components can coexist, SSR and do not flicker on page load. </p>
  
  <p>Can you help me?
  Is there someone on the internet with better abilities than mine whom already solved that problem but I do not know about?</p>
  
  <p>Thanks in advance. </p>