Existen muchas maneras de agregar CSS a Next.js, pero en este post vamos a conocer las 5 que el propio Next.js soporta por default.

1. Archivo CSS Global

La primera manera es el CSS global, que te permite inyectar un archivo CSS como lo haríamos de forma tradicional en el archivo HTML principal. Con Next.js logramos esto simplemente colocando un archivo CSS en nuestra carpeta de estilos e importando este archivo en pages/app.js. Esto bastaría para que las clases que coloquemos en ese archivo de CSS global, estén disponibles para todo el resto del App. 👀 Ojo aquí con la repetición y colisión de clases.

pages/_app.js

import '../styles.css' // este archivo vive en src/styles.css

export default function App({ props }) {
  return <section {...props} />
}

2. Siguiendo la misma línea, podemos importar CSS de terceros

A partir de Next.js versión 9, es posible importar archivos CSS provenientes de librerías NPM.

Esto es común si utilizas librerías de estilo como bootstrap o ant.design. Haremos el mismo procedimiento para la importación, pero comenzando con el nombre del paquete:

pages/_app.js

import 'bootstrap/dist/css/bootstrap.css'

export default function App({ props }) {
  return <section {...props} />
}

¿Simple no? 🍿

3. Módulos CSS

Los módulos CSS son un gran agregado al ecosistema de React, pues nos permiten repetir el nombre de las clases en diferentes componentes sin tener que preocuparnos por colisiones de clases o sobrescrituras.

La forma de definir un css module es agregando la terminación .module.css al nombre del archivo, algo como: Button + module.css.

components/Button.module.css

.btn {
  color: white;
  background-color: steelblue;
}

Los archivos de módulos CSS, no tienen ninguna diferencia en contenido con un archivo CSS tradicional, la magia ocurre en build time es decir, cuando Next.js genera los archivos de producción. Ahora podemos usar nuestras clases modularizadas con confianza:

components/Button.js

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      className={styles.btn}
    >
      Enviar
    </button>
  )
}

Observa que la importación se hace como si importáramos un objeto, y se usa así, como si las clases fueran llaves de ese objeto. Esto viene a ser muy semántico, pues estamos trabajando en JS y tener los estilos en forma de objeto viene bien.

4. Sass

Sass tiene una ya un rato con nosotros. Saas (Syntactically Awesome Stylesheet) Interprertado por mi, sería algo como Hojas de estilo sintácticamente sorprendentes (ahora ya sabes cómo nombrar tus proyectos para que duren una eternidad, igual que Sass).

Sass es una extensión de CSS que agrega cierta sintaxis como: identado, reglas anidadas, mezclas, herencia y más.

👀 ¡Ojo!, Sass es un proyecto utilizado ampliamente que permite la creación de una sola hoja de estilos avanzada. También hay que mencionar que está en desuso, porque se ha preferido a los CSS modules en el desarrollo web moderno, lo que Next propone es usar Sass de forma modularizada con CSS modules 🤯. Tampoco olvides que Sass tiene dos sintaxis y dos extensiones de archivo (.scss y .sass)

Primero debemos instalar sass:

npm install --save-dev sass

Eso es todo. Ahora podemos crear un archivo Sass que al mismo tiempo es un archivo css module con algunas variables y usarlas directamente en nuestros componentes:

styles/sass-styles.module.scss

$primary-color: indigo;

:export {
  primaryColor: $primary-color;
}

Y ahora lo importamos y lo usamos en nuestro componente:

pages/_app.js

import styles from '../styles/sass-styles.module.scss'

export default function MyApp({ Component, pageProps }) {
  return (
    <section style={{color:styles.primaryColor}>
	 <h2>Hola Blissmo en morado</h2>
    </section>
  )
}

Parece innecesario, pero resulta muy potente emplear Sass en un app React si tienes un equipo que se dedica exclusivamente a los estilos.

Finalmente la número 5. CSS-In-JS

Este es un mundo en sí mismo, tenemos la posibilidad de usar herramientas que la comunidad ha creado con mucho ingenio, entre ellas podemos encontrar a:

• Styled JSX
• Styled Components
• Emotion
• Linaria
• Tailwind CSS + Emotion
• Styletron
• Cxs
• Aphrodite
• Fela
• Stitches

👀 ¡Ojo!, tener tantas herramientras entre las cueles escoger también nos habla de que los desarrolladores JS no quieren lidiar con CSS, perfieren no salir del archivo JS y hacer tanto el HTML como el CSS en el mismo archivo. Esto es evidente con el éxito de React que mezcla HTML+JS y también de lo popular de TailwindCSS que te evita la creación de archivos CSS para hacerlo todo en el mismo archivo .jsx

Puedes Instalar y utilizar cualquiera de las herramientas anteriores, pero Next.js provee soporte para la más popular: StyledComponents (styled-jsx), pero debes tener cuidado aquí, pues algunas de las opciones de estas librerías no están disponibles para el render del lado del servidor. Algo que seguramente quieres aprovechar cuando empleas Next.js. Así que no dejes de leer la documentación oficial.

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

¡Y ya está!, ¿Cuál de todos empleas tú?, cuéntame en mi Twitter

Abrazo. Bliss.

Enlaces relacionados

Styled-jsx docs

Vercel docs

Demo Next + Tailwind