From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

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

Styling: Global CSS and CSS modules

Styling: Global CSS and CSS modules - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Styling: Global CSS and CSS modules

“

Before diving deep into Next.js, let's have a look at how we can use or implement styling. So in the current project, if you see, we have a file called globals.css. This global CSS actually contains all the global styling. And to make it available for the entire project, it is configured in the layout.js file. Let me open it. And here you see the import statement. However, having all the styling in one place is not a good idea. And it is a task to manage all the code. So the better alternative is to have separate CSS files that are arranged in their respective folders. And Next.js offers a really wonderful solution, which is the CSS modules. CSS modules are like normal CSS files only, where you can have your styling rules defined. But the difference is in the way they are used and the naming convention. The CSS modules follow the dot module dot CSS naming convention. We can see that in the project as well. There is a page.module.css file, which is actually a CSS module. Now these…

Contents