💡 Pages vs. App Directory: diferencias y usos

05 - 💡 Pages vs. App Directory: diferencias y usos

Descubre las diferencias clave entre el antiguo sistema pages/ y el nuevo app/ introducido en Next.js 13+. Aprende cuándo utilizar cada uno y cómo migrar tu proyecto correctamente.

• El antiguo sistema: pages/
• El nuevo sistema: app/
• Comparación entre ambos sistemas
• Ejemplo práctico

---

📄 El antiguo sistema: pages/

Antes de la versión 13, Next.js usaba la carpeta pages/ para definir las rutas del proyecto. Cada archivo .js o .tsx dentro de pages/ representaba una ruta.

pages/
 ├─ index.js         → Ruta principal: /
 ├─ about.js         → Ruta: /about
 └─ contact.js       → Ruta: /contact
      

Este enfoque es simple, pero limitado para aplicaciones más grandes, ya que no soporta características modernas como layouts anidados, server components o data fetching optimizado.

🧭 El nuevo sistema: app/

A partir de Next.js 13, se introduce el App Router y la carpeta app/. Esta nueva arquitectura está basada en React Server Components y permite:

• Layouts y sub-layouts automáticos
• Rutas anidadas simples mediante carpetas
• Mejor renderizado del lado del servidor
• Carga progresiva y segmentación de UI
• Mejor integración con React 18 (Suspense y Streaming)

app/
 ├─ layout.js        → Layout principal
 ├─ page.js          → Página raíz (/)
 ├─ about/
 │   ├─ page.js      → Ruta: /about
 │   └─ layout.js    → Layout específico
 └─ contact/
     └─ page.js      → Ruta: /contact
      

⚖️ Comparación entre ambos sistemas

Característica	pages/	app/
Ruteo	Basado en archivos	Basado en carpetas
Layouts anidados	No soportado	✅ Soportado nativamente
Server Components	No	✅ Sí
Data Fetching	getStaticProps, getServerSideProps	Async directamente en componentes
Soporte futuro	En mantenimiento	Recomendado y en desarrollo activo

Ejemplo práctico (Migrando de pages/ a app/)

// Antes (pages/index.js)
export default function Home() {
  return 
Bienvenido a Next.js (versión pages/)
;
}

// Ahora (app/page.js)
export default function Home() {
  return (
    

      
Bienvenido al nuevo Next.js 🚀
      
Usando el App Router y React Server Components
    
  );
}
        

← Volver al índice