How To Create Global CSS In Next.js

Today we will learn how to add global css to Next.js, you may know that Next.js has 3 different ways to use css. First one is to use style.jsx for isolate scoped css and Next.js will bundle css for you. Second one is to use Css Modules will create a scope css by creating a very unique class name, and can use this that class name in many comments by invoking the class name. The last one is to use global css file for all our project components, and thats what we will see in this article.

Create Next projtect

To create a project in Next.js is very simple and easy all what you have to do is to run the code and will sets up everything automatically for you.

npx create-next-app
# or
yarn create next-app

Add Global Css file

After we created our project, is time to see how we can have global css file, first of all I delete all content in index.js to Demo global css

Let’s create a folder called styles in the root of our project, inside our folder we will create a file called it globals.css

After this we will create a file in pages folder with a specific name _app.js Next.js uses the App component to initialize pages. Afer that we add this code to our _app.js and we import our styles/globals.css inside _app.js

Now add our css design inside globals.css and will effect all our component, for example