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!

No tienes acceso a esta clase

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

Curso de Next.js 14

Curso de Next.js 14

Enrique Devars

Enrique Devars

¡Has creado un proyecto en Next.js!

57/57
Recursos

Aportes 21

Preguntas 1

Ordenar por:

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

buen curso, muchas gracias profeee :D

Gracias por este excelente curso. Es una buen punto de partida para crear otros proyectos…

Además de Vercel, y para mi sorpresa, logré hacer deploy en Cloudflare Pages cambiando el runtime a ‘edge’ en varias rutas del proyecto.

Qué locura si al final podemos hacer deploy de proyectos completamente funcionales de nextjs directamente en workers de cloudflare aprovechando la maravilla de cdn que tiene cloudflare (digo directamente porque sé que al final el mismo Vercel usa la infraestructura de cloudflare). Interesante!

Vecel: https://nextjs14-store.vercel.app/
Cloudflare: https://nextjs14-store.pages.dev/
Repo: https://github.com/gerrcass/nextjs14-store

Un largo camino, pero este curso fue increíble!
Excelente Curso!
Excelente curso, buen profesor ;)
Que buen curso :)
Me gustó el curso aunque la integración con shopify y graphql me pareció de más.
Tqm next.js, tqm Enrique
Muchisimas gracias por este gran curso. Enserio espero que saquen aun mas cursos, porque la verdad que los otro cursos de Next.js ya no los recomendaria tomar. Algunos usan APIs viejas que ya no funcionan, como el de jamstack, al igual que la manera de trabajar en la version 14 dista mucho de la version 9 o 10 que se usa en los anteriores cursos. Ojala se nos vengan nuevos cursos sobre next.js que tambien enseñen a crear paginas estaticas, entre otras funcionalidades que Next.js nos trae.
Excelente curso, muchas gracias profe!

saludos!

Un proyecto de gran envergadura al final, pero definitivamente vale la pena.
Next.js 14 realmente cambió todo, fue como volver a aprenderlo de nuevo y fue genial 😎
Hola, de un dia para el otro, todos los endpoints dejaron de funcionar y me tiran un error 403 (forbidden) con el siguiente mensaje {  "errors": "\[API] API Access has been disabled"}. No habia hecho ningún cambio y dejo de funcionar repentinamente. Alguno le paso? Saben como solucionarlo? Repo: <https://github.com/tomy08/EclectiStore>
`Muchas gracias!.`
Excelente curso!!! disfruté mucho las clases, fueron claras. Más cursos así porfavor!
muy buen curso, bien trabajado
Muy buen curso, gracias
Next js es el mejor
Excelente curso de Next js

Me encantaría un proyecto o curso, que se viera nextjs o react, pero orientado a microservicio. Así cómo su puesta en línea.