🔍 ¿Qué es un Router en Next.js?

Un router es el sistema que determina cómo se manejan las URLs de tu aplicación y qué componentes se renderizan cuando el usuario accede a una ruta específica. En Next.js, cada archivo dentro de las carpetas de routing corresponde automáticamente a una ruta en tu aplicación. Por ejemplo, si creas un archivo about.js dentro de /pages, este será accesible en /about.

El router es fundamental porque define la estructura de navegación, los layouts (diseños compartidos), la gestión de estados de carga y la optimización del rendimiento de tu aplicación. Elegir el router adecuado desde el inicio de un proyecto te ahorrará refactorizaciones costosas más adelante.

📂 Pages Router: El Enfoque Tradicional

El Pages Router ha sido el sistema de enrutamiento de Next.js desde sus inicios. Utiliza el directorio /pages donde cada archivo representa una ruta. Este enfoque es intuitivo y fácil de entender: simplemente creas archivos y obtienes rutas automáticamente.

Características principales del Pages Router:

• Enrutamiento basado en archivos: Cada archivo .js, .jsx, .ts o .tsx en /pages se convierte en una ruta.


• Renderizado del lado del cliente por defecto: Usa React hooks como useEffect y useState directamente.


• API Routes integrada: Puedes crear endpoints de API en /pages/api.


• getServerSideProps: Para renderizado del lado del servidor por solicitud.


• getStaticProps: Para generación estática en tiempo de compilación.


• getStaticPaths: Para generación de rutas estáticas dinámicas.

// pages/index.js

export default function Home() {

  return (

    


      
Bienvenido a mi sitio


      
Usando Pages Router


    


  );

}



// pages/about.js

export default function About() {

  return (

    


      
Acerca de nosotros


      
Página estática con Pages Router


    


  );

}



// pages/blog/[slug].js - Ruta dinámica

export default function BlogPost({ post }) {

  return (

    


      
{post.title}


      
{post.content}


    


  );

}



export async function getStaticPaths() {

  const posts = await fetchPosts();

  return {

    paths: posts.map((post) => ({

      params: { slug: post.slug },

    })),

    fallback: false,

  };

}



export async function getStaticProps({ params }) {

  const post = await fetchPostBySlug(params.slug);

  return { props: { post } };

}

🆕 App Router: La Nueva Era del Enrutamiento

El App Router (introducido en Next.js 13 como beta y estabilizado en Next.js 14) revoluciona la forma de construir aplicaciones. Utiliza el directorio /app y aprovecha los React Server Components (RSC), permitiendo renderizado híbrido y optimizado.

Características principales del App Router:

• React Server Components: Los componentes se renderizan en el servidor por defecto, reduciendo el JavaScript enviado al cliente.


• Nested Layouts: Permite crear diseños anidados que persisten entre navegaciones sin recargar la página.


• Streaming: Soporte nativo para Suspense y streaming de HTML.


• Server Actions: Funciones que se ejecutan en el servidor y pueden ser llamadas desde el cliente.


• Loading.js y Error.js: Archivos especiales para estados de carga y errores por ruta.


• Mejor manejo de datos: Patrones más limpios para obtener ymutar datos.

// app/layout.js - Layout raíz

export default function RootLayout({ children }) {

  return (

    

      

        

        
{children}


      Hablar por WhatsApp

    

  );

}



// app/page.js - Página de inicio

export default function Home() {

  return (

    


      
Bienvenido a mi sitio


      
Usando App Router con React Server Components


    


  );

}



// app/blog/[slug]/page.js - Ruta dinámica

export default async function BlogPost({ params }) {

  const post = await fetchPostBySlug(params.slug);

  

  return (

    


      
{post.title}


      
{post.content}


    


  );

}



// app/blog/[slug]/loading.js - Estado de carga

export default function Loading() {

  return 
Cargando artículo...
;

}



// app/blog/[slug]/error.js - Manejo de errores

export default function Error({ error }) {

  return 
Error: {error.message}
;

}



// app/api/posts/route.js - API Route (opcional en App Router)

export async function GET() {

  const posts = await fetchPosts();

  return Response.json(posts);

}



// app/actions.js - Server Actions

