Fundamentos

1

Desarrollo web con Next.js: Aplicaciones listas para producción

2

Novedades y cambios clave en Next.js 15

3

Migración de Aplicaciones a NextJS 15: Paso a Paso

Haciendo tu proyecto más rápido

4

Refactorización de componentes en Next.js usando React Server Components

5

Conexión Directa a PostgreSQL desde React Server Components

Consumiendo datos de manera eficiente

6

Uso de ORM Drizzle para Gestión de Datos en Next.js

7

Consumo de APIs con React Query en Aplicaciones Next.js

8

Consumo de Datos: Secuencial, Paralelo y Preload en Next.js

9

Optimización de Carga con Suspense en Next.js y React

Escalabilidad y personalización

10

Internacionalización en NextJS: Middleware y Rutas Dinámicas

11

Internacionalización en Next.js: Traducción y Formato de Fechas y Números

12

Autenticación con Middleware en Next.js: Cookies y Redirección

13

Manejo de Cookies con Next.js para Autenticación Segura

14

Integración de Feature Flags en aplicaciones Next.js

15

Manejo de Errores en React Server Actions y Next.js

16

Observabilidad de Errores con Sentry en Aplicaciones Next.js

Características Adicionales y Herramientas

17

Sistema de Caché en Next.js: Opciones y Nuevas Funcionalidades

18

Seguridad en Next.js: Server Actions y Componentes en React

19

Seguridad de Cookies y Encriptación en Aplicaciones Web

20

Optimización del Rendimiento en Next.js: Medición y Mejoras Prácticas

21

Despliegue de Aplicaciones Next.js con Vercel y Docker

22

Despliegue de Next.js en Fly.io con Docker y PostgreSQL

23

Configurar variables de entorno con Docker y Flyo

24

Migración de PHP a Next.js para Mejorar SEO y Performance

Novedades y cambios clave en Next.js 15

2/24
Recursos
Transcripción

Next.js ha introducido una versión revolucionaria con cambios significativos que optimizan el desarrollo y traen herramientas innovadoras. Aquí exploramos los elementos más destacados de esta actualización, cómo impactan el flujo de trabajo y qué esperar de las futuras mejoras.

¿Qué es TurboPack y por qué es tan importante?

  • TurboPack es la nueva herramienta de transpilación que promete reemplazar a Webpack en el futuro.
  • Diseñada por el equipo de Next.js, mejora significativamente la velocidad y eficiencia en ambientes de desarrollo local.
  • Sin embargo, no está recomendada para producción; Webpack sigue siendo el estándar en entornos de CI/CD.

Ventajas:

  • Mayor velocidad en procesos de desarrollo.
  • Optimización específica para React.

Consideraciones:

  • Por ahora, solo está habilitado para desarrollo local.
  • Es una herramienta en transición, pero muestra el camino hacia el futuro de Next.js.

¿Cómo ha mejorado el despliegue en servidores propios?

Antes, desplegar aplicaciones Next.js en servidores propios implicaba configuraciones complejas. Ahora, con esta nueva versión:

  • Menos dependencias externas: Ya no necesitas librerías adicionales como Chart.
  • Mayor simplicidad en la configuración: Implementaciones más rápidas y directas.
  • Como parte del curso, se probará en un servidor de bajo costo como Digital Ocean para evaluar estas mejoras.

Beneficios:

  • Despliegue simplificado y eficiente.
  • Más opciones para quienes prefieren servidores propios en lugar de plataformas como Vercel o Cloudflare.

¿Qué cambios afectan la gestión de cookies y parámetros?

  • Operaciones como acceder a cookies o parámetros de ruta ahora son obligatoriamente asíncronas.
  • Esto implica utilizar await en todas las solicitudes relacionadas.
  • Retrocompatibilidad asegurada: Aunque olvides usar await, seguirá funcionando por ahora. Sin embargo, esto cambiará en versiones futuras.

Implicaciones:

  • Código más limpio y adaptado a prácticas modernas.
  • Preparación para futuras actualizaciones sin sorpresas.

¿Por qué se desactivó la caché por defecto?

En versiones anteriores, el fetch y los server components tenían caché activada por defecto. Ahora:

  • Caché desactivada por defecto: Los desarrolladores deben habilitarla explícitamente donde sea necesario.
  • Esto otorga mayor control a quienes conocen el producto en detalle.

