Guías Técnicas

Estilos y Diseño en Next.js

Next.js ofrece múltiples formas de manejar estilos CSS. Esta guía te explica cada método con ejemplos prácticos y cuándo usar cada uno.

¿Qué son los estilos en Next.js?

Los estilos son las reglas CSS que definen cómo se ve tu aplicación web. Next.js te permite usar CSS de diferentes maneras, desde archivos CSS tradicionales hasta soluciones más modernas como CSS Modules.

1. Cómo usar CSS básico en Next.js

Definición

El CSS básico es la forma tradicional de escribir estilos usando archivos .css normales.

Ejemplo básico

css 
/* Estilos globales para toda la aplicación */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.button {
background-color: #0070f3;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.button:hover {
background-color: #0051cc;
}

2. Integrando estilos CSS

Método 1: Importar CSS en _app.js

javascript 
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}

Método 2: Importar CSS en componentes específicos

javascript 
import styles from './Header.module.css'

export default function Header() {
return (
  <header className={styles.header}>
    <h1 className={styles.title}>Mi Sitio Web</h1>
  </header>
)
}

3. Cargando los estilos correctamente

Reglas importantes:

  • Estilos globales: Solo se pueden importar en _app.js
  • CSS Modules: Se pueden importar en cualquier componente
  • Archivos CSS normales: Solo globales en _app.js

Ejemplo de estructura de archivos

styles/
├── globals.css          # Estilos globales
├── Home.module.css      # CSS Module para página Home
└── components/
    ├── Header.module.css # CSS Module para Header
    └── Footer.module.css # CSS Module para Footer

4. Estilos globales

¿Qué son?

Los estilos globales afectan a toda tu aplicación. Se usan para resetear CSS, definir fuentes, colores principales, etc.

Ejemplo completo

css 
/* Reset básico */
* {
box-sizing: border-box;
}

html, body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}

/* Variables CSS para colores */
:root {
--primary-color: #0070f3;
--secondary-color: #666;
--background-color: #fafafa;
--text-color: #333;
}

/* Clases utilitarias globales */
.text-center {
text-align: center;
}

.mt-4 {
margin-top: 1rem;
}

.mb-4 {
margin-bottom: 1rem;
}

/* Estilos para enlaces */
a {
color: var(--primary-color);
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
javascript 
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}

5. CSS Modules

¿Qué son los CSS Modules?

Los CSS Modules son archivos CSS que se procesan automáticamente para crear nombres de clase únicos. Esto evita conflictos entre estilos de diferentes componentes.

Ventajas:

  • Scope local: Los estilos solo afectan al componente que los importa
  • No hay conflictos: Cada clase tiene un nombre único
  • Fácil mantenimiento: Cada componente tiene sus propios estilos

Ejemplo práctico

css 
.card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.title {
color: #333;
font-size: 1.5rem;
margin-bottom: 10px;
}

.description {
color: #666;
line-height: 1.6;
}

.button {
background: #0070f3;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin-top: 15px;
}

.button:hover {
background: #0051cc;
}

/* Modificador para card destacada */
.cardFeatured {
border: 2px solid #0070f3;
background: #f0f8ff;
}
javascript 
import styles from './Card.module.css'

export default function Card({ title, description, featured = false }) {
// Combinar clases condicionalmente
const cardClass = featured 
  ? `${styles.card} ${styles.cardFeatured}` 
  : styles.card

return (
  <div className={cardClass}>
    <h3 className={styles.title}>{title}</h3>
    <p className={styles.description}>{description}</p>
    <button className={styles.button}>
      Leer más
    </button>
  </div>
)
}

Usando la Card en una página

javascript 
import Card from '../components/Card'

export default function Home() {
return (
  <div className="container">
    <h1>Mi Blog</h1>
    
    <Card 
      title="Artículo Destacado"
      description="Este es un artículo muy importante que queremos resaltar."
      featured={true}
    />
    
    <Card 
      title="Artículo Normal"
      description="Este es un artículo regular de nuestro blog."
    />
    
    <Card 
      title="Otro Artículo"
      description="Más contenido interesante para nuestros lectores."
    />
  </div>
)
}

6. ¿Qué método usar?

Comparativa de métodos

MétodoCuándo usarVentajasDesventajas
CSS GlobalEstilos base, reset, variablesSimple, familiarPuede causar conflictos
CSS ModulesComponentes específicosSin conflictos, mantenibleMás archivos
Styled JSXEstilos dinámicosCSS en JS, dinámicoCurva de aprendizaje
Tailwind CSSDesarrollo rápidoUtilitario, consistenteClases largas

Recomendación práctica

Para proyectos pequeños a medianos:

// 1. Usa CSS global para estilos base
// styles/globals.css - Variables, reset, utilidades

// 2. Usa CSS Modules para componentes
// components/Button.module.css - Estilos específicos

Estructura recomendada:

styles/
├── globals.css              # Estilos globales
├── variables.css            # Variables CSS
└── components/
    ├── Button.module.css    # Estilos del botón
    ├── Card.module.css      # Estilos de la tarjeta
    └── Header.module.css    # Estilos del header

Ejemplo de proyecto completo

css 
/* Variables globales */
:root {
--primary: #0070f3;
--secondary: #666;
--success: #28a745;
--danger: #dc3545;
--background: #fafafa;
--text: #333;
}

/* Reset y base */
* { box-sizing: border-box; }
body { 
font-family: system-ui, sans-serif; 
background: var(--background);
color: var(--text);
}

/* Utilidades */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
css 
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.header {
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 1rem 0;
}

.main {
flex: 1;
padding: 2rem 0;
}

.footer {
background: #333;
color: white;
padding: 2rem 0;
text-align: center;
}
javascript 
import styles from './Layout.module.css'

export default function Layout({ children }) {
return (
  <div className={styles.layout}>
    <header className={styles.header}>
      <div className="container">
        <h1>Mi Sitio Web</h1>
      </div>
    </header>
    
    <main className={styles.main}>
      <div className="container">
        {children}
      </div>
    </main>
    
    <footer className={styles.footer}>
      <div className="container">
        <p>&copy; 2024 Mi Sitio Web</p>
      </div>
    </footer>
  </div>
)
}
  Resumen

  1. CSS Global: Para estilos base y variables
  2. CSS Modules: Para componentes específicos
  3. Importa globales solo en _app.js
  4. Usa nombres descriptivos en tus clases
  5. Combina métodos según tus necesidades