export async function createPost(formData) {

  'use server';

  const title = formData.get('title');

  await savePost({ title });

  revalidatePath('/blog');

}

⚡ Comparación Detallada: Pages Router vs App Router

🎯 ¿Cuándo Usar Cada Router?

Usa el Pages Router cuando:

1. Proyecto existente: Ya tienes una aplicación funcionando con Pages Router y migrar sería costoso.


2. Simplicidad requerida: Tu equipo está más familiarizado con React tradicional y hooks.


3. Prototipado rápido: Necesitas crear un prototipo funcional rápidamente sin aprender nuevos patrones.


4. Recursos educativos limitados: Documentación o tutoriales específicos para Pages Router son más abundantes.


5. Requisitos de middleware complejos: Ya tienes middleware configurado que migrar sería problemático.

Usa el App Router cuando:

1. Nuevo proyecto: Estás iniciando una aplicación desde cero.


2. Rendimiento óptimo: Necesitas el menor tamaño de bundle posible.


3. Acceso a base de datos directo: Quieres consultar APIs o bases de datos directamente en componentes.


4. Experiencia de usuario fluida: Necesitas layouts persistentes y transiciones suaves.


5. Server Actions: Quieresmutaciones de datos sin crear endpoints API separados.


6. Preparación para el futuro: Quieres usar las últimas características de React y Next.js.

🛠️ Ejemplo Práctico: Obtención de Datos

Veamos cómo difiere la obtención de datos entre ambos routers con un ejemplo real de una lista de productos:

Con Pages Router:

// pages/products/index.js

import useSWR from 'swr';



function ProductsPage() {

  const { data, error } = useSWR('/api/products', fetcher);



  if (error) return 
Error al cargar productos
;

  if (!data) return 
Cargando...
;



  return (

    


      {data.map(product => (

        
{product.name}


      ))}

    


  );

}



// pages/api/products.js

export default async function handler(req, res) {

  const products = await db.getProducts();

  res.status(200).json(products);

}

Con App Router:

// app/products/page.js

async function ProductsPage() {

  // Obtención directa de datos - sin API route necesario

  const products = await db.getProducts();



  return (

    


      {products.map(product => (

        
{product.name}


      ))}

    


  );

}



// Si necesitasmutaciones, usa Server Actions:

// app/actions.js

export async function createProduct(formData) {

  'use server';

  const name = formData.get('name');

  await db.createProduct({ name });

  revalidatePath('/products');

}

📊 Impacto en el Rendimiento

El App Router puede proporcionar mejoras significativas en varias métricas:

• Tamaño del bundle JavaScript: Hasta un 30-40% menos de JavaScript enviado al cliente gracias a Server Components.


• Tiempo de carga inicial: Menos JavaScript significa parseo más rápido y menor TTI (Time to Interactive).


• Caché más eficiente: El sistema de caché del App Router es más granular y predecible.


• SEO mejorado: El contenido llega pre-renderizado desde el servidor.


• Streaming efectivo: Puedes enviar partes de la página según estén listas.

"La elección del router no es solo una decisión técnica, es una declaración de cómo quieres construir y escalar tu aplicación."

🔮 El Futuro de Next.js

Next.js está evolucionando rápidamente y el App Router es el centro de esta evolución. Las próximas características incluyen:

• Partial Prerendering (PPR): Combina contenido estático y dinámico automáticamente.


• Mejoras en Server Actions: Más controles y mejor integración con formularios.


• Cache invalidation más granular: Control preciso sobre qué se cachea y cuándo.


• Mejoras en streaming: Mejor experiencia de carga progresiva.

📝 Resumen y Recomendación Final

Ambas opciones son válidas y capaces de construir aplicaciones web modernas. Sin embargo, para la mayoría de los casos de uso modernos, el App Router es la elección recomendada porque:

1. Ofrece mejor rendimiento por defecto con React Server Components.


2. Proporciona una experiencia de desarrollo más moderna y simplificada.


3. Recibe todas las nuevas características y optimizaciones.


4. Reduce la cantidad de código necesario para funcionalidades comunes.


5. Se alinea mejor con la dirección futura de React.

La única razón válida para usar Pages Router es mantener un proyecto existente donde la migración no justifique el costo-beneficio. Para proyectos nuevos, App Router es el camino a seguir.