Introducción de useCache:

  • Una nueva directiva para gestionar la caché de forma centralizada.
  • Aunque aún no está disponible públicamente, se espera que sea un estándar en la versión 15.x de Next.js.

Ventajas:

  • Mayor flexibilidad para personalizar caché según necesidades específicas.
  • Simplificación de la lógica de caché en proyectos complejos.

¿Qué nos depara el futuro con Next.js?

El equipo de Next.js continúa enfocándose en transiciones suaves hacia tecnologías avanzadas como React Server Components. Aunque esta versión no representa un cambio drástico, sienta las bases para futuras innovaciones.

Aportes 4

Preguntas 0

Ordenar por:

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

Que hay acerca de los Micro Front Ends? ojala puedan hacer un curso de eso con Next
Next.js 15 introduce una serie de mejoras y nuevas funcionalidades que optimizan el desarrollo de aplicaciones web. A continuación, se destacan las principales novedades: * **Compatibilidad con React 19**: Next.js 15 ofrece soporte completo para React 19, permitiendo a los desarrolladores aprovechar las últimas características de React en sus aplicaciones.[Next.js by Vercel - The React Framework](https://nextjs.org/blog/next-15?utm_source=chatgpt.com) * **CLI de @next/codemod**: Se ha lanzado una herramienta que facilita la actualización a las versiones más recientes de Next.js y React, automatizando transformaciones de código necesarias para la migración.[Next.js by Vercel - The React Framework](https://nextjs.org/blog/next-15?utm_source=chatgpt.com) * **APIs de Solicitudes Asíncronas**: Las APIs que dependen de datos específicos de la solicitud, como `cookies`, `headers`, `params` y `searchParams`, ahora son asíncronas, preparando el camino para futuras optimizaciones en la renderización y el caché.[Next.js by Vercel - The React Framework](https://nextjs.org/blog/next-15?utm_source=chatgpt.com) * **Cambios en la Semántica de Caché**: Las solicitudes `fetch`, los manejadores de rutas GET y las navegaciones del cliente ya no se almacenan en caché por defecto, brindando a los desarrolladores mayor control sobre el comportamiento de caché.[Next.js by Vercel - The React Framework](https://nextjs.org/blog/next-15?utm_source=chatgpt.com) * **Turbopack en Desarrollo**: Se han mejorado el rendimiento y la estabilidad de Turbopack, ofreciendo tiempos de inicio del servidor más rápidos y actualizaciones de código más eficientes durante el desarrollo.[Next.js by Vercel - The React Framework](https://nextjs.org/blog/next-15?utm_source=chatgpt.com) * **Indicador de Rutas Estáticas**: Se ha añadido un indicador visual que muestra qué rutas son estáticas durante el desarrollo, facilitando la optimización del rendimiento.[Next.js by Vercel - The React Framework](https://nextjs.org/blog/next-15?utm_source=chatgpt.com) * **API** `after()`: Esta nueva API permite ejecutar código después de que una respuesta haya terminado de transmitirse, útil para tareas como registro de logs o análisis sin bloquear la respuesta principal.[Next.js by Vercel - The React Framework](https://nextjs.org/blog/next-15-1?utm_source=chatgpt.com) * **Mejoras en la Depuración de Errores**: Se han mejorado los mensajes de error y los mapas de origen, facilitando la identificación y resolución de problemas tanto en el navegador como en la terminal.[Next.js by Vercel - The React Framework](https://nextjs.org/blog/next-15-1?utm_source=chatgpt.com) * **Soporte para ESLint 9**: Se ha añadido compatibilidad con ESLint 9, mejorando la calidad del código y la integración con herramientas de análisis estático.[Next.js by Vercel - The React Framework](https://nextjs.org/blog/next-15?utm_source=chatgpt.com)
Hola a todos! tengo una pregunta, según la ruta de Frontend a profundidad con React.js este curso se encuentra a nivel básico, pero dentro de la descripción del curso dice que es avanzado, recién habia hecho el curso con JuanDC de react pero alli no usamos Next.js , Debo continuar con este curso ? la verdad si me perdi un poco por que no he entendido mucho de lo que explica hasta el momento el profe
El codemod de Next.js 15 es muy bueno y facilita la migración. Inclusive es muy útil al migrar desde la versión 14