Moduły CSS w NextJS

NextJS ma już wbudowaną obsługę modułów CSS. Są to oddzielne pliki CSS, w których nazwy klas znajdują się w lokalnej przestrzeni nazw, co pozwala uniknąć konfliktów między nazwami klas z różnych komponentów.

Spójrzmy, jak z nich korzystać. Załóżmy, że mamy pewien komponent:

export default function Test() {
	return <p>
		text text text
	</p>;
}

Stwórzmy dla niego moduł CSS. Aby to zrobić, w tym samym folderze stworzymy plik z rozszerzeniem .module.css i dowolną nazwą. Wpiszmy w nim następującą klasę CSS:

.text {
	color: blue;
}

Zaimportujmy nasz moduł CSS do pliku komponentu:

import styles from './test.module.css';

export default function Test() {
	return <p>
		text text text
	</p>;
}

A teraz zastosujmy klasę CSS do akapitu wewnątrz naszego komponentu:

import styles from './test.module.css';

export default function Test() {
	return <p className={styles.text}>
		text text text
	</p>;
}

Stylizuj swoje komponenty za pomocą modułów CSS.