Curso de Next.js 14
Curso de Next.js 14

Conceptos b谩sicos de Next.js 14

1

驴Qu茅 es Next.js y por qu茅 aprenderlo si quieres ser frontend senior?

2

Arquitectura de un proyecto de Next.js

3

Herramientas y stack utilizado en el curso

4

C贸mo crear rutas en Next.js

5

C贸mo crear Layout en Next.js

6

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

7

Manejo de par谩metros en rutas en Next.js

8

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

9

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

10

CSS Modules en Next.js 13

11

Uso de Sass en Next.js

12

C贸mo utilizar estilos globales en Next.js

13

C贸mo agregar archivos est谩ticos en Next.js

14

Manejo y optimizaci贸n de im谩genes con Next Image

15

Optimizaci贸n del componente image en Next.js

16

Optimizaci贸n de fuentes con Next.js

17

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

18

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

19

Manejo de variables de entorno en Next.js

20

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

21

Manejo de estado de carga con el archivo loading.tsx

22

Route Grouping en Next.js

23

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

Quiz: Data Fetching en Next.js

Next.js Avanzado

24

Implementando p谩ginas de Not Found y error global

25

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

26

Cu谩ndo utilizar layout o template en Next.js

27

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

28

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

29

Proyecto: implementando la p谩gina de tienda

30

Patrones de data fetching en Next.js

31

Proyecto: filtrando categor铆as de productos

32

Data fetching de par谩metros en el servidor y cliente

33

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

34

C贸mo funciona el Fetch y el Cach茅 de Next.js

35

Revalidando cache con revalidateTag y revalidatePath en Next.js

36

C贸mo hacer redirects en Next.js

37

Proyecto: HTML din谩mico en la descripci贸n del producto

38

Mejorando SEO de una p谩gina en Next.js

Quiz: Next.js Avanzado

Autenticaci贸n y autorizaci贸n

39

Manejando autenticaci贸n y autorizaci贸n con Storefront AP脧 de Shopify

40

Server Actions en Next.js

41

Proyecto: proceso de Sign-Up con GraphQL

42

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

43

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

44

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

45

Proyecto: implementando el carrito de compras

46

Manejo de estado global con zustand en Next.js

47

Proyecto: agregando items al carrito de compras

48

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

49

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

Inteligencia Artificial

50

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

51

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

Performance

52

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

53

An谩lisis de bundle para Next.js 14

Quiz: Performance

Frontend Ops

54

Edge runtime

55

Despliegue de un proyecto Next.js en Vercel

56

Mejores pr谩cticas en arquitecturas empresariales

Quiz: Frontend Ops

Next.js es parte de tu nuevo stack

57

隆Has creado un proyecto en Next.js!

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Aprovecha el precio especial y haz tu profesi贸n a prueba de IA

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

0 D铆as
3 Hrs
46 Min
31 Seg
Curso de Next.js 14

Curso de Next.js 14

Enrique Devars

Enrique Devars

CSS Modules en Next.js 13

10/57
Resources

Contributions 11

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

DANIEL STEVEN RODRIGUEZ VERANO

DANIEL STEVEN RODRIGUEZ VERANO

a year ago
dale al coraz贸n si eres team TailwindCSS 馃挋
Cristian Contreras

Cristian Contreras

a year ago

Lo siento, estos dias ando enamorado de TailwindCSS 馃槑

Guido Juliano Mazzuchini Ubaldi

Guido Juliano Mazzuchini Ubaldi

a year ago
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

Juan Diaz

a year ago

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!

Johann Camilo Belosareos Colmenares

Johann Camilo Belosareos Colmenares

a year ago
**\*\* 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)
Juan Felipe Guti茅rrez

Juan Felipe Guti茅rrez

a year ago
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
Mariangelica Useche

Mariangelica Useche

Profe Platzi

a year ago
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 David Vanegas Rold谩n

Juan David Vanegas Rold谩n

a year ago

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.

Sergio Mercado Salazar

Sergio Mercado Salazar

a year ago
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

Jesus Heriberto Lara Juarez

a year ago
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

Hern谩n Arica

a year ago
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)