Con el lanzamiento de Next.js App Router, muchos desarrolladores están ansiosos por migrar sus proyectos existentes. En esta publicación, compartiré mi experiencia al migrar un proyecto a Next.js App Router, incluidos los desafíos clave, los cambios y cómo puedes hacer que el proceso sea más fluido.

Es un enfoque incremental, puedes usar el enrutador de páginas y el enrutador de aplicaciones simultáneamente.

¿Por qué migrar al enrutador de aplicaciones Next.js?

El App Router introduce varias ventajas:

• Enrutamiento mejorado: enrutamiento más limpio basado en el sistema de archivos.
• Mejoras en la representación del lado del servidor (SSR): manejo más eficiente de los datos del lado del servidor.
• Meta Manejo: Gestión SEO simplificada.
• Rendimiento mejorado: optimizaciones integradas para varios componentes.

Al migrar, puedes preparar tu aplicación para el futuro y aprovechar las últimas funciones de Next.js.

Pasos para migrar al enrutador de aplicaciones

• Actualizar dependencias

El primer paso es asegurarse de que Next.js y las dependencias relacionadas estén actualizadas. Ejecute los siguientes comandos para instalar las últimas versiones de Next.js y React:

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

• Estructurar la carpeta de la aplicación

App Router se basa en el nuevo directorio de aplicaciones para administrar rutas, metadatos y diseños. Aquí se explica cómo estructurarlo:

Carpeta de aplicaciones: mueve tus páginas a la carpeta de aplicaciones. Cada ruta ahora tiene su propia carpeta dedicada que contiene un archivo page.tsx.

Diseños: agregue un archivo layout.tsx para definir diseños para secciones específicas de su aplicación. Esto es particularmente útil para manejar componentes compartidos como barras de navegación o pies de página.

• Cambios del enrutador

Uno de los cambios más significativos es el reemplazo de next/router por next/navigation para la funcionalidad de enrutamiento y navegación.

Reemplazar todas las importaciones de siguiente/enrutador con siguiente/navegación.
Actualice funciones como useRouter con nuevos equivalentes, como usePathname, useSearchParams y useRouter() cuando corresponda.

• Refactorizar código del lado del servidor

getServerSideProps y getStaticProps están obsoletos en App Router.
Utilice componentes de servidor asíncronos o acciones del servidor para recuperar datos en páginas del lado del servidor.

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• Manejo de componentes del lado del cliente

Componentes del cliente:
Cualquier componente que utilice enlaces de React, API del navegador o interacciones del usuario debe marcarse con "usar cliente". Esto le indica a Next.js que los represente en el lado del cliente.

Componentes del servidor:
Cualquier componente que no requiera interacción con el navegador puede permanecer como componente del servidor. Estos son más eficientes ya que evitan enviar JavaScript innecesario al cliente.

• Manejo de bibliotecas externas

Si está utilizando bibliotecas externas como React Query, AntDesign o framer, etc., debe actualizarlas y realizar los cambios necesarios. No se pueden incluir todos los cambios en este blog. Aunque se mencionan cambios en su documentación.

Desafíos comunes durante la migración

• Manejo de eventos del enrutador:

Con el cambio de siguiente/enrutador a siguiente/navegación, el manejo de eventos del enrutador puede requerir un enfoque diferente.
Asegúrese de actualizar los detectores o enlaces de eventos del enrutador en consecuencia.

• Problemas de cambio de diseño:

Al migrar páginas con diseños complejos (especialmente aquellas con animaciones), es posible que notes cambios en el diseño. Agregue un marcador de posición o mantenga la alineación adecuada en el lado del servidor para evitar cambios de diseño.

• Actualizaciones de componentes de imagen y enlace:

App Router introduce cambios en los componentes Imagen y Enlace.
Utilice codemods para actualizar componentes automáticamente.
Para el componente Imagen, elimine los atributos obsoletos como responsivo.

• Animaciones

Los componentes relacionados con la animación, como los archivos framer, swiper y lootie, deben mantenerse en el lado del cliente.

Conclusión

La migración a Next.js App Router conlleva desafíos, pero también mejoras significativas en rendimiento, escalabilidad y flexibilidad. Al dividir la migración en secciones manejables (a nivel de aplicación, a nivel de página y actualizaciones de funciones), pude abordar cada cambio de manera sistemática.

¡Avísame si tienes alguna pregunta o consejo sobre tus propias migraciones!