Comment utiliser CSS dans votre application

Next.js offre plusieurs façons d'utiliser CSS dans votre application, notamment :

• Modules CSS
• CSS global
• Feuilles de style externes
• Tailwind CSS
• Sass
• CSS-in-JS

Modules CSS

Les modules CSS limitent la portée du CSS en générant des noms de classe uniques. Cela vous permet d'utiliser la même classe dans différents fichiers sans craindre les collisions de noms.

Pour commencer à utiliser les modules CSS, créez un nouveau fichier avec l'extension .module.css et importez-le dans n'importe quel composant du répertoire pages :

.blog {
  padding: 24px;
}

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

export default function Page() {
  return <main className={styles.blog}></main>
}

CSS global

Vous pouvez utiliser le CSS global pour appliquer des styles à toute votre application.

Importez la feuille de style dans le fichier pages/_app.js pour appliquer les styles à chaque route de votre application :

import '@/styles/global.css'

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

En raison de la nature globale des feuilles de style, et pour éviter les conflits, vous devez les importer dans pages/_app.js.

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à de JavaScript.

Importer des styles depuis node_modules

Depuis Next.js 9.5.4, l'importation d'un fichier CSS depuis node_modules est autorisée 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>
  )
}

Ordre et fusion

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

Par exemple, base-button.module.css sera ordonné avant page.module.css car <BaseButton> est importé avant page.module.css :

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

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

Recommandations

Pour maintenir un ordre CSS prévisible :

• Essayez de limiter les imports CSS à un seul fichier d'entrée JavaScript ou TypeScript
• Importez les styles globaux et les feuilles de style Tailwind à la racine de votre application.
• Utilisez des modules CSS plutôt que des styles globaux pour les composants imbriqués.
• Utilisez une convention de nommage cohérente pour vos modules CSS. Par exemple, utilisez <nom>.module.css plutôt que <nom>.tsx.
• Extrayez les styles partagés dans des composants partagés pour éviter les imports en double.
• Désactivez les linters ou formateurs qui trient automatiquement les imports comme sort-imports d'ESLint.
• Vous pouvez utiliser l'option cssChunking dans next.config.js pour contrôler comment le CSS est regroupé.

Développement vs Production

• En développement (next dev), les mises à jour CSS s'appliquent instantanément avec Fast Refresh.
• En production (next build), tous les fichiers CSS sont automatiquement concaténés en plusieurs fichiers .css minifiés et découpés, garantissant que la quantité minimale de CSS est chargée pour une route.
• Le CSS se charge toujours avec JavaScript désactivé en production, mais JavaScript est nécessaire en développement pour Fast Refresh.
• L'ordre du CSS peut se comporter différemment en développement, vérifiez toujours le build (next build) pour confirmer l'ordre final du CSS.