Conceptos básicos de Next.js 14

1

Optimización de Carga Web con Next.js

2

Creación de un Proyecto Next.js con TypeScript: Paso a Paso

3

Tienda Online con Shopify y Next.js: Implementación Práctica

4

Rutas Estáticas y Dinámicas en Next.js: Cómo Implementarlas

5

Layouts y Navegación en Next.js: Implementación Práctica

6

Navegación Eficiente con el Componente Link en Next.js

7

Rutas Dinámicas y Opcionales en Next.js

8

Componentes Cliente y Servidor en Next.js: Cuándo Usar Cada Uno

9

Componentes Reutilizables en Next.js para Mejorar la Arquitectura Web

Quiz: Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

10

CSS Modules en Next.js: Estiliza Componentes sin Colisiones

11

Configurar Sass en Next.js para Estilos Modulares Avanzados

12

Estilos Globales con SASS: Estrategias y Buenas Prácticas

13

Agregar Archivos Estáticos en Next.js

14

Optimización de imágenes en Next.js con Next.image

15

Optimización de Imágenes con NextImage: Técnicas y Buenas Prácticas

16

Optimización de Fuentes de Google en Aplicaciones Web

17

Estilos Dinámicos en React con Classnames: Uso Práctico y Eficiente

Quiz: Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

18

Creación de Tienda en Shopify usando Next.js

19

Variables de Entorno en Next.js: Configuración y Uso Avanzado

20

Consumo de APIs con JavaScript: guía práctica paso a paso

21

Loading de Productos con Next.js y React Server Components

22

Implementación de Root Grouping en Next.js: Tips y Mejores Prácticas

23

Manejo de errores con React y Next.js: Implementación práctica

Quiz: Data Fetching en Next.js

Next.js Avanzado

24

Gestión Global de Errores en Next.js

25

Renderizado con React Server Components en Next.js 14

26

Diferencias entre Template y Layout en Next.js

27

Arquitectura Escalable en Aplicaciones de Software

28

Creación de APIs con Road Handlers en Next.js

29

Configuración de Colecciones en Shopify para Tiendas Virtuales

30

Patrones de Data Fetching en Next.js: Secuencial y Paralelo

31

Filtrado de productos en Shopify usando JavaScript APIs

32

Rutas Dinámicas y Búsquedas en React con Hooks

33

Implementación de Componentes Presentacionales en React

34

Optimización de Caché en Next.js: Tipos y Estrategias

35

Revalidación de Caché en Next.js: Uso de Tags y Paths

36

Redirecciones en Next.js: Uso en Server y Client Components

37

Sanitización de HTML en React para prevenir vulnerabilidades XSS

38

SEO en páginas estáticas y dinámicas con Next.js

Quiz: Next.js Avanzado

Autenticación y autorización

39

API Storefront y Gestión de Tokens en Shopify

40

Uso de Server Actions en Next.js para Formularios

41

Implementación de Mutaciones GraphQL en Shopify

42

Creación de Cookies Seguras en Next.js para Autenticación

43

Implementación Completa de Flujo de Login en Node.js

44

Validación de Tokens de Acceso en Next.js con GraphQL

45

Carrito de Compras: Implementación con React y Estilos Sass

46

Estado global en Next.js 13 con Sustant

47

Carrito de Compras con React: Implementación y Estilos

48

Errores de hidratación en React y solución con Next.js Dynamic

49

Implementación de Middlewares en Next.js: Protege Rutas de Acceso

Inteligencia Artificial

50

Implementación de Chatbots con Next.js y Vercel AI SDK

51

Personalización de Chatbots con OpenAI para E-commerce

Performance

52

Rutas Paralelas en Next.js: Mejora el Rendimiento de Tus Apps

53

Análisis de bundles con Webpack Bundle Analyzer

Quiz: Performance

Frontend Ops

54

Optimización de Next.js con Edge Runtime

55

Despliegue de Aplicaciones NxJS en Vercel: Guía Práctica

56

Arquitectura de Proyectos Empresariales con Next.js

Quiz: Frontend Ops

Next.js es parte de tu nuevo stack

57

Creación de Apps con Next.js y React: Frontend y Backend

Curso de Next.js 14

Curso de Next.js 14

Enrique Devars

Enrique Devars

Optimización de Carga Web con Next.js

1/57
Recursos
Transcripción

¿Por qué es crucial la velocidad de carga del sitio web?

La rapidez con que carga un sitio web es vital para el éxito de tu negocio. No es un dato menor que el 40% de las personas abandonan un sitio si tarda más de 3 segundos en cargar. Un sitio web lento no solo frustra a los usuarios, sino que además puede resultar en pérdidas significativas de clientes y, por ende, de ingresos para tu empresa. Utilizar la tecnología adecuada puede marcar la diferencia, y Next.js surge como una solución clave para superar desafíos de velocidad y rendimiento en el desarrollo web.

