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

Par exemple, considérons un composant Button réutilisable dans le dossier components/ :

Commencez par créer components/Button.module.css avec le contenu suivant :

/*
Vous n'avez pas à vous soucier de la collision entre .error {} et d'autres fichiers
`.css` ou `.module.css` !
*/
.error {
  color: white;
  background-color: red;
}

Ensuite, créez components/Button.js, en important et utilisant le fichier CSS ci-dessus :

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // Notez comment la classe "error" est accessible comme propriété de l'objet
      // `styles` importé.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

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

Pour ajouter une feuille de style à votre application, importez le fichier CSS dans pages/_app.js.

Par exemple, considérez la feuille de style suivante nommée styles.css :

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Créez un fichier pages/_app.js s'il n'existe pas déjà. Ensuite, importez le fichier styles.css.

import '../styles.css'

// Cette exportation par défaut est requise dans un nouveau fichier `pages/_app.js`.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Ces styles (styles.css) s'appliqueront à toutes les pages et composants de votre application. En raison de la nature globale des feuilles de style, et pour éviter les conflits, vous ne pouvez les importer que dans pages/_app.js.

En développement, cette approche permet un rechargement à chaud (hot reload) des styles lors de leur modification, tout en conservant l'état de l'application.

En production, tous les fichiers CSS seront automatiquement concaténés en un seul fichier .css minifié. L'ordre de concaténation correspondra à l'ordre d'importation dans le fichier _app.js. Portez une attention particulière aux modules JS importés qui incluent leur propre CSS ; le CSS de ces modules sera concaténé selon les mêmes règles d'ordre que les fichiers CSS importés. Par exemple :

import '../styles.css'
// Le CSS de ErrorBoundary dépend du CSS global dans styles.css,
// donc nous l'importons après styles.css.
import ErrorBoundary from '../components/ErrorBoundary'

export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

Feuilles de style externes

Next.js vous permet d'importer des fichiers CSS depuis un fichier JavaScript. Ceci est possible car Next.js étend le concept d'import au-delà du JavaScript.

Importer des styles depuis node_modules

Depuis Next.js 9.5.4, l'import d'un fichier CSS depuis node_modules est autorisé n'importe où dans votre application.

Pour les feuilles de style globales, comme bootstrap ou nprogress, vous devez importer le fichier dans pages/_app.js. Par exemple :

import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Pour importer le CSS requis par un composant tiers, vous pouvez le faire dans votre composant. Par exemple :

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Ouvrir le dialogue</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Fermer</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Bonjour. Je suis un dialogue</p>
      </Dialog>
    </div>
  )
}

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 .css minifié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 pour next dev afin d'activer le Rechargement rapide (Fast Refresh).