- 1

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados
01:38 - 2

Creación de Proyectos Next.js con TypeScript y App Router
10:22 - 3

Creación de Tienda Online con NextGIS y Shopify
06:42 - 4

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico
08:26 - 5

Implementación de Layouts en Next.js: Globales y Locales
06:58 - 6

Navegación Optimizada con Next.js Usando el Componente Link
04:46 - 7

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica
08:24 - 8

Uso de React Server Components en Next.js: Cliente vs Servidor
09:23 - 9

Arquitectura de Componentes para Landing Page en Next.js
09:13 Prueba tus conocimientos de los conceptos de Next.js
Arquitectura de Proyectos Next.js para Entornos Empresariales
Clase 56 de 57 • Curso de Next.js 14
Contenido del curso
- 10

Implementación de CSS Modules en Next.js para Estilizar Componentes
06:46 - 11

Instalación y Configuración de Sass en Next.js
08:39 - 12

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web
04:41 - 13

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos
04:10 - 14

Optimización de Imágenes con Next.js: Uso de Next.Image
05:48 - 15

Optimización y Responsividad con NextImage en Next.js
09:33 - 16

Optimización de Fuentes de Google en Next.js con Roboto
04:39 - 17

Estilos Dinámicos en React con Classnames y useState
08:39 Confirma que ya sabes manejar estilos y estáticos en Next.js
- 18

Creación de Tienda en Shopify para Desarrollo con Next.js
04:18 - 19

Creación y uso de variables de entorno en Next.js
07:53 - 20

Consumo de APIs con Shopify y React Server Components
09:22 - 21

Implementación de Loader en Next.js para Carga de Productos
09:07 - 22

Implementación de Root Grouping en Next.js
06:34 - 23

Manejo de Errores en Next.js con React Error Boundary
08:19 Pon a prueba lo que aprendiste de data fetching en Next.js
- 24

Manejo de Errores y Páginas 404 en Next.js
09:17 - 25

React Server Components en Next.js: Renderizado y Optimización
10:12 - 26

Diferencias entre archivos Template y Layout en Next.js
05:57 - 27

Arquitectura Escalable para Aplicaciones de Software
08:23 - 28

Creación de APIs con Next.js y Road Handlers
07:54 - 29

Configuración y Creación de Colecciones en Shopify
05:53 - 30

Patrones de Fetching en Next.js: Secuencial y Paralelo
11:36 - 31

Filtrado Dinámico de Productos en Shopify mediante API Collections
10:36 - 32

Uso de searchParams y params en componentes React cliente-servidor
07:38 - 33

Implementación de la Vista de Producto en TypeScript y React
11:43 - 34

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas
10:31 - 35

Revalidación de Caché en Next.js: Endpoints por Tag y Path
11:20 - 36

Redirección en Next.js: Server y Client Components
06:34 - 37

Creación de un Componente React para Sanitizar HTML
10:26 - 38

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web
08:51 ¡Revisa los temas avanzados de Next.js en este quiz!
- 39

Implementación de API GraphQL en Shopify para Autenticación Segura
03:48 - 40

Uso de Server Actions en Next.js para Formularios React
06:22 - 41

Implementación de Signup con GraphQL y Shopify
12:56 - 42

Implementación de Cookies de Acceso en Shopify con Next.js
11:20 - 43

Implementación de Flujo de Login con Tokens y Cookies
07:50 - 44

Validación de Access Tokens en Next.js con GraphQL y Cookies
07:51 - 45

Implementación de Carrito de Compras con React Icons
11:37 - 46

Manejo de estado global con Sustant en Next.js 13
09:34 - 47

Implementación de Carrito de Compras en JavaScript y CSS
07:55 - 48

Solución de errores de hidratación en carritos con Next.js y Shopify
12:13 - 49

Implementación de Middlewares en Next.js para Control de Acceso
08:39
¿Cómo evitar crear un monolito en Next.js?
Next.js es un framework sumamente versátil que nos permite construir APIs y desarrollar interfaces de usuario tanto en el backend como en el frontend. Sin embargo, es crucial evitar la tentación de crear un monolito. Ahora bien, te preguntarás, ¿qué es un monolito? Básicamente, es cuando todo lo referente a los distintos dominios de un negocio se aloja en un único repositorio. En el contexto de una tienda online, esto significaría que la página principal, la tienda, secciones de cuenta, categorías de productos, entre otros, están integrados en el mismo lugar. Si bien un monolito tiene ciertas ventajas iniciales, a largo plazo es difícil de mantener y escalar.
Para evitar crear un monolito con Next.js, sigue estos consejos:
- Define el propósito del proyecto: Antes de empezar un proyecto, ten una clara comprensión del dominio de negocio que abordarás con ese proyecto específico.
- Desglosar en diferentes proyectos: Crea diferentes proyectos para cada dominio o sección del negocio, por ejemplo, un proyecto dedicado a usuarios, otro para la tienda, etc.
- Cuidado con el número de servicios: Aunque es importante separar los dominios de negocio, también debes evitar crear demasiados servicios que se vuelvan difíciles de manejar.
¿Cómo maximizar el performance con el Edge Runtime?
El rendimiento es una de las ventajas más significativas de Next.js, y usar el Edge Runtime es una forma efectiva de potenciarlo aún más. Empresas como Cloudflare ofrecen servicios como Cloudflare Workers, que permiten correr aplicaciones de Next.js a través de servidores distribuidos globalmente. Esto asegura una velocidad óptima en la respuesta de las aplicaciones.
Las razones para utilizar el Edge Runtime incluyen:
- Distribución global: Los servidores distribuidos mejoran la latencia y la rapidez de las respuestas.
- Técnicas de caché y memorización: Se utilizan técnicas avanzadas para mantener aplicaciones en estado de 'warm up', mejorando la velocidad de acceso a la Cloud Function.
- Escalabilidad bajo demanda: Al igual que conceptos como Lambda o Cloud Function, el Edge Runtime permite escalar bajo demanda y optimizar recursos.
¿Cómo crear una arquitectura de componentes reusable?
El diseño de componentes es vital en Next.js para asegurar la reusabilidad y la mantenibilidad del código. Aquí algunos consejos para lograrlo:
- Implementar un design system: Aunque no necesariamente debe ser complejo, tener un sistema de diseño facilita la unificación y utilización de componentes a lo largo del proyecto.
- Componentes como átomos: Intenta diseñar componentes pequeños y sin diversas responsabilidades, lo que facilita la reutilización del código y la separación de tareas entre client components y React server components.
- Uso de Storybook: Si tu equipo lo necesita, puedes exportar los componentes a herramientas como Storybook, facilitando el uso común entre los desarrolladores.
Con estos consejos podrás aprovechar todo el potencial de Next.js y construir proyectos que no solo sean eficientes y rápidos, sino también fáciles de manejar y escalar. ¡Sigue aprendiendo y mejorando tus habilidades con este increíble framework!