Uso de Sass en Next.js

Curso de Next.js 14

Conceptos básicos de Next.js 14

¿Qué es Next.js y por qué aprenderlo si quieres ser frontend senior?

Arquitectura de un proyecto de Next.js

Herramientas y stack utilizado en el curso

Cómo crear rutas en Next.js

Cómo crear Layout en Next.js

Cómo funciona la navegación en Next.js

Manejo de parámetros en rutas en Next.js

React Server Components en Next.js: notación "use Client"

Creación de arquitectura de landing page en Next.js

Quiz: Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

CSS Modules en Next.js 13

Uso de Sass en Next.js

Cómo utilizar estilos globales en Next.js

Cómo agregar archivos estáticos en Next.js

Manejo y optimización de imágenes con Next Image

Optimización del componente image en Next.js

Optimización de fuentes con Next.js

Creando estilos dinámicos aplicando condicionales en Next.js

Quiz: Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Creación de tienda de Shopify para un proyecto en Next.js

Manejo de variables de entorno en Next.js

Cómo obtener información de una API con Next.js

Manejo de estado de carga con el archivo loading.tsx

Route Grouping en Next.js

Manejo de errores en la UI con el archivo error.tsx

Quiz: Data Fetching en Next.js

Next.js Avanzado

Implementando páginas de Not Found y error global

Cómo impactan los React Server Components en un proyecto en Next.js

Cuándo utilizar layout o template en Next.js

Arquitectura profesional para data fetching en un proyecto en Next.js

Next.js para backend: manejando rutas con archivos Route Handlers

Proyecto: implementando la página de tienda

Patrones de data fetching en Next.js

Proyecto: filtrando categorías de productos

Data fetching de parámetros en el servidor y cliente

Proyecto: página de producto y arreglos en el sitio

Cómo funciona el Fetch y el Caché de Next.js

Revalidando cache con revalidateTag y revalidatePath en Next.js

Cómo hacer redirects en Next.js

Proyecto: HTML dinámico en la descripción del producto

Mejorando SEO de una página en Next.js

Quiz: Next.js Avanzado

Autenticación y autorización

Manejando autenticación y autorización con Storefront APÏ de Shopify

Server Actions en Next.js

Proyecto: proceso de Sign-Up con GraphQL

Manejo de cookies para colocar un token de acceso de un proyecto en Next.js

Cómo implementar un flujo de login en un proyecto en Next.js

Validando token de acceso de usuario en un proyecto en Next.js

Proyecto: implementando el carrito de compras

Manejo de estado global con zustand en Next.js

Proyecto: agregando items al carrito de compras

Cómo integrar el checkout de Shopify a un proyecto en Next.js

Implementar middleware en proyecto en Next.js para protección de rutas

Inteligencia Artificial

Creando componente de chatbot de ventas con la SDK IA de Vercel

Implementación de un bot de ventas en una app Next.js

Performance

Optimización de carga con parallel routing en Next.js

Análisis de bundle para Next.js 14

Quiz: Performance

Frontend Ops

Edge runtime

Despliegue de un proyecto Next.js en Vercel

Mejores prácticas en arquitecturas empresariales

Quiz: Frontend Ops

Next.js es parte de tu nuevo stack

¡Has creado un proyecto en Next.js!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 19

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Juan Diaz

hace 10 meses

A mi me esta generando un error. Una vez modifique el next.config.mjs, ya no corre la app. Copie el codigo del repo pero no me sirvio.

Lo solucione con este codigo:

import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

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

// Get the directory name of the current module
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const nextConfig = {
  sassOptions: {
    includePaths: [join(__dirname, 'src/sass')],
    prependData: `@import "main.sass"`,
  },
};

export default nextConfig;

Jhair Alejandro Cruz Palacios

hace 9 meses

Tengo una nota que les podría servir, en las nuevas versiones de next.js ya no es necesario configurar las rutas para que puedan usar sass, ya que el next.config.js se cambió a next.config.mjs, una vez que hayan instalado `sass`, puedes importar archivos `.scss` o `.sass` directamente en tus componentes de React. Next.js se encargará de la compilación automáticamente.

Juan David Vanegas Roldán

hace 10 meses

No creen que hubiera sido mejor con Tailwind ? Me parece que acelera las cosas aún más. Pero supongo que puede ser un tris más complejo y por eso eligieron Saas.

Xavier Flores

hace 9 meses

CLASE10 03/03/2024 CSS MODULES

Next soporta diferentes maneras de dar estilos a una aplicación:

Global CSS: de Uso simple y familiar con el CSS tradicional, puede llevar problemas conforme la aplicación crezca y es llamado desde cualquier parte dentro del directorio app (import ‘./global.css’)
CSS modules: Crea localmente un alcance de CSS evitando conflictos con los nombres de las clases del resto de componentes.
Tailwind CSS: ❤️
Sass: Preprocesador CSS, extiende el CSS.
CSS-in-JS: CSS directo a la venas del componente.

CSS modules

