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 app :

app/blog/blog.module.css

.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.

Créez un fichier app/global.css et importez-le dans la mise en page racine pour appliquer les styles à chaque route de votre application :

app/global.css

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

// 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>
  )
}

Bon à savoir : Les styles globaux peuvent être importés dans n'importe quelle mise en page, page ou composant du répertoire app. Cependant, comme Next.js utilise la prise en charge native des feuilles de style par React pour s'intégrer à Suspense, cela ne supprime actuellement pas les feuilles de style lors de la navigation entre les routes, ce qui peut entraîner des conflits. Nous recommandons d'utiliser les styles globaux pour le CSS vraiment global, et les modules CSS pour le CSS à portée limitée.

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>
  )
}

Bon à savoir : Dans React 19, <link rel="stylesheet" href="..." /> peut également être utilisé. Consultez la documentation React sur link pour plus d'informations.

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.

Comment utiliser CSS dans votre application

Modules CSS

CSS global

Feuilles de style externes

Ordre et fusion

Recommandations

Développement vs Production

Tailwind CSS

Sass

CSS-in-JS

On this page