CSS Modules et styles globaux

Next.js prend en charge différents types de feuilles de style, notamment :

CSS Modules
Styles globaux
Feuilles de style externes

CSS Modules

Next.js intègre nativement la prise en charge des CSS Modules via l'extension .module.css.

Les CSS Modules limitent la portée des styles CSS 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 craindre de collisions. Ce comportement fait des CSS Modules la solution idéale pour les styles au niveau des composants.

Exemple

Les CSS Modules 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>
}

app/dashboard/styles.module.css

.dashboard {
  padding: 24px;
}

Les CSS Modules sont uniquement activés pour les fichiers avec les extensions .module.css et .module.sass.

En production, tous les fichiers CSS Modules 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érez 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 à chaque route 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 à chaque route 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" />.

Ordre et fusion

Next.js optimise le CSS lors des builds de production en regroupant automatiquement (fusionnant) les feuilles de style. L'ordre du CSS est déterminé par l'ordre dans lequel vous importez les feuilles de style dans votre code d'application.

Par exemple, base-button.module.css sera ordonné avant page.module.css puisque <BaseButton> est importé en premier dans <Page> :

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

import { BaseButton } from './base-button'
import styles from './page.module.css'

export function Page() {
  return <BaseButton className={styles.primary} />
}

import { BaseButton } from './base-button'
import styles from './page.module.css'

export function Page() {
  return <BaseButton className={styles.primary} />
}

Pour maintenir un ordre prévisible, nous recommandons ce qui suit :

Importez un fichier CSS dans un seul fichier JS/TS.
- Si vous utilisez des noms de classe globaux, importez les styles globaux dans le même fichier dans l'ordre souhaité.
Préférez les CSS Modules aux styles globaux.
- Utilisez une convention de nommage cohérente pour vos CSS Modules. Par exemple, utilisez <name>.module.css plutôt que <name>.tsx.
Extrayez les styles partagés dans un composant séparé.
Si vous utilisez Tailwind, importez la feuille de style en haut du fichier, de préférence dans la Mise en page racine.

Bon à savoir : L'ordre du CSS se comporte différemment en mode développement, vérifiez toujours les déploiements de prévisualisation pour confirmer l'ordre final du CSS dans votre build de production.

Fonctionnalités supplémentaires

Next.js inclut des fonctionnalités supplémentaires pour améliorer l'expérience d'ajout de styles :

Lors de l'exécution locale avec next dev, les feuilles de style locales (globales ou CSS Modules) 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 seront regroupés en moins de fichiers .css minifiés pour réduire le nombre de requêtes réseau nécessaires au chargement des styles.
Si vous désactivez JavaScript, les styles seront toujours chargés dans le build de production (next start). Cependant, JavaScript reste nécessaire pour next dev afin d'activer le Rechargement rapide (Fast Refresh).