Style Your Next.js App with Global CSS, CSS Modules, and CSS-In-JS

There is a plethora of options when it comes to styling your Next.js app. Global CSS, component level CSS, CSS-in-JS, or some kind of CSS framework. In this lesson, we are going to be focusing on the first three.

Creating a global CSS file is as simple as create a file called global.css under the root styles directory and importing it into your App component.

CSS on the component level is accomplished using CSS modules. To do this you can create a CSS file on the same level as the component and give it the same filename but the .module.css extension instead of .tsx. Then you can import this into your component and use it as styles.

CSS-in-JS is done by using a style prop inline in your TSX and defining CSS with the object + camelCase syntax.