Explora las soluciones de CSS en NextJS y su flexibilidad

Para los que usamos SCSS o SASS

1. Debemos instalar las dependencias @zeit/next-sass node-sass
2. Crear un archivo con el nombre next.config.js en el root del proyecto
3. Pegar dentro del archivo next.config.js* el siguiente código:

	const withSass = require('@zeit/next-sass')
	module.exports = withSass({
		cssModules: true
	})

Esto funciona para estilos globales y modulares.

Adicional a esto, si quieren importar fuentes locales a su proyecto:

1. Debemos instalar la dependencia npm install --save nextjs-fonts
2. Dentro del archivo next.config.js escribir el siguiente código

const withSass = require('@zeit/next-sass');
const withFonts = require('nextjs-fonts');

module.exports = withSass(withFonts({
  webpack(config, options) {
   return config;
  },
}));

Esto implementará Sass y fuentes locales.

CSS en JS ayuda mucho con la especificidad de CSS. Baja la especificidad y con ello aumenta la escalabilidad de tu proyecto. Si no saben mucho de especificidad les recomiendo par de links:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://dev.to/emmabostian/css-specificity-1kca

Y el ganador es…
Obviamente tailwindcss ❤️

Yo lo que he usado es styled components con el paquete @emotion, esto lo he usado en create-react-app, Gatsby y NextJS, lamentablemente cambia un poco la manera de utilizar @emotion en NextJS sin embargo no es nada del otro mundo y de hecho lo prefiero pero por mucho a CSS-in-JS.

Para los que les gusta usar Tailwind para los estilos. Aca les dejo un artículo donde explican como configurarlo con nextjs.

👁️👄👁️ Estilos en Next.js

CSS Modules.- Estaban bastante populares antes de la llegada de CSS-in-JS

CSS-in-JS.- Es poner estilos CSS dentro de nuestro código JS

Next.js no nos ofrece una recomendación en particular para los estilos. Pero nos dan tres formas de dar estilos sin cambiar nada en su configuración.

Built-in CSS Next.js

1.- Global CSS (.css)

Todos nuestros estilos se encontraran en un solo lugar para ello debemos hacer lo siguiente

Crear un archivo CSS en la raíz de nuestro proyecto

.container {
  background-color: salmon;
}

/* agregarlo a la app */
/* utilizar la prop  */

importar el archivo en _app.js

...
import '../style.css'

function MyApp({ Component, pageProps }: AppProps) {
  return (...)
}

export default MyApp

usar la clase

const Layout: React.FC = ({ children }) => {
  return (
    <div className="container">...</div>
  )
}

export default Layout

2.- Module CSS (.module.css)

Usa CSS modules para usarlo debemos crear un archivo CSS el cual debe tener la siguiente nomenclatura

[nombre].module.css

Y para usarlo debemos importarlo como si fuese un archivo JS

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

const Layout: React.FC = ({ children }) => {
  return (
    <div className={styles.container}>...</div>
  )
}

export default Layout

la ventaja es que al momento de aplicarlo genera una clase única con un hash

3.- CSS-in-JS Styled JSX (Next.js - Vercel)

Esta es la forma de crear por defect en Next.js CSS-in-JS la cual se usa poniendo la etiqueta <style> dentro de nuestro componente, marcando la propiedad de JSX y en su contenido agregando un template literal

Ejemplo

const Layout: React.FC = ({ children }) => {
  return (
    <div>
			...
      <footer className="container">this is the footer</footer>
      <style jsx>{`
        .container {
          background: salmon;
        }
      `}</style>
    </div>
  )
}

Sus ventajas es que el alcance de los estilos solo afectan al componente en si. ademas que genera clases con un hash para no colisionar estilos.

RESUMEN: Se tienen tres formas de usar estilos median estilos globales, módulos y CSS-in-JS. Cada uno tiene ventajas y desventajas.

Quizá style jsx es muy similar a la etiqueta style de un componente de Vue.js

Si desean ver su código al estilo de css le adjunto este formateador de styles que esta disponible en extensiones de vscode:
vscode-styled-jsx

Les comparto como pueden usar SASS con Next.js en la actualidad:
1- Instalar sass:

npm install sass -D

2- Agregar el archivo next.config.js donde incluirán la siguiente configuración para que Next sea capaz de saber donde esta el main.scss:

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

