Creando estilos dinámicos aplicando condicionales 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 11

Preguntas 3

Ordenar por:

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

Jose Luis Bedoya

hace 10 meses

me parece muy enrevesado hacerlo de esta forma, preferiría hacerlo con una ternaria

Jose Tellez

hace 9 meses

Interesante la libreria, pero me parece complicarlo un poco más. Me parece más simple e intuitivo con ternarios, puedes caer en malas practicas pero si mantienes la consistencia creo que se hace más simple

Mariangelica Useche

Profe Platzi

hace 9 meses

Hay varias ventajas de usar de `classnames` vs. simplemente usar ternarios: * Simplicidad y legibilidad * Manejo de condiciones (con la librería puedes manejar múltiples condiciones y no hacer el código muy enredado). * Evita errores humanos (la librería maneja los casos en que las clases sean `undefined` o `null`). Este es un ejemplo muy sencillo, pero me parece mucho más legible con classnames: ```jsx

{/* Con ternario sería: */}

```

Ange lJair Neri Huerta

hace 9 meses

mucha lógica y una libreria mas para hacer algo simple.

Gerardo Castillo

hace 10 meses

&__button
    background: transparent
    border: none
    cursor: pointer
    img
      border: 3px solid $color-primary
    &--border
      img
        border: 3px solid $main-contrast

Con border: 3px solid $color-primary podemos evitar el layout shift

Simón Flores

hace 6 meses

Hola! tengo un problema y no sé porqué rompe mi codigo: Tengo una imagen en la carpeta "public" y la llame "Tiendi.svg", hice una carpeta con el nombre "store" y el "\[...category]", hago el localhost:3000/store y la imagen funciona perfecta (está en un nav dicha imagen), ahora... cuando quiero hacer /store/telefono, me destruye la imagen. No aparece nada pero sí lo estilos. ¿Alguien sabe el porqué? porque como decia antes, tengo la imagen directamente en la carpeta public. Saludos!

Jhon_B

hace 9 meses

Tambien existe la libreria clsx para manejar estilos dinamicos. ```js import { clsx } from 'clsx'; // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' // Objects clsx({ foo:true, bar:false, baz:isTrue() }); //=> 'foo baz' ```<https://www.npmjs.com/package/clsx>

Fernando Peralta

hace 7 meses

prefiero clsx

FranLop84

hace 8 meses

NextJS recomienda el uso de la librería clsx para activar o desactivar clases \<button onClick={ handleClick } className={ clsx(styles.Description\_\_button, { \[styles.Description\_\_button\_\_border]: hasBorder, }) }>

Robert Garcia

hace 9 meses

Tengo una pregunta cual seria la diferencia entre usar esa librería de className a hacerlo así ? `const [tuClick, setTuClick] = useState(false)` `const handleClick = () => {console.log('Click') setTuClick(!tuClick)}` ``<button className={`${styles.hero__action} ${tuClick ? 'visible' : 'hidden'}`} onClick={handleClick}> Click On Console Click </button>``

Cristian Esquivel

hace 10 meses

Como me estaba danto un error al importar classNames ![](https://static.platzi.com/media/user_upload/image-2959c0a6-675e-4f7e-a135-1edc10933d3f.jpg) Preferí hacer la operación con una ternaria directamente dentro del className ![](https://static.platzi.com/media/user_upload/image-35eb1085-a5de-47b5-aca0-10db051c409e.jpg)