Estilos CSS
Hablemos ahora sobre estilos CSS.
Como puedes ver, nuestra página de inicio (http://localhost:3000) ya tiene algunos estilos. Si observas la estructura de archivos, verás una carpeta llamada styles con dos archivos CSS: una hoja de estilos global (global.css) y un módulo CSS (Home.module.css).
Si tu proyecto no tiene esos archivos, puedes descargar el código inicial aquí:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"Módulos CSS
Los módulos CSS permiten aplicar CSS de forma local a nivel de componente generando automáticamente nombres de clase únicos. Esto te permite usar el mismo nombre de clase CSS en diferentes archivos sin preocuparte por colisiones de nombres.
Además de los módulos CSS, puedes estilizar tu aplicación Next.js de varias formas, incluyendo:
- Sass, que permite importar archivos
.cssy.scss. - Bibliotecas PostCSS como Tailwind CSS.
- Bibliotecas CSS-in-JS como styled-jsx, styled-components y emotion
En esta lección, hablaremos sobre cómo usar Módulos CSS y Sass en Next.js. ¡Comencemos!