3- Crea la carpeta o directorio styles y dentro el main.scss. Luego crea el alias de la carpeta en el archivo jsconfig.js :

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@styles/*": ["styles/*"]
    }
  }
}

4- Importar el main.scss dentro de _app.js de la siguiente manera :

import '@styles/styles.scss'

5- A partir de aquí solo queda comenzar a usar Sass con la estrategía que desees por ejemplo la que uso yo es la siguiente:

• Dentro de la carpeta de mi componente creo un archivo _myComponente.scss y coloco los estilos de ese componente ahí.
• Luego traigo ese archivo a mi main.scss usando @use :

@use './global';
@use '../components/MyComponent/myComponent';

Nota: a medida estés escribiendo la ruta Sass reconoce automáticamente el archivo y le quita el guion bajo y la extensión.

• Este sería un ejemplo de la estructura de carpetas que seguiría para mantener organizado el proyecto. Notar que no se hace import del estilo dentro del componente pero si es buena idea mantener esos estilo en la misma carpeta del componente para encontrarlos más rápido. Y además ya que utilizamos @use, si quereos usar por ejemplo el archivo: _variables.scss es necesario importarlo en cada modulo de sass donde lo usemos.
  Nota: Para usar las fuentes, los mixins y las funciones sin tener que importarlos a todos cada vez en cada componente los incluyo(importo) dentro del archivo variables y así solo necesito usar _variables.scss. Se hace con @forward:

//Archivo _variables.scss
@forward './mixins';

$main-color: #ff4500;
$font-color: #333333;
$white-color: #f0f0f0;

$main-font: 'Pacifico', sans-serif;

Soporte para Sass, Less y Stylus

https://nextjs.org/docs/basic-features/built-in-css-support#sass-support

En llo personal recomiendo, css global para normalizar el css en general, y css.module para disenos especificos a cada componente

Si ha alguien le gusta Tailwind (Mi favorito ❤️) Aqui les dejo la documentacion para integrarlo con nextJS

https://tailwindcss.com/docs/guides/nextjs

Styled-components. Recomendado.

comparto una documentación que me sirvió para usar preprocesadores y sus funcionalidades: espero les sirva a ustedes:
how-to-use-sass-with-css-modules-in-next-js

Honestamente, preferiria trabajar con syled-components en vez de StyleJSX. Pero es porque no me gusta meter tanto codigo dentro del render. Esto es algo que nunca me gusto de React

Parece un tema súper amplio por lo que vi en la docu.
Allí hay un link que lo ejemplifica bastante y me pareció interesante compartir.
https://github.com/vercel/styled-jsx

Para los que quieren trabajar con sass en 2022:

npm i sass --save-dev

Importan el modulo global que gestiona todos sus archivos sass en _app si queremos pasar por props las clases de sass o directamente en el componente que vayamos a estilar

import mainStyles from '@stytes/main.module.scss'

Y le importamos de la siguiente forma segun sea la necesidad de lo que necesitemos estilar:

<section className={mainStyles['main-container']}></section>

Teniendo en cuenta que en sass tengo una clase llamada .main-container {}

Tambien podriamos pasar estos estilos por props o mejor aún utilizarlo en el react context.

Explora las soluciones de CSS en NextJS y su flexibilidad

NextJS soporta CSS por defecto con ‘Built-in-CSS’.

1. Global CSS (.css) es el típico import './styles.css
2. Module CSS (.module.css) es import styles from './layout.module.css'
3. CSS-in-JS Stlyed JSX (NexstJS)

Module CSS:

import React from 'react'
import Navbar from '@components/Navbar/Navbar'
import styles from './layout.module.css'

const Layout: React.FC = ({ children }) => {
  return (
    <div className={styles.container}> {/*Especificamos la clase que queremos */}
      <Navbar />
      {children}
      <footer>This is the footer</footer>
    </div>
  )
}

export default Layout

CSS-in-JS Stlyed JSX:

import React from 'react'
import Navbar from '@components/Navbar/Navbar'

const Layout: React.FC = ({ children }) => {
  return (
    <div>
      <Navbar />
      {children}
      <footer className="container">This is the footer</footer>

      <style jsx>{`
        .container {
          background-color: #d600d6;
        }
      `}</style>
    </div>
  )
}

export default Layout

Me gusta más usar CSS Modules

wow! que impresionante el trbajo que se le puede dar a los estilos en NExt!

