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!

No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

15 Días
1 Hrs
19 Min
14 Seg
Curso de Next.js 14

Curso de Next.js 14

Enrique Devars

Enrique Devars

Arquitectura de un proyecto de Next.js

2/57
Recursos
Transcripción

Aportes 19

Preguntas 5

Ordenar por:

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

Mónica Pamela Arroyo Montiel

Mónica Pamela Arroyo Montiel

hace un año
note: No es necesario el flag '--ts' al crear el proyecto. Entre las preguntas que te hace, te pregunta si quieres usar typescript ;)
Diego Fernando Velesaca Orellana

Diego Fernando Velesaca Orellana

hace un año
Algo a tener en cuenta es que la version minima requerida de node es la 18.17.0
Javier Silva Avendaño

Javier Silva Avendaño

hace 10 meses
Me parece una falta de respeto que los profesores nunca pongan el nombre del tema para VSCode que ocupan 🤣
Juan Diaz

Juan Diaz

hace 10 meses

a mi me gusta mucho Tailwind. Q lastima q no lo usen

Xavier Flores

Xavier Flores

hace 9 meses
Resumen clase 2 - 25/02/2024 ```js # TOP Levels Folders Son usadas para organizar nuestra aplicacion y recuros estaticos: app App Router pages Pages Router public Static assets to be served src Optional application source folder # TOP LEVELS FILES Son usadas para configurar nuestra aplicacion, manejar dependencias, correr middleware, integrar herramientas de monitoreo y definir variables de entorno. next.config.js Configuration file for Next.js package.json Project dependencies and scripts instrumentation.ts OpenTelemetry and Instrumentation file middleware.ts Next.js request middleware .env Environment variables .env.local Local environment variables .env.production Production environment variables .env.development Development environment variables .eslintrc.json Configuration file for ESLint .gitignore Git files and folders to ignore next-env.d.ts TypeScript declaration file for Next.js tsconfig.json Configuration file for TypeScript jsconfig.json Configuration file for JavaScript # APP ROUTING CONVENTIONS Dentro del App router pueden existir estos archivos: layout Layout page Page loading Loading UI not-found Not found UI error Error UI global-error Global error UI route endpoint template Re-rendered layout default Parallel route fallback page - Pero adicionalmente ofrece otros features como: [x] Nested Routes [x] Dynamic Routes [x] Route Groups and Private Folders [x] Parallel and Intercepted Routes [x] Metadata File Conventions [x] Open Graph and Twitter Images [x] SEO ```Ref: \[Next.js Project Structure]\(<u>https://nextjs.org/docs/getting-started/project-structure</u>)
Diego Fernando Velesaca Orellana

Diego Fernando Velesaca Orellana

hace un año
Primer comentario 😅
yavallejo

yavallejo

hace un año
Estaba esperando este curso. nota: cuando usamos el npx create-next-app@latest no pasa nada si se nos olvida colocarle el flag --ts, ya que mas adelante nos lo preguntara 'Deseas usar TypeScript en este proyecto?' Éxitos para todos
Juan Sebastian Reyes Vasquez

Juan Sebastian Reyes Vasquez

hace un año
Puedes usar `npm run dev --turbo` . Con esto puedes usar turbo pack.
Christopher Andrés Guano Valencia

Christopher Andrés Guano Valencia

hace 5 meses
### **###🚀 App Router vs Pages Router** Next.js tiene dos enrutadores diferentes: App Router y Pages Router. **App Router** es un enrutador más nuevo que le permite utilizar las funciones más recientes de React, como Server Components. Pages Router es el enrutador Next.js original, que le permitió a crear aplicaciones React renderizadas en el servidor utilizando `getStaticProps` y `getServerSideProps` y continúa siendo compatible con aplicaciones Next.js más antiguas. . Ten esto presente porque hay mucha información sobre Pages Router (ya que estuvo varios años en funcionamiento). Puedes revisar la documentación de Next.js para que veas las diferencias <https://nextjs.org/docs>, hay menú desplegable que muestra “Using App router” o “Using Pages router”.
Javier Damiani

Javier Damiani

hace 8 meses
Qué tema de VSCode es ese??? :o
Sebastian Gutierrez

Sebastian Gutierrez

hace 8 meses
hay algo curioso, no se si solo es a mi, que del min 2.53 al min 3 no carga, toca adelantar hasta el min 3 para que continue y mientras escribo, pasa algo de que se pixela algunas zonas de la pagina
Juan Diaz

Juan Diaz

hace 10 meses

npx create-next-app@latest --ts

Guido Juliano Mazzuchini Ubaldi

Guido Juliano Mazzuchini Ubaldi

hace un año
Muy entusiasmado de realizar este curso! Que tengan todos un muy buen día
Facundo Pettersson

Facundo Pettersson

hace 24 días
El uso de `pnpm` en lugar de `npm` es una excelente recomendación, ya que `pnpm` gestiona las dependencias de manera más eficiente, lo que puede resultar en un mejor rendimiento y un menor uso de espacio en disco. Utiliza enlaces simbólicos para compartir las dependencias, lo que minimiza la duplicación. Esto es especialmente útil en proyectos grandes como los desarrollados en Next.js. Considera seguir esta recomendación para optimizar tu flujo de trabajo en el desarrollo de aplicaciones con Next.js.
Felipe López

Felipe López

hace 2 meses
Hola! Como podría actualizar la versión de Node Js por la última? ![](https://static.platzi.com/media/user_upload/image-bb91bfb6-73b2-4732-be81-b7b4b0bdad33.jpg) He intentado con los comandos: * sudo npm install -g n * sudo n stable Muchas gracias!!
Christopher Andrés Guano Valencia

Christopher Andrés Guano Valencia

hace 5 meses
🚀 App Router vs Pages Router Next.js tiene dos enrutadores diferentes: App Router y Pages Router. . App Router es un enrutador más nuevo que le permite utilizar las funciones más recientes de React, como Server Components. Pages Router es el enrutador Next.js original, que le permitió a crear aplicaciones React renderizadas en el servidor utilizando getStaticProps y getServerSideProps y continúa siendo compatible con aplicaciones Next.js más antiguas. . Ten esto presente porque hay mucha información sobre Pages Router (ya que estuvo varios años en funcionamiento). Puedes revisar la documentación de Next.js para que veas las diferencias <https://nextjs.org/docs>, hay menú desplegable que muestra “Using App router” o “Using Pages router”.
Christopher Andrés Guano Valencia

Christopher Andrés Guano Valencia

hace 5 meses
### **🚀 App Router vs Pages Router** Next.js tiene dos enrutadores diferentes: App Router y Pages Router. **App Router** es un enrutador más nuevo que le permite utilizar las funciones más recientes de React, como Server Components. Pages Router es el enrutador Next.js original, que le permitió a crear aplicaciones React renderizadas en el servidor utilizando `getStaticProps` y `getServerSideProps` y continúa siendo compatible con aplicaciones Next.js más antiguas. . Ten esto presente porque hay mucha información sobre Pages Router (ya que estuvo varios años en funcionamiento). Puedes revisar la documentación de Next.js para que veas las diferencias <https://nextjs.org/docs>, hay menú desplegable que muestra “Using App router” o “Using Pages router”.
Abilio Cubas

Abilio Cubas

hace 7 meses
minuto 3:04 A mi en el package.json no me sale nada de eso, sino otras cosas. Tengo que ir agregando manualmente? me saqué de onda.
Ricardo Garcia

Ricardo Garcia

hace un año
Actualmente tengo la version de node v20.10.0 y al genera el proyecto con el comando. En el archivo tsconfig.json me da el siguiente error. ![](https://static.platzi.com/media/user_upload/image-e6fb74ae-6083-4a31-9c46-1b283e36e709.jpg) Y por ende al importar me sale error. ![](https://static.platzi.com/media/user_upload/image-9a6df9e7-c9c7-4589-8d67-ea00edb80dc1.jpg) Me pueden ayudar con una solución, de antemano gracias.