title: Using global custom style sheet in Next Js
body: <p>According to the documentation <a href="https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet" rel="nofollow noreferrer">found here</a></p>
  
  <p>To import a css file I can do the following in <code>'pages/_app.js'</code>:</p>
  
  <pre><code>import '../styles.css'
  
  // This default export is required in a new `pages/_app.js` file.
  export default function MyApp({ Component, pageProps }) {
    return &lt;Component {...pageProps} /&gt;
  }
  </code></pre>
  
  <p>Easy enough.
  From my understanding this over rides the App component with the global css.</p>
  
  <p>The documentation says:</p>
  
  <pre><code>Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:
  </code></pre>
  
  <p>However when I first initialize an app with Next Js I get a root page of <code>pages/index.js</code>
  This contains my start up page.  There is no app.js file or App component anywhere here.</p>
  
  <p>I'm confused as to how the App component is integrated into the regular index.js file.  </p>
  
  <p>My question is:
  Is the <code>pages/_app.js</code> automatically some how wrapped around pages/index.js?
  Or do I have to import the myApp component into the pages/index.js file?</p>