NextJS'te CSS Modülleri

NextJS'te zaten yerleşik olarak CSS modülleri desteği bulunmaktadır. Bunlar, sınıf adlarının yerel kapsamda olduğu ayrı CSS dosyalarıdır, bu da farklı bileşenlerden gelen sınıf adları arasındaki çakışmaları önlemeyi sağlar.

Hadi nasıl kullanılacağına bir göz atalım. Diyelim ki bir bileşenimiz var:

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

Şimdi onun için bir CSS modülü oluşturalım. Bunun için aynı klasörde .module.css uzantılı ve herhangi bir adı olan bir dosya oluşturalım. İçine şu CSS sınıfını yazalım:

.text {
	color: blue;
}

CSS modülümüzü bileşen dosyasına içe aktaralım:

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

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

Şimdi de CSS sınıfını bileşenimizin içindeki paragrafa uygulayalım:

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

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

Bileşenlerinizi CSS modülleri kullanarak stilize edin.