Modules CSS

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

Par exemple, considérez 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 .error {} entrant en conflit avec 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 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

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à. Puis, 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 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 du module JS sera concaténé suivant 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 devriez 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 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).