Código Facilito lanza los “Días de Contenedores”: una semana gratuita de tutoriales sobre Docker, Kubernetes y Cloud Native

Next.js es uno de los frameworks más populares para construir aplicaciones web con React. Pero, si estás migrando desde Create React App o cualquier otro enfoque SPA, es probable que te encuentres rápidamente confundido con una de sus características más poderosas (y a la vez más complejas): el sistema de enrutamiento y la generación de páginas.

En esta guía, resolveremos este dolor común paso a paso. Si alguna vez te has preguntado “¿Debería usar getStaticProps o getServerSideProps?”, “¿Cómo creo una ruta dinámica?”, o “¿Cuál es la diferencia entre las carpetas pages/ y app/?”, este post es para ti.

¿Qué problema resuelve Next.js?

En React tradicional, todo el enrutamiento es del lado del cliente. Tú defines las rutas en react-router-dom, y todo se compila en un solo bundle que se entrega al navegador. Esto está bien para SPAs, pero tiene limitaciones:

• Mala optimización para SEO.
• Tiempo de carga inicial alto.
• Falta de control sobre cuándo y cómo se renderizan las páginas.

Next.js resuelve esto con un sistema híbrido de renderizado que permite:

• Renderizado del lado del servidor (SSR).
• Generación estática de páginas (SSG).
• Revalidación incremental (ISR).

¡Todo con enrutamiento basado en archivos!

Sistema de Ruteo en Next.js: pages/ vs app/

Next.js actualmente soporta dos formas de estructurar rutas:

1. pages/ (el sistema clásico)

Cada archivo dentro de pages/ se convierte automáticamente en una ruta. Ejemplo:

pages/
├── index.tsx       → /
├── about.tsx       → /about
└── blog/
    └── [slug].tsx  → /blog/:slug

2. app/ (el nuevo sistema con layouts – App Router)

Introducido desde Next.js 13, usa componentes React Server y tiene soporte más avanzado para layouts anidados, streaming y segmentación.

app/
├── page.tsx             → /
├── about/
│   └── page.tsx         → /about
└── blog/
    └── [slug]/
        └── page.tsx     → /blog/:slug

Ambos sistemas pueden coexistir, pero es recomendable elegir uno. Si usas app/, se recomienda trabajar con React Server Components para sacarle todo el provecho.

Tipos de Renderizado: SSR vs SSG vs ISR

Una de las mayores ventajas de Next.js es decidir cuándo se genera una página.

Static Site Generation (SSG)

La página se genera en tiempo de compilación y se sirve como HTML estático.

// Solo disponible en pages/
export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data } };
}

Ideal para: contenido que no cambia con frecuencia (blogs, landing pages).

Server-Side Rendering (SSR)

La página se genera en cada request, en el servidor.

export async function getServerSideProps(context) {
  const data = await fetchData();
  return { props: { data } };
}

Ideal para: dashboards, contenido personalizado por usuario, datos que cambian en tiempo real.

Incremental Static Regeneration (ISR)

Permite regenerar páginas estáticas en segundo plano tras un periodo definido.

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // segundos
  };
}

Ideal para: ecommerce, listados dinámicos con poco cambio frecuente.

Rutas Dinámicas

Con Next.js puedes crear rutas dinámicas usando corchetes.

Ejemplo en pages/:

pages/
└── product/
    └── [id].tsx → /product/123

Y puedes obtener el parámetro así:

import { useRouter } from 'next/router';

const Product = () => {
  const router = useRouter();
  const { id } = router.query;

  return 
Producto: {id}
;
};

En app/, el enfoque es similar:

app/
└── product/
    └── [id]/
        └── page.tsx

Y en el componente:

export default function Page({ params }: { params: { id: string } }) {
  return 
Producto: {params.id}
;
}

¿Cómo decidir qué usar?

Necesitas…	Usa esto
Página estática que no cambia	getStaticProps (SSG)
Página que cambia frecuentemente	getServerSideProps (SSR)
Página estática con revalidación	ISR (revalidate)
Layouts anidados, streaming, etc.	App Router (app/)
Comenzar rápido sin complicaciones	Pages Router (pages/)

Conclusión

El sistema de enrutamiento y renderizado en Next.js puede parecer intimidante al principio, pero es justamente lo que hace que este framework sea tan poderoso. Poder elegir cómo y cuándo se generan tus páginas te da una ventaja enorme en rendimiento, escalabilidad y SEO.

¿Mi consejo? Comienza con pages/ si eres nuevo, y luego explora app/ cuando estés listo para usar layouts más avanzados y React Server Components.

Recursos adicionales

Documentación oficial de Next.js