¿Qué es Next.js y por qué es relevante?

¿Cómo se describe Next.js?

Next.js es un framework full stack que reinventa la forma de crear aplicaciones web, al combinar las ventajas de React para el frontend y TypeScript para el backend en una única aplicación. Su capacidad para renderizar páginas del lado del servidor o generarlas de manera estática es quizás su característica más destacada. Esto no solo mejora significativamente el SEO, sino que reduce los costos asociados al desarrollo y mantenimiento de un sitio web.

¿Cuáles son sus beneficios principales?

  • Reducción del tiempo de carga: Gracias a su estructura optimizada, Next.js garantiza una carga más eficiente de los recursos, mejorando la experiencia del usuario al navegar por el sitio.
  • Mejora del SEO: Al permitir el server-side rendering, Next.js optimiza las páginas para que sean fácilmente rastreables por los motores de búsqueda, aumentando así la visibilidad y el tráfico orgánico.
  • Ahorro en costos: El enfoque eficiente de Next.js en el manejo del backend y frontend reduce recursos y tiempos de desarrollo, lo que en última instancia se traduce en menores costos operativos.
  • Facilidad para esbozar rutas dinámicas: Tradicionalmente, la creación de rutas con JavaScript implicaba complejidad. Next.js simplifica este proceso permitiendo que solo un simple folder sea suficiente para crear una ruta.

¿Qué hace a Next.js ideal para los desarrolladores?

¿Cómo mejora la experiencia de desarrollo?

Integrando estrategias de code splitting, preloading y React Server Components, Next.js ofrece un rendimiento excelente sin necesidad de preocupaciones constantes por el performance. Además, al eliminar la necesidad de configuraciones complejas, permite a los desarrolladores enfocarse en la lógica de sus aplicaciones, consiguiendo así desarrollar sitios web altamente complejos en muy poco tiempo.

¿Qué soporte ofrece la comunidad de Next.js?

Next.js cuenta con una robusta comunidad de usuarios y desarrolladores, que no solo enriquecen el framework con nuevas actualizaciones, sino que también proporcionan soporte constante a quienes adoptan esta tecnología. Esta comunidad activa es un respaldo invaluable para asegurar que el framework evolucione y se adapte a las necesidades cambiantes del desarrollo web moderno.

En resumen, Next.js no solo transforma la forma en que se construyen y gestiona las aplicaciones web, sino que también abre nuevas posibilidades para llegar a millones de usuarios con un rendimiento sobresaliente. Con sus rápidas capacidades y la capacidad de adaptación, es una herramienta que todo desarrollador debería considerar dominar para seguir siendo relevante en el creciente mercado digital.

Aportes 19

Preguntas 2

Ordenar por:

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

Un curso que estaba esperando 🚀
Next js 14, es el mejor
Se menciona en el segundo 11 que la única forma de no tener el problema, es usando NEXT.js. Me gustaría aclarar que no es así, para evitar confusiones. Hay muchas otras formas de tener un sitio web super rápido y una de las mejores y más prácticas es NEXTjs, pero no la única. Lo menciono para que no haya desinformación.
![](https://static.platzi.com/media/user_upload/image-da2d12a4-9a39-407d-a1b4-d423f2a0e0cb.jpg)Nuevo curso de Next.js 14
No saben cuánto tiempo he esperado esto, valió la pena quedarse 🫡💻
En performance, cual es mejor? net core MVC7/8 o React? ?
Genial aaaa
Justo lo que necesitaba :)
Achis achis, PHP.js!! BTW!! Estaba mirando el curso pasado y se rompió el temario y los comments :eyes:
Vengo a Disfrutar este Cursooo
Calculo platzi no esta escrito en Next.js porque los tiempo de cargas te los regalo.

Increible!!!

Ya estoy listo para esta nueva etapa!

Ya hacia falta, encontre el amor <3

Qué emoción llegar al punto de poder entender y aprender esta tecnología, después de tanto esfuerzo y trabajo en mi sueño por ser Fullstack Developer, cada vez más cerca, este año 2024 lo haremos realidad !

Next js 14 es el mejor con server actions
Mi nombre es Brando Rodriguez y me emociona ser parte de este curso de Next.js 14 junto a ustedes. Como desarrollador frontend, tengo una pasión ardiente por la creación de experiencias web cautivadoras y funcionales. Si les interesa, pueden echar un vistazo a mi trabajo en [brandorodriguez.com](https://brandorodriguez.com/) para ver cómo he aplicado mis habilidades de desarrollo frontend en proyectos anteriores.
Estaba esperando esto! Genial
Estaba esperando este curso. Ahora si, a darle con todo! gracias Enrique
SIIIIIII, SIIIIIIIIIIIIII