En la segunda parte de este curso, nos enfocaremos en el Page Router de Next.js 13. El Page Router ha sido la forma tradicional de manejar rutas en versiones anteriores de Next.js, y sigue siendo compatible en la versión 13. Aunque el App Router ha introducido nuevas características y mejoras, el Page Router sigue siendo una opción sólida, especialmente para proyectos que requieren mantener compatibilidad con versiones anteriores.

En este capítulo, exploraremos el Page Router en detalle y analizaremos sus diferencias clave con el App Router.

¿Qué es el Page Router?

El Page Router es el sistema de enrutamiento basado en la carpeta pages/. En este sistema, cada archivo dentro de la carpeta pages/ corresponde a una ruta. Este enfoque sencillo y directo permite definir rutas de manera muy clara. Por ejemplo, un archivo about.js en la carpeta pages/ representará la ruta /about.

Ejemplo básico de Page Router

La creación de rutas con el Page Router es extremadamente intuitiva. Aquí tienes un ejemplo de cómo definir una página básica utilizando el Page Router:

javascript

Este sistema es simple, lo que lo hace fácil de usar y entender.

Diferencias clave entre el Page Router y el App Router

Aunque tanto el Page Router como el App Router manejan el enrutamiento de una aplicación Next.js, existen algunas diferencias importantes entre ellos.

Estructura de Rutas

• Page Router: Utiliza una estructura basada en archivos dentro de la carpeta pages/. Cada archivo o carpeta dentro de pages/ representa una ruta en la aplicación.
• App Router: Introduce un enfoque basado en la carpeta app/, donde las rutas se definen utilizando carpetas y archivos como page.js.

Data Fetching

• Page Router: En el Page Router, las funciones como getStaticProps, getServerSideProps, y getInitialProps se utilizan para obtener datos durante el proceso de renderizado.

• App Router: En el App Router, las funciones como getServerSideProps se integran directamente en los archivos de las rutas, lo que proporciona una experiencia más fluida para obtener datos.

Soporte para Layouts

• Page Router: El Page Router no tiene soporte nativo para layouts anidados. Si necesitas layouts, debes manejarlos manualmente mediante componentes personalizados.

• App Router: El App Router tiene soporte nativo para layouts anidados, lo que facilita la creación de estructuras de diseño comunes entre múltiples páginas.

Flexibilidad y Modularidad

• Page Router: Si bien es sencillo de usar, el Page Router es menos flexible que el App Router en términos de modularidad y reutilización de componentes.

• App Router: Con el App Router, las rutas y los componentes se organizan de manera más modular, lo que facilita la reutilización de código y el mantenimiento de proyectos grandes.

Ventajas del Page Router

A pesar de las mejoras introducidas por el App Router, el Page Router sigue teniendo algunas ventajas que lo hacen útil en ciertos contextos:

1. Compatibilidad: Si estás trabajando en un proyecto que comenzó en versiones anteriores de Next.js, es posible que prefieras el Page Router para mantener la compatibilidad.

2. Simplicidad: El enfoque basado en archivos es más simple de entender y puede ser más adecuado para proyectos pequeños o para equipos que prefieren la simplicidad sobre la flexibilidad avanzada.

3. Documentación y soporte: El Page Router ha sido la forma tradicional de manejar rutas en Next.js, por lo que la documentación y el soporte de la comunidad para este enfoque son muy amplios.

Desventajas del Page Router

• Menos modularidad: A diferencia del App Router, el Page Router no ofrece soporte nativo para layouts ni una estructura de rutas tan flexible.
• Menos optimizaciones: El App Router incluye optimizaciones y mejoras de rendimiento que no están presentes en el Page Router.

Conclusión

El Page Router sigue siendo una opción válida para muchos proyectos, especialmente aquellos que buscan mantener compatibilidad con versiones anteriores o que no requieren la modularidad avanzada del App Router. Sin embargo, si estás empezando un nuevo proyecto y necesitas flexibilidad, el App Router puede ser una mejor elección.