Routeur d\'application - Styles CSS

Actuellement, votre page d'accueil n'a aucun style. Voyons les différentes manières de styliser votre application Next.js.

Styles globaux

Si vous regardez dans le dossier /app/ui, vous verrez un fichier appelé global.css. Vous pouvez utiliser ce fichier pour ajouter des règles CSS à toutes les routes de votre application - comme des règles de réinitialisation CSS, des styles globaux pour les éléments HTML comme les liens, et plus encore.

Vous pouvez importer global.css dans n'importe quel composant de votre application, mais il est généralement recommandé de l'ajouter à votre composant de plus haut niveau. Dans Next.js, il s'agit de la disposition racine (root layout) (nous y reviendrons plus tard).

Ajoutez des styles globaux à votre application en naviguant vers /app/layout.tsx et en important le fichier global.css :

/app/layout.tsx

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Avec le serveur de développement toujours en cours d'exécution, enregistrez vos modifications et prévisualisez-les dans le navigateur. Votre page d'accueil devrait maintenant ressembler à ceci :

Mais attendez une seconde, vous n'avez ajouté aucune règle CSS, d'où viennent ces styles ?

Si vous regardez dans global.css, vous remarquerez quelques directives @tailwind :

/app/ui/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind est un framework CSS qui accélère le processus de développement en vous permettant d'écrire rapidement des classes utilitaires directement dans votre code React.

Avec Tailwind, vous stylisez des éléments en ajoutant des noms de classe. Par exemple, ajouter "text-blue-500" rendra le texte <h1> bleu :

<h1 className="text-blue-500">Je suis bleu !</h1>

Bien que les styles CSS soient partagés globalement, chaque classe est appliquée individuellement à chaque élément. Cela signifie que si vous ajoutez ou supprimez un élément, vous n'avez pas à vous soucier de maintenir des feuilles de style séparées, des conflits de style ou de la taille de votre bundle CSS qui augmente avec l'échelle de votre application.

Lorsque vous utilisez create-next-app pour démarrer un nouveau projet, Next.js vous demandera si vous souhaitez utiliser Tailwind. Si vous sélectionnez oui, Next.js installera automatiquement les paquets nécessaires et configurera Tailwind dans votre application.

Si vous regardez /app/page.tsx, vous verrez que nous utilisons des classes Tailwind dans l'exemple.

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // Ce sont des classes Tailwind :
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}

Ne vous inquiétez pas si c'est votre première fois avec Tailwind. Pour gagner du temps, nous avons déjà stylisé tous les composants que vous utiliserez.

Jouons avec Tailwind ! Copiez le code ci-dessous et collez-le au-dessus de l'élément <p> dans /app/page.tsx :

/app/page.tsx

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

Si vous préférez écrire des règles CSS traditionnelles ou garder vos styles séparés de votre JSX - les modules CSS sont une excellente alternative.

Modules CSS

Les modules CSS vous permettent de limiter la portée du CSS à un composant en créant automatiquement des noms de classe uniques, vous n'avez donc pas à vous soucier des conflits de style non plus.

Nous continuerons à utiliser Tailwind dans ce cours, mais prenons un moment pour voir comment vous pouvez obtenir les mêmes résultats que dans l'exemple ci-dessus en utilisant les modules CSS.

Dans /app/ui, créez un nouveau fichier appelé home.module.css et ajoutez les règles CSS suivantes :

/app/ui/home.module.css

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Ensuite, dans votre fichier /app/page.tsx, importez les styles et remplacez les noms de classe Tailwind du <div> que vous avez ajouté par styles.shape :

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
  )
}

Enregistrez vos modifications et prévisualisez-les dans le navigateur. Vous devriez voir la même forme qu'auparavant.

Tailwind et les modules CSS sont les deux méthodes les plus courantes pour styliser les applications Next.js. Que vous utilisiez l'un ou l'autre est une question de préférence - vous pouvez même utiliser les deux dans la même application !

Utilisation de la bibliothèque `clsx` pour basculer entre les noms de classe

Il peut y avoir des cas où vous devez styliser conditionnellement un élément en fonction d'un état ou d'une autre condition.

clsx est une bibliothèque qui vous permet de basculer facilement entre les noms de classe. Nous vous recommandons de consulter la documentation pour plus de détails, mais voici l'utilisation de base :

Supposons que vous souhaitiez créer un composant InvoiceStatus qui accepte un status. Le statut peut être 'pending' ou 'paid'.
S'il est 'paid', vous voulez que la couleur soit verte. S'il est 'pending', vous voulez que la couleur soit grise.

Vous pouvez utiliser clsx pour appliquer conditionnellement les classes, comme ceci :

/app/ui/invoices/status.tsx

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

Autres solutions de style

En plus des approches que nous avons discutées, vous pouvez également styliser votre application Next.js avec :

Sass qui vous permet d'importer des fichiers .css et .scss.
Des bibliothèques CSS-in-JS comme styled-jsx, styled-components et emotion.

Consultez la documentation CSS pour plus d'informations.

Styles CSS

Styles globaux

Tailwind

Modules CSS

Utilisation de la bibliothèque clsx pour basculer entre les noms de classe

Autres solutions de style

On this page

Utilisation de la bibliothèque `clsx` pour basculer entre les noms de classe