siempre me gusto es <style scoped> de vue me parecia super comodo. cuando empece a usar react, me chocó un poco y me parecia bastante incomodo lo de ``module.css`.

ahora con el css in JSX es un golazo de media cancha!

muchas gracias!

Bueno queria utilizar SASS asi que configure de la siguiente manera siguiendo lo que dice la documentacion

npm install --save-dev sass

Luego deje el archivo de configuracion next.config.js

/** @type {import('next').NextConfig} */

const path = require('path')

const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

module.exports = nextConfig

defini un archivo global.scss en la raiz igual que en el video

.container{
    background-color: salmon;
}

y por ultimo hice la importacion en el _app.tsx

import 'styles/globals.scss'

CSS en Next

Next.js admite diferentes formas de dar estilo a tu aplicación, entre las que se incluyen:
<br>

• CSS global: Simple de usar y familiar para aquellos experimentados con CSS tradicional, pero puede conducir a paquetes CSS más grandes y dificultad para gestionar los estilos a medida que crece la aplicación.
• Módulos CSS: Crea clases CSS de ámbito local para evitar conflictos de nombres y mejorar la capacidad de mantenimiento.
• Tailwind CSS: Un marco de trabajo CSS que permite diseños personalizados rápidos mediante la composición de clases de utilidad.
• Sass: Un popular preprocesador de CSS que amplía CSS con características como variables, reglas anidadas y mixins.
• CSS-in-JS: incrusta CSS directamente en los componentes de JavaScript, lo que permite un estilo dinámico y delimitado.

De todos los estilos de css que podemos ocupar, css jsx se me hizo muy feo, pienso que ensucia la legibilidad de nuestro código.

A alguien más le pasa que cuando teclea o clickea el profe, parece como ASMR?

Para quienes instalen TailwindCss, si al abrir /styles/global.css ven en vscode que les marca una advertencia en ‘@tailwind’:

Unknown at rule @tailwindcss(unknownAtRules)

La mejor solución que he conseguido es crear un archivo en la raíz del proyecto .vscode/settings.json y colocar el siguiente código:

{
“files.associations”: {
"*.css": “tailwindcss”
}
}

Saludos!

No le vi mucha gracia al built-in style de Next; es como una versión moderna de la retro style de html. En este caso, la duda con la que me quedo es, ¿traería algún beneficio por encima de SASS, de Module, ó incluso Styled.Components?

Dejo este articulo donde se explica como poder trabajar estilos globales con CSS en JS
https://nextjs.org/blog/styling-next-with-styled-jsx#adding-global-styles

Si les sale el error:
Module not found:

Can't resolve '../styles.css' in '/Users/miguelhernandez/Proyectos/cursos/NextJS/platzi-nextjs/pages'`

Recuerden que cuando se modifica _app.tsx o _document.tsx, debemos de reiniciar el servidor para que tome en cuenta estos cambios.

NextJS recomienda esta configuración para quienes usamos PostCSS, aunque si usas Tailwind, este absorbe la incertidumbre:

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // No transformations in development
        ],
}

Más en este link: https://nextjs.org/docs/advanced-features/customizing-postcss-config

Me gusta mas la forma de definir los estilos de React Native

Algo super genial de trabajar con style-jsx es que puedes pasar variables al css, con lo que puedes modificar estilos muy de manera dinamica (por ejemplo, al pasar de modo claro / oscuro)

const Layout:React.FC = ({ children }) => {
    const color = 'salmon';
    return (
        <div className="container">
            <Navbar/>
            {children}
            <Footer/>

            <style jsx>{`
                .container{
                    background: ${color}
                }
            `}</style>
        </div>
    )
};

export default Layout;

Para los que desean usar styled-components, este link me sirvio mucho: ```
https://dev.to/aprietof/nextjs--styled-components-the-really-simple-guide----101c

Me encanta CSS Modules, das estilos sin preocuparte por estropear algo, además los nombres de las clases son mucho más cortos (Nada que ver con BEM), en lo único que creo que toca tener cuidado, es en no repetir código, mejorar el uso de :global.

¿y referente al rendimiento existe alguna diferencia?

si tengo un archivo scss por componente y en cada componente traigo la pagina de estilos como ‘…/styles/navbar.scss’…tengo que ubicar mis archivos en una parte diferente? instalar algo mas? aun no me funciona 😦

Recuerden volver a iniciar con yarn dev para poder ver los cambios de los styles

¿Y si quiero usar tailwind-css junto con style-jsx ?