CSS Modules en Next.js 13

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 12

Preguntas 2

Ordenar por:

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

DANIEL STEVEN RODRIGUEZ VERANO

hace 9 meses

dale al corazón si eres team TailwindCSS 💙

Cristian Contreras

hace un año

Lo siento, estos dias ando enamorado de TailwindCSS 😎

Guido Juliano Mazzuchini Ubaldi

hace un año

Excelente, dejo mi aporte sobre **BEM CSS**. **BEM CSS es una metodología de nomenclatura para definir las clases en los nodos HTML** del documento. Es decir, es **una manera de nombrar las clases de los nodos de tu HTML para posteriormente atacarlos con CSS de una manera fácil, sencilla y clara**. El objetivo de BEM es dar mucha más **transparencia y claridad en tu estructura HTML y CSS**. BEM te dice cómo se relacionan las clases entre sí, lo que es particularmente útil en secciones complejas del documento. Todas las clases del proyecto pueden encajar con esta filosofía. **BEM** son tres siglas. * **B** de **bloque**. * **E** de **elemento**. * **M** de **modificador**. Un **bloque** es **una sección independiente que tiene significado propio por sí solo**. Contiene todos los nodos HTML de una estructura a la que te estés refiriendo. Un **elemento** son **porciones más pequeñas internas a un bloque**. Se usa para ir dividiendo el bloque en segmentos más pequeños. Un **modificador** sirve para **modificar algunas propiedades de un bloque o elemento**.

Juan Diaz

hace 10 meses

Puede que CSS modules sea mejor que CSS pero aun asi siento que sigue siendo mucho trabajo.

Soy flojo. Prefiero Tailwind CSS.

IT DOES THE JOB!

Mariangelica Useche

Profe Platzi

hace un año

Si te preguntas para qué sirve el hash que se agrega en las clases, es para que no haya colisión de estilos. Aun si tenemos dos componentes con clase "Hero", los hashes serán diferentes, por lo que no habrá colisión. Eso ahorra un par de dolores de cabeza ;)

Juan Felipe Gutiérrez

hace 7 meses

hay algunas alternativas a hacer animaciones con sass. Esta se llama Framer motion, y es clave para dar un toque sutil y creativo a tu pagina web

Johann Camilo Belosareos Colmenares

hace un año

**\*\* CSS MODULES \*\*** Sirven para aislar los estilos de componentes y que no colisionen nomenclaruta: \[NombreComponente].module.css NextJS genera un HASH CODE con scope local y único por cada clase para q no colisionen convencion: ecribir nombre de clases en CamelCase usar BEM (Block Element Modifier)

Sergio Mercado Salazar

hace un año

El segundo consejo sobre el uso de css modules contradice al primero, ya que la convención de la metodología BEM no es en camelCase, si no algo como: .card\_\_item

Jesus Heriberto Lara Juarez

hace 8 meses

Yo tengo la duda de cuando utilizo clases condicionales como se tendria que hacer la implementacion ya que no he podido utilizar modules con clases que dependan de un estado por ejemplo si tengo us state que se llame isActive className={isActive?styles.prop: styles.prop2}

Hernán Arica

hace 8 meses

Les dejo una extensión de vscode para autocompletado de css modules: [CSS Modules - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules)

Juan David Vanegas Roldán

hace un año

También puede ser más sencillo colocar los estilos directamente en el componente resumidos con Tailwind, esta es la práctica profesional. Es importante que instalen la extensión de Tailwind, pero no es necesario tomar un curso de esto. Si ya sabes CSS, Tailwind es muy intuitivo y te puedes ir ayudando de chatgpt o google.

Oscar Guevara

hace un año

Convenciones de nomenclatura: **BEM** simplificado Nombre del componente: componentes estándar **(B)** ComponentName-elementName - Elemento del componente **(E)** ComponentName--modifierName – Modificador del componente **(M)** u-className: clases básicas/de utilidad globales img-className: clases de imágenes globales animate-className – Clases de animación globales Tenga en cuenta el estilo del nombre del componente **UpperCamelCase** para indicar que es el elemento maestro; esto denota que es el límite del componente. Los nombres de elementos y modificadores son nombre de elemento y nombre de modificador, respectivamente. No utilice un guión (-) para separar los nombres de los componentes, ya que estos indican el comienzo de un elemento/nombre de elemento.