Documentación

Routing: Fundamentos

NextJS usa un sistema de rutas basado en archivos. Cada carpeta dentro de app/ puede ser una ruta si tiene un page.tsx.

Convenciones de archivos

ArchivoPara que sirve
page.tsxDefine la UI de la ruta. Sin este archivo, la ruta no existe
layout.tsxEnvuelve a las paginas hijas. Persiste entre navegaciones
loading.tsxUI de carga (se muestra mientras el contenido carga)
error.tsxUI de error (captura errores de la ruta)
not-found.tsxUI para 404
route.tsAPI endpoint (no puede coexistir con page.tsx)

Crear rutas

Cada carpeta con un page.tsx es una ruta:

plaintext
app/
├── page.tsx              → /
├── blog/
│   └── page.tsx          → /blog
├── productos/
│   ├── page.tsx          → /productos
│   └── [id]/
│       └── page.tsx      → /productos/123
└── contacto/
    └── page.tsx          → /contacto
tsx
// app/blog/page.tsx
export default function BlogPage() {
  return (
    <div>
      <h1>Blog</h1>
      <p>Lista de articulos</p>
    </div>
  )
}

Route Groups

Si quieres organizar carpetas sin que afecten la URL, usa parentesis:

plaintext
app/
├── (marketing)/
│   ├── page.tsx          → /
│   ├── about/
│   │   └── page.tsx      → /about
│   └── layout.tsx        # Layout solo para marketing
├── (dashboard)/
│   ├── panel/
│   │   └── page.tsx      → /panel
│   └── layout.tsx        # Layout solo para dashboard

Las carpetas (marketing) y (dashboard) no aparecen en la URL, pero te permiten tener layouts separados.

Ejemplo real: e-commerce

Un e-commerce tipico organizado con route groups:

plaintext
app/
├── (tienda)/
│   ├── layout.tsx            # Header con carrito + footer
│   ├── page.tsx              → /  (landing)
│   ├── productos/
│   │   ├── page.tsx          → /productos
│   │   └── [slug]/
│   │       └── page.tsx      → /productos/camiseta-azul
│   └── carrito/
│       └── page.tsx          → /carrito
├── (admin)/
│   ├── layout.tsx            # Sidebar de admin
│   ├── dashboard/
│   │   └── page.tsx          → /dashboard
│   └── inventario/
│       └── page.tsx          → /inventario
└── (auth)/
    ├── layout.tsx            # Layout centrado, sin nav
    ├── login/
    │   └── page.tsx          → /login
    └── registro/
        └── page.tsx          → /registro

Tres areas del sitio, tres layouts distintos, cero complejidad en las URLs.

Carpetas sin ruta

Si una carpeta no tiene page.tsx, no genera ruta. Esto es util para organizar componentes:

plaintext
app/
├── blog/
│   ├── page.tsx           # Esta SI es una ruta
│   ├── _components/       # Esta NO es una ruta
│   │   ├── PostCard.tsx
│   │   └── SearchBar.tsx
│   └── [slug]/
│       └── page.tsx

El prefijo _ es una convencion comun pero no es obligatorio. Lo importante es que no tenga page.tsx.