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
5 Hrs
24 Min
15 Seg
Curso de Next.js 14

Curso de Next.js 14

Enrique Devars

Enrique Devars

Revalidando cache con revalidateTag y revalidatePath en Next.js

35/57
Resources

Contributions 2

Questions 1

Sort by:

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

Jose Tellez

Jose Tellez

a year ago
Lo de revalidar es absolutamente genial. . Es la forma de hacer dinamicas paginas estaticas aprovechandonos de las bondades de tener cache en todo, tal como lo hace next. , Porque la idea es entonces revalidar por tag (que es m谩s granular, es decir, m谩s preciso al fetch especifico) o por path (que revalida toda la pagina) cuando haya un evento que cambie la informaci贸n que se muestra. . Ejemplo: Digamos que tienes un formulario que crea un nuevo comentario en un blog. . Cuando envias el form, es la se帽al para guardar ese comentario en la base de datos, revalidar el fetch que trae los comentarios y mostrar informaci贸n actualizada.
Jorge Morales

Jorge Morales

10 months ago
En Next.js, los mecanismos revalidateTag y revalidatePath son herramientas 煤tiles para invalidar la cach茅 de datos y mantener la informaci贸n actualizada en tu aplicaci贸n. **<u>revalidateTag:</u>** Se utiliza para invalidar la cach茅 de datos asociada a un etiqueta espec铆fica. Es ideal para escenarios donde compartes datos entre m煤ltiples rutas o componentes, y deseas actualizarlos de manera centralizada. Ejemplo: Imaginemos una tienda online donde el cat谩logo de productos se comparte en diferentes p谩ginas. Al actualizar el cat谩logo, puedes usar revalidateTag para invalidar la cach茅 de todas las p谩ginas que lo utilizan. **<u>revalidatePath</u>**: Se enfoca en invalidar la cach茅 de datos para una ruta espec铆fica. Es 煤til cuando deseas actualizar los datos de una ruta individual, sin afectar otras partes de la aplicaci贸n. Ejemplo: En un blog, al publicar un nuevo art铆culo, puedes usar revalidatePath para invalidar la cach茅 de la p谩gina del art铆culo reci茅n publicado.