CODEWITHSUNDEEP
next.js
FabricioG
FabricioG

Reputation: 3320

Using global custom style sheet in Next Js

According to the documentation found here

To import a css file I can do the following in 'pages/_app.js':

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Easy enough. From my understanding this over rides the App component with the global css.

The documentation says:

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:

However when I first initialize an app with Next Js I get a root page of pages/index.js This contains my start up page. There is no app.js file or App component anywhere here.

I'm confused as to how the App component is integrated into the regular index.js file.

My question is: Is the pages/_app.js automatically some how wrapped around pages/index.js? Or do I have to import the myApp component into the pages/index.js file?

Upvotes: 1

Views: 1161

Answers (1)

Gokhan Sari
Gokhan Sari

Reputation: 7944

My question is: Is the pages/_app.js automatically some how wrapped around pages/index.js? Or do I have to import the myApp component into the pages/index.js file?

Yes, next.js automatically wraps your application with the component defined in _app.js. If you don't have that file, next.js uses its default.

You need to follow a specific pattern when defining your App component in _app.js. You can check here to see how you should set a custom App component: https://nextjs.org/docs/advanced-features/custom-app

Upvotes: 2

Related Questions