CSS Modules στο NextJS

Το NextJS έχει ήδη ενσωματωμένη υποστήριξη για CSS Modules. Αυτά είναι ξεχωριστά CSS αρχεία στα οποία τα ονόματα των κλάσεων βρίσκονται σε τοπικό πεδίο εφαρμογής, γεγονός που αποφεύγει συγκρούσεις μεταξύ ονόματων κλάσεων από διαφορετικά components.

Ας δούμε πώς να τα χρησιμοποιούμε. Ας υποθέσουμε ότι έχουμε ένα συγκεκριμένο component:

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

Ας δημιουργήσουμε ένα CSS Module γι' αυτό. Για να το κάνουμε αυτό, στον ίδιο φάκελο θα φτιάξουμε ένα αρχείο με επέκταση .module.css και ένα αυθαίρετο όνομα. Σε αυτό θα γράψουμε την ακόλουθη CSS κλάση:

.text {
	color: blue;
}

Ας εισάγουμε το CSS module μας στο αρχείο του component:

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

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

Και τώρα ας εφαρμόσουμε την CSS κλάση στη παράγραφο μέσα στο component μας:

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

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

Στυλάρετε τα components σας χρησιμοποιώντας CSS modules.