Stylisation CSS
Parlons maintenant de la stylisation CSS.
Comme vous pouvez le voir, notre page d'index (http://localhost:3000) a déjà quelques styles. Si vous regardez la structure de vos fichiers, vous verrez un dossier appelé styles avec deux fichiers CSS : une feuille de style globale (global.css) et un module CSS (Home.module.css).
Si votre projet ne possède pas ces fichiers, vous pouvez télécharger le code de départ ici :
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"Modules CSS
Les modules CSS vous permettent de limiter localement le CSS au niveau des composants en créant automatiquement des noms de classe uniques. Cela vous permet d'utiliser le même nom de classe CSS dans différents fichiers sans craindre les collisions de noms de classe.
En plus des modules CSS, vous pouvez styliser votre application Next.js de différentes manières, notamment :
- Sass qui vous permet d'importer des fichiers
.csset.scss. - Des bibliothèques PostCSS comme Tailwind CSS.
- Des bibliothèques CSS-in-JS telles que styled-jsx, styled-components et emotion
Dans cette leçon, nous parlerons de comment utiliser les modules CSS et Sass dans Next.js. Allons-y !