Puede ser importado desde cualquier archivo dentro del app directory.
Solo se habilitan con la extension module.css
En produccion todos los CSS module son minificados y spliteados en archivos .css
Las hojas de estilo publicadas por paquetes externos pueden importarse en cualquier parte del directorio de la aplicación.

Sass

Ya viene pre-integrado con Next, hay que instalar sus paquetes y usar sus extensiones .scss y .sass
Se puede usar componentes Sass vía Css modules con la extension .module.sass
Tenemos que configurar el archivo next.config.mjs
** AUN NO SE ENCUENTRA LA FUNCIONALIDAD .module.sass con turbopack, eviten turbopack para que no salgan errores**

import { dirname, join } from 'path';
/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    includePaths: [join(dirname('./'), 'src/sass')],
    prependData: `@import "main.sass"`,
  },
};
export default nextConfig;

pase horas con ese error de sass

FranLop84

hace 9 meses

Cuando creamos el proyecto, el archivo de configuración de next tiene la extensión .msj `next.config.mjs` Para que funcione todo como en el video debe tener la extensión .js `next.config.js`

Harold Gongora Sinisterra

hace 5 meses

Hola mis compañeros, a mi me estaba generando un error: "error era const path = require('path') ^ ReferenceError: require is not defined in ES module scope, you can use import instead". la forme que lo solucioné: reemplacé: next.config.mjs por next.config.js y export default nextConfig; por module.export = nextConfig

Carlos Alberto Henao Mesa

hace 10 meses

Cordial saludo... me sale este error y no encuentro como solucionarlo ![](https://static.platzi.com/media/user_upload/image-c4ba4ef1-0605-43db-97c6-86557f31ba66.jpg)

Luis Herrera

hace 3 meses

![](https://static.platzi.com/media/user_upload/image-412f1d7e-7e47-4321-989a-fec4314aa773.jpg) Ya saben que para personalizar colores se hace desde el tailwind.config.ts, no olvidar agregar const colors

Matías Daniel Cravero

hace 9 meses

Demasiada confusa la configuraciónd de sass :/

Vicente Daniel Zurita Salas

hace 5 meses

Si tuvieron problemas con next.config al agregar el require Deben cambiar la extensión del archivo de .. "mjs" a ".js" Y en la parte de abajo cambiar ... ```js module.exports = nextConfig; // export default nextConfig; ```

Brayan Lopez

hace 5 meses

Les comento por si a alguno le haya pasado. Resulta que sass tiene dos sintaxis, una identada y otra sin identar. Eso se sabe con la extensión del archivo scss y sass. Tengan cuidado con las extensiones de los archivos porque les puede generar dolores de cabeza.

Piero Anthony Liberato Susanibar

hace un año

![](https://static.platzi.com/media/user_upload/adsad-0222fe2a-16cd-4165-a5c6-d53ad3217f7e.jpg) Asi se ve sas como lo corrijo para que lo detecte como un lenguaje el sass

Alan Damian Fernandez

hace 8 meses

npm install --save-dev sass

Ange lJair Neri Huerta

hace 9 meses

Update. Despues de darle una hora buscando que no funcionaba, me hice un branch secundario y volvi a realizar el setup. Magicamente funciono, solo tengan cuidado que los imports y los nombres de los archivos sean correctos. La configuracion "prependData" es indispensable, la quitan y no sirve, la busque en doc de nextjs pero no esta mensionada curioso... Todo funcione debe quedar asi. ```js // main.sass @import "./variables.sass" ```@import "./variables.sass" ```js // next.config.js const path = require('path'); const nextConfig = { sassOptions: { includePaths: [path.join(__dirname, 'src/sass')], prependData: `@import "main.sass"`, },}; ```De cualquier forma prefiero Tailwind, mas sencillo y con las extensiones no hay que andar revisando los archivos uno a uno para ver los valores disponibles en las variables o tokens del Design System, Entre muchsa otras de sus ventajas y helpers.

Carlos Andres Bohorquez Duran

hace un mes

Que necesidad meter sass en un curos de next.js, ahi es donde a veces uno se pierde en estos cursos, temas que no viene al caso y que empiezan a salirle uno errores , y quien dicta la clase siemplemente psa de largo y depsues nos toca rebuscra como arreglar.

Juan Felipe Gutiérrez

hace 7 meses

una de las mejores herramientas para animaciones en next.js 14 es framer motion, y con esta y una pequeña configuracion inicial puedes ahorrarte hacer condicionales en next.js

Ange lJair Neri Huerta

hace 9 meses

para meter un par de globals con sass, lo hago con vanila css y si avanza el sistema lo hago con tailwind ya esta mejor integrado y es mas flexible.

Ange lJair Neri Huerta

hace 9 meses

bueno surrender con sass, la opcion que quieren en next config no hace nada. Demasiado enredo para usar nesting. Todo funciona mejor con los globals de css de next o empleando tailwind.

Cristian Contreras

hace un año

Les dejo el curso de Sass: Curso de Fundamentos de Sass: Crea tu Primera Landing Page