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:

code
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:

code
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:

code
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:

code
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.

AnteriorInstalacionSiguientePages y Layouts