Built-in CSS Support

Next.js allows you to import CSS files from a JavaScript file.

For example, to add Global Stylesheet to boilerplate, we import following CSS file within pages/_app.tsx.

src/styles/global.css

hmtl,body {    margin: 0;    padding: 0;    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",        "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}

Then, import the styles.css file.

pages/_app.tsx

import React from "react";import { AppProps } from "next/app";import "@styles/global.css";
function MyApp({ Component, pageProps }: AppProps): JSX.Element {  return <Component {...pageProps} />;}
export default MyApp;

These styles will apply to all pages and components in your application.

CSS Modules

caution

next.js only supports CSS Modules as Component-Level CSS implementation.

CSS Modules let you use the same CSS class name in different files without worrying about naming clashes.

To style your components using CSS Modules, name your stylesheet files with the [name].module.css.

For example, lets check out a reusable Header component implementation.

components/header/index.module.css

.header {  background-color: #20232A;  text-align: center;}

components/header

import React from "react";import styles from "./index.module.css";import { Logo } from "@components";
export const Header: React.FC = () => {  return (    <div className={styles.header}>      <Logo />    </div>  );};

note

The class names which will be processed into a globally unique class name during build.