Fundamentos de Routing

El routing en NextJS 15 usa el App Router, un sistema basado en el sistema de archivos donde las carpetas definen las rutas de tu aplicación.

Cómo funciona el routing

En NextJS, las rutas se crean automáticamente basándose en la estructura de carpetas dentro de app/:

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

Creando tu primera ruta

export default function AboutPage() {
  return <h1>Sobre Nosotros</h1>
}

¡Eso es todo! NextJS automáticamente crea la ruta.

Rutas anidadas

Puedes crear rutas anidadas simplemente anidando carpetas:

app/
└── dashboard/
    ├── page.tsx               → /dashboard
    ├── analytics/
    │   └── page.tsx           → /dashboard/analytics
    ├── settings/
    │   └── page.tsx           → /dashboard/settings
    └── users/
        ├── page.tsx           → /dashboard/users
        └── [id]/
            └── page.tsx       → /dashboard/users/:id

Cada page.tsx define el contenido de esa ruta específica.

Archivos especiales de routing

NextJS reconoce varios archivos especiales en cada carpeta:

page.tsx - Contenido de la ruta

// app/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h1>Sobre Nosotros</h1>
      <p>Información de la empresa...</p>
    </div>
  )
}

layout.tsx - Layout compartido

Los layouts se comparten entre rutas hijas:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      <nav>{/* Sidebar del dashboard */}</nav>
      <main>{children}</main>
    </div>
  )
}

Este layout se aplicará a todas las rutas dentro de /dashboard/*.

loading.tsx - UI de carga

// app/dashboard/loading.tsx
export default function Loading() {
  return <div>Cargando dashboard...</div>
}

Se muestra automáticamente mientras la página carga.

error.tsx - Manejo de errores

// app/dashboard/error.tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div>
      <h2>Algo salió mal!</h2>
      <button onClick={reset}>Intentar de nuevo</button>
    </div>
  )
}

not-found.tsx - Página 404

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>Página no encontrada</h2>
      <p>No pudimos encontrar lo que buscas</p>
    </div>
  )
}

Jerarquía de archivos

NextJS renderiza los archivos en este orden:

layout.tsx
  ├─ loading.tsx (mientras carga)
  ├─ page.tsx (contenido)
  └─ error.tsx (si hay error)

Los layouts son persistentes y no se vuelven a renderizar al navegar.

Rutas dinámicas (básico)

Usa corchetes [] para crear segmentos dinámicos:

app/
└── blog/
    └── [slug]/
        └── page.tsx           → /blog/cualquier-cosa

// app/blog/[slug]/page.tsx
export default function BlogPost({
  params,
}: {
  params: { slug: string }
}) {
  return <h1>Post: {params.slug}</h1>
}

Ejemplos:

• /blog/mi-primer-post → params.slug = "mi-primer-post"
• /blog/hello-world → params.slug = "hello-world"

Route Groups (Organización)

Usa paréntesis () para organizar rutas sin afectar la URL:

app/
├── (marketing)/
│   ├── about/
│   │   └── page.tsx           → /about
│   └── contact/
│       └── page.tsx           → /contact
└── (shop)/
    ├── products/
    │   └── page.tsx           → /products
    └── cart/
        └── page.tsx           → /cart

Los grupos (marketing) y (shop) NO aparecen en la URL. Son solo para organización.

Navegación entre rutas

Link Component

Usa el componente Link de Next.js para navegar:

import Link from 'next/link'

export default function Nav() {
  return (
    <nav>
      <Link href="/">Inicio</Link>
      <Link href="/about">Sobre Nosotros</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  )
}

Programáticamente

Usa useRouter para navegación programática:

'use client'

import { useRouter } from 'next/navigation'

export default function Button() {
  const router = useRouter()
  
  return (
    <button onClick={() => router.push('/dashboard')}>
      Ir al Dashboard
    </button>
  )
}

Metadata por ruta

Cada page.tsx puede exportar metadata para SEO:

// app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Sobre Nosotros',
  description: 'Información sobre nuestra empresa',
}

export default function AboutPage() {
  return <h1>Sobre Nosotros</h1>
}

NextJS usa esta metadata para generar las etiquetas <head> automáticamente.

Reglas importantes

1. Nombres de archivo: Los archivos especiales (page, layout, etc.) deben usar estos nombres exactos
2. Case sensitive: Las rutas son sensibles a mayúsculas en producción
3. Caracteres especiales: Evita espacios y caracteres especiales en nombres de carpetas
4. Guiones: Usa guiones - para separar palabras: mi-pagina no mi_pagina

Próximos pasos

Profundiza en temas específicos de routing:

1. Definiendo Rutas - Rutas avanzadas
2. Pages y Layouts - Layouts anidados
3. Linking y Navegación - Navegación avanzada
4. Dynamic Routes - Rutas con parámetros