No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

Explora las soluciones de CSS en NextJS y su flexibilidad

15/27
Recursos

Aportes 39

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>

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;

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 鈥楤uilt-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!

隆Encontr茅 esto de la documentaci贸n! Next.js ofrece diversas formas de estilizar tu aplicaci贸n, entre ellas: **Global CSS:** Sencillo y familiar para quienes conocen CSS tradicional, pero puede resultar en paquetes CSS m谩s grandes y dificultad en la gesti贸n a medida que la aplicaci贸n crece. **CSS Modules:** Crea clases CSS localmente para evitar conflictos de nombres y mejorar la mantenibilidad. **Tailwind CSS:** Un marco CSS de utilidad que permite dise帽ar personalizaciones r谩pidas mediante la composici贸n de clases de utilidad. **Sass:** Un popular preprocesador CSS que ampl铆a CSS con funciones como variables, reglas anidadas y mixins. **CSS-in-JS:** Incrusta CSS directamente en tus componentes JavaScript, permitiendo un estilo din谩mico y con alcance limitado.

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:

{
鈥渇iles.associations鈥: {
"*.css": 鈥渢ailwindcss鈥
}
}

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鈥欌engo 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 ?