Conseils de style

Voici quelques conseils de style qui pourraient vous être utiles.

Vous pouvez simplement lire les sections suivantes. Pas besoin de modifier notre application !

Utilisation de la bibliothèque clsx pour basculer entre les classes

clsx est une bibliothèque simple qui vous permet de basculer facilement entre les noms de classes. Vous pouvez l'installer avec npm install clsx ou yarn add clsx.

Consultez sa documentation pour plus de détails, mais voici l'utilisation de base :

• Supposons que vous souhaitiez créer un composant Alert qui accepte un type, pouvant être 'success' ou 'error'.
• Si c'est 'success', vous voulez que la couleur du texte soit verte. Si c'est 'error', vous voulez que la couleur du texte soit rouge.

Vous pouvez d'abord écrire un module CSS (par exemple alert.module.css) comme ceci :

.success {
  color: green;
}
.error {
  color: red;
}

Et utiliser clsx comme ceci :

import styles from './alert.module.css';
import { clsx } from 'clsx';
 
export default function Alert({ children, type }) {
  return (
    <div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

Personnalisation de la configuration PostCSS

Par défaut, sans configuration, Next.js compile le CSS en utilisant PostCSS.

Pour personnaliser la configuration PostCSS, vous pouvez créer un fichier à la racine appelé postcss.config.js. C'est utile si vous utilisez des bibliothèques comme Tailwind CSS.

Voici les étapes pour ajouter Tailwind CSS. D'abord, installez les paquets :

npm install -D tailwindcss autoprefixer postcss

Ensuite, créez un fichier postcss.config.js :

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Nous recommandons également de configurer les sources de contenu en spécifiant l'option content dans tailwind.config.js :

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // Pour des performances optimales et éviter les faux positifs,
    // soyez aussi précis que possible dans votre configuration de contenu.
  ],
};

Pour en savoir plus sur la configuration personnalisée de PostCSS, consultez la documentation de PostCSS.

Pour commencer facilement avec Tailwind CSS, consultez notre exemple.

Utilisation de Sass

Par défaut, Next.js vous permet d'importer Sass en utilisant les extensions .scss et .sass. Vous pouvez utiliser Sass au niveau des composants via CSS Modules et les extensions .module.scss ou .module.sass.

Avant de pouvoir utiliser la prise en charge intégrée de Sass par Next.js, assurez-vous d'installer sass :

npm install -D sass

C'est tout pour cette leçon !

Pour en savoir plus sur la prise en charge intégrée du CSS et des CSS Modules dans Next.js, consultez la documentation CSS.