En este capítulo, aprenderemos cómo realizar la migración de proyectos entre el App Router y el Page Router en Next.js 13. Tanto el App Router como el Page Router tienen diferentes características y formas de manejar rutas, por lo que es importante entender cómo migrar proyectos sin romper la funcionalidad existente.

Diferencias Clave entre el App Router y el Page Router

Antes de migrar un proyecto entre estos dos sistemas de enrutamiento, es crucial entender las diferencias clave entre el App Router y el Page Router:

• App Router: Introducido en Next.js 13, ofrece soporte nativo para layouts, manejo avanzado de datos, y mejoras en el sistema de enrutamiento. Las rutas se gestionan en la carpeta app/.

• Page Router: El sistema de enrutamiento tradicional, basado en la carpeta pages/. Aquí, cada archivo de la carpeta pages/ representa una ruta.

Consideraciones para la Migración

La migración de un proyecto entre estos dos sistemas de enrutamiento implica ciertos pasos clave, como la reestructuración de las carpetas y el ajuste de las funciones para obtener datos.

Migración del App Router al Page Router

Si estás utilizando el App Router y deseas migrar tu proyecto al Page Router, deberás hacer cambios en la estructura de archivos y en cómo manejas los layouts y el fetching de datos.

1. Mover las rutas de la carpeta app/ a pages/: Los archivos que estaban en app/ ahora deben trasladarse a pages/, y cada archivo dentro de pages/ representará una ruta.

2. Reemplazar layouts nativos con componentes reutilizables: Como el Page Router no tiene soporte nativo para layouts, deberás crear un layout personalizado utilizando componentes comunes.

3. Ajustar el Data Fetching: El App Router maneja el fetching de datos de forma diferente. En el Page Router, debes utilizar las funciones getStaticProps, getServerSideProps y getStaticPaths para obtener datos.

Ejemplo de Migración de Layout

Supongamos que tienes un layout nativo en el App Router:

javascript

Para migrar este layout al Page Router, debes convertirlo en un componente reutilizable y aplicarlo manualmente a las páginas dentro de pages/.

javascript

Ajuste del Data Fetching

En el App Router, los datos se pueden obtener directamente dentro de las rutas utilizando hooks como use. En el Page Router, necesitas usar las funciones de data fetching como getStaticProps o getServerSideProps.

Ejemplo de Ajuste en el Fetching de Datos

En el App Router, podrías tener algo como esto:

javascript

Para migrarlo al Page Router, necesitarás utilizar getServerSideProps para obtener los datos:

javascript

Migración del Page Router al App Router

Si deseas migrar un proyecto del Page Router al App Router, la estructura de archivos debe cambiar de pages/ a app/. Además, deberás aprovechar las nuevas características del App Router, como layouts nativos y el manejo directo de datos.

1. Mover las rutas de pages/ a app/: Elimina la carpeta pages/ y crea una estructura de rutas dentro de app/, con archivos como page.js para representar cada ruta.

2. Aprovechar layouts nativos: En lugar de crear layouts personalizados como en el Page Router, utiliza el sistema de layouts anidados del App Router.

Ejemplo de Migración de Data Fetching

En el Page Router, los datos se obtienen utilizando getStaticProps o getServerSideProps. En el App Router, puedes simplificar esto utilizando el hook use.

Antes en el Page Router:

javascript

Después en el App Router:

javascript

Consideraciones de SEO en la Migración

Tanto el App Router como el Page Router manejan el SEO de manera efectiva, pero es importante verificar que las rutas migren correctamente para mantener el rendimiento de SEO. Asegúrate de que las redirecciones y reescrituras estén configuradas adecuadamente para evitar problemas con los motores de búsqueda.

Implementar Redirecciones

Si migras las rutas y las URLs cambian, debes configurar redirecciones para evitar que los usuarios (y motores de búsqueda) encuentren errores 404. Puedes hacer esto con el archivo next.config.js:

javascript

Conclusión

Migrar proyectos entre el App Router y el Page Router en Next.js 13 requiere ajustar la estructura de archivos, los layouts, y la forma en que se obtienen los datos. Al seguir estos pasos, puedes realizar una migración sin problemas mientras aprovechas las fortalezas de cada sistema de enrutamiento.