0Pricing
Frontend Academy · Lección

Pages Router frente a App Router

Compare los paradigmas de enrutamiento de Next.js: el Pages Router basado en archivos y el nuevo App Router, con layouts anidados, estados de carga y límites de errores.

Pages Router frente a App Router es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Dos routers, un framework

Next.js tiene dos sistemas de enrutamiento: el Pages Router original (directorio pages/) y el nuevo App Router (directorio app/, Next 13+). Ambos siguen funcionando en Next 14/15.

Pages Router — Enrutamiento basado en archivos

Cada archivo dentro de pages/ se convierte en una ruta. Los segmentos dinámicos usan corchetes: pages/users/[id].tsx coincide con /users/123.

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Pages Router — Obtención de datos

Las exportaciones especiales declaran el comportamiento de obtención de datos: getStaticProps (SSG), getServerSideProps (SSR), getStaticPaths (SSG con rutas dinámicas).

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — Enrutamiento basado en carpetas

App Router usa carpetas como segmentos de ruta. Un archivo page.tsx dentro de una carpeta define la página.

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — Archivos especiales

Los archivos de cada segmento proporcionan primitivas potentes: layout.tsx (UI persistente alrededor de los hijos), loading.tsx (fallback de Suspense), error.tsx (límite de errores) y not-found.tsx.

Layouts anidados

Los layouts de App Router envuelven las rutas anidadas y persisten durante la navegación; no se vuelven a montar.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

Obtención de datos en App Router

Los Server Components pueden ser asíncronos y obtener datos directamente; no necesitan getServerSideProps/getStaticProps. El componente se ejecuta en el servidor y solo envía HTML al cliente.

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

Client Components en App Router

Añada 'use client' al principio de un archivo para marcar su componente como Client Component (interactivo y ejecutado en el navegador).

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Rutas de API frente a Route Handlers

Pages Router: pages/api/users.ts exporta una función predeterminada con req/res. App Router: app/api/users/route.ts exporta métodos HTTP (GET, POST) como exportaciones con nombre mediante Request/Response estándar.

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

Estrategia de migración

Ambos routers pueden coexistir en el mismo proyecto; mueva las páginas gradualmente, una por una. App Router tiene prioridad cuando existe un conflicto.

Cuándo usar cada uno

Proyectos nuevos: App Router (más potente y foco actual de inversión). Proyectos existentes con Pages Router: manténgalo o migre gradualmente. Sitios estáticos pequeños sin necesidad de layouts ni RSC: cualquiera de los dos funciona.

Comprobación rápida

¿Cómo se marca un componente como componente de cliente en el App Router de Next.js?

Resumen: Pages Router frente a App Router

Pages Router: basado en archivos, getStaticProps/getServerSideProps. App Router (Next 13+): basado en carpetas, componentes de servidor asíncronos, diseños anidados y archivos de carga o error. Marque la interactividad del cliente con 'use client'. Rutas de API: pages/api/* frente a app/api/*/route.ts, con exportaciones de métodos HTTP. Ambos pueden coexistir; el desarrollo activo se centra en App Router.

Preguntas frecuentes

¿La lección «Pages Router frente a App Router» es gratis?

Sí — el texto completo de «Pages Router frente a App Router» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Pages Router frente a App Router»?

Compare los paradigmas de enrutamiento de Next.js: el Pages Router basado en archivos y el nuevo App Router, con layouts anidados, estados de carga y límites de errores. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Pages Router frente a App Router»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Pages Router frente a App Router
  2. Componentes de servidor y componentes de cliente
  3. SSG, SSR e ISR
  4. Rutas de API y middleware de Next.js
← Volver a Frontend Academy