title: Styled Components Global style duplicated in Next
body: <p>Why is my global styles duplicated? I'm using Styled Components and I created a file GlobalStyles.js. in the root of the aplication, like i do in React or Gatsby. In this file I call the Hook createGlobalStyle and define all global css. The problem is that all my global css is duplicated in Next.</p>
  <p><a href="https://i.stack.imgur.com/PKia5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PKia5.png" alt="enter image description here" /></a></p>
  <p>_document.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Document from 'next/document'
  import { ServerStyleSheet } from 'styled-components'
  
  export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet()
      const originalRenderPage = ctx.renderPage
  
      try {
        ctx.renderPage = () =&gt;
          originalRenderPage({
            enhanceApp: (App) =&gt; (props) =&gt;
              sheet.collectStyles(&lt;App {...props} /&gt;),
          })
  
        const initialProps = await Document.getInitialProps(ctx)
        return {
          ...initialProps,
          styles: (
            &lt;&gt;
              {initialProps.styles}
              {sheet.getStyleElement()}
            &lt;/&gt;
          ),
        }
      } finally {
        sheet.seal()
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>_app.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { GlobalStyles } from '../../GlobalStyles'
  import Layout from '../components/Layout'
  
  function MyApp({ Component, pageProps }) {
    return (
      &lt;&gt;
        &lt;Layout&gt;
          &lt;GlobalStyles /&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/Layout&gt;
      &lt;/&gt;
    )
  }
  
  export default MyApp</code></pre>
  </div>
  </div>
  </p>
  <p>I am absolutely new in Next - is my first App.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"dependencies": {
      "babel-plugin-styled-components": "^1.13.2",
      "next": "11.1.0",
      "react": "17.0.2",
      "react-dom": "17.0.2",
      "styled-components": "^5.3.1"
    },</code></pre>
  </div>
  </div>
  </p>
  <p>It should probably be something very simple.</p>
  <p>.babelrc</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
      "presets": [
          "next/babel"
      ],
      "plugins": [
          "babel-plugin-styled-components"
      ]
  }</code></pre>
  </div>
  </div>
  </p>