Modules CSS
Next.js prend en charge nativement les modules CSS via l'extension .module.css.
Les modules CSS limitent la portée des styles en générant automatiquement des noms de classe uniques. Cela vous permet d'utiliser le même nom de classe dans différents fichiers sans risque de collision. Ce comportement fait des modules CSS la solution idéale pour les styles au niveau des composants.
Exemple
Les modules CSS peuvent être importés dans n'importe quel fichier du répertoire app :
import styles from './styles.module.css'
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return <section className={styles.dashboard}>{children}</section>
}import styles from './styles.module.css'
export default function DashboardLayout({ children }) {
return <section className={styles.dashboard}>{children}</section>
}.dashboard {
padding: 24px;
}Les modules CSS sont une fonctionnalité optionnelle et sont uniquement activés pour les fichiers avec l'extension .module.css.
Les feuilles de style <link> classiques et les fichiers CSS globaux restent pris en charge.
En production, tous les fichiers de modules CSS seront automatiquement concaténés en plusieurs fichiers .css minifiés et découpés.
Ces fichiers .css représentent les chemins d'exécution critiques de votre application, garantissant que la quantité minimale de CSS est chargée pour le rendu de votre application.
Styles globaux
Les styles globaux peuvent être importés dans n'importe quelle mise en page (layout), page ou composant du répertoire app.
Bon à savoir : Ceci diffère du répertoire
pages, où vous ne pouvez importer des styles globaux que dans le fichier_app.js.
Par exemple, considérons une feuille de style nommée app/global.css :
body {
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}Dans la mise en page racine (app/layout.js), importez la feuille de style global.css pour appliquer les styles à chaque route de votre application :
// Ces styles s'appliquent à toutes les routes de l'application
import './global.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}// Ces styles s'appliquent à toutes les routes de l'application
import './global.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Feuilles de style externes
Les feuilles de style publiées par des packages externes peuvent être importées n'importe où dans le répertoire app, y compris dans les composants colocalisés :
import 'bootstrap/dist/css/bootstrap.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className="container">{children}</body>
</html>
)
}import 'bootstrap/dist/css/bootstrap.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="container">{children}</body>
</html>
)
}Bon à savoir : Les feuilles de style externes doivent être importées directement depuis un package npm ou téléchargées et colocalisées avec votre codebase. Vous ne pouvez pas utiliser
<link rel="stylesheet" />.
Fonctionnalités supplémentaires
Next.js inclut des fonctionnalités supplémentaires pour améliorer l'expérience de création de styles :
- En local avec
next dev, les feuilles de style locales (globales ou modules CSS) bénéficient du Rechargement rapide (Fast Refresh) pour refléter instantanément les modifications lors de l'enregistrement. - Lors de la construction pour la production avec
next build, les fichiers CSS sont regroupés en moins de fichiers.cssminifiés pour réduire le nombre de requêtes réseau nécessaires. - Si vous désactivez JavaScript, les styles seront toujours chargés dans la version de production (
next start). Cependant, JavaScript reste nécessaire pournext devafin d'activer le Rechargement rapide (Fast Refresh).