From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Global styling with Next.js

Global styling with Next.js

From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Start my 1-month free trial Buy for my team

Global styling with Next.js

“

But if you want to add a global style that would basically affect everything and not just one component, it would be annoying to redo the same component layout on each and every single page. To load global CSS, what we could do actually is we could create in our pages an app.js file, and the default export of that is a top-level React component that would wrap all the pages in our applications. Then we could use that to add global styles. So in our pages, we're going to add another file at the root of pages. And it's going to be next to the index. And it's going to be underscore app.js. Oops, not ks. And here, OK, very good. And here we're going to do an export default function app. And we'll have a component. Oops, component. Components, page props, and we're going to return the components and the page props here. The underscore app is really what we're using as a top-level React component. And to get this really to work, we're going to have to restart the server. So we're going to…

Contents