Routing avanzado en Next.js: más allá de lo básico con App Router

👋 ¡Bienvenido de nuevo!
Este artículo es la segunda parte de nuestra guía sobre routing con App Router en Next.js.
Si aún no has leído la primera parte, te recomendamos que empieces por allí para tener una base sólida.

En esta ocasión, abordaremos temas más avanzados y prácticos, pero igualmente importantes. Entender estos conceptos puede desbloquear muchas posibilidades en tus implementaciones, así que ¡vamos a ello!

• Routing avanzado en Next.js: más allá de lo básico con App Router
  • 🧱 Route Groups
  • 🔀 Parallel Routes
    • default.tsx
  • 👀 Rutas condicionales
  • 🎯 Intercepting Routes
  • 🛡️ Middleware
  • 🔁 Redirecciones en Next.js
  • 🧠 Conclusión

🧱 Route Groups

Los Route Groups te permiten estructurar directorios sin que estos afecten la URL final.

📁 Ejemplo:

app/
├── page.tsx
├── (dashboard)/
│   ├── layout.tsx
│   ├── admin/page.tsx
│   └── users/page.tsx

En este caso, /admin y /users no incluyen el segmento (dashboard) en la URL. Sin embargo, comparten el layout dashboard/layout.tsx.

✅ Ideal para agrupar rutas con diseño común sin modificar la ruta visible.

🔀 Parallel Routes

Las rutas en paralelo permiten renderizar múltiples vistas dentro del mismo layout.

📁 Estructura:

app/
├── dashboard/
│   ├── layout.tsx
│   ├── @team/page.tsx
│   └── @analytics/page.tsx

🧩 En layout.tsx puedes recibir varios componentes simultáneamente:

const DashboardLayout = ({ children, team, analytics }) => (
  <>
    {team}
    {analytics}
    {children}
  </>
)

👉 Se utiliza comúnmente para paneles con contenido y sidebar simultáneos.

default.tsx

Sirve como fallback cuando no hay un page.tsx correspondiente.
Sin este archivo, se mostrará una página 404.

👀 Rutas condicionales

Puedes renderizar diferentes vistas en función del contexto:

export default function Layout({ user, admin }) {
  const role = checkUserRole()
  return <>{role === 'admin' ? admin : user}</>
}

Muy útil para gestionar interfaces según el rol del usuario.

🎯 Intercepting Routes

Las rutas interceptadas permiten mostrar vistas de otras rutas sin navegación completa.

💡 Ejemplo clásico: mostrar un post en un modal desde la lista de publicaciones.

📁 Estructura:

app/
├── todos/
│   ├── page.tsx
│   ├── layout.tsx
│   └── @modal/
│       ├── default.tsx
│       └── (..)todo/view/[id]/page.tsx
├── todo/view/[id]/page.tsx

🔁 Esto permite:

• Mantener la URL sincronizada
• Mostrar modales contextuales
• Navegar sin perder el estado del layout principal

🛡️ Middleware

Los middlewares se ejecutan antes de que la petición sea procesada.

📍 Se definen en middleware.ts y permiten:

• Redirigir usuarios no autenticados
• Restringir accesos
• Aplicar lógica previa a la carga de página

📌 Ejemplo:

export function middleware(request) {
  const isAuth = checkAuth(request)
  return isAuth ? NextResponse.next() : NextResponse.redirect('/login')
}

Con matcher, puedes definir qué rutas deben aplicar este middleware.

🔁 Redirecciones en Next.js

Next.js ofrece varias formas de redirigir:

📌 Ejemplo con useRouter:

const router = useRouter()
router.push('/dashboard')

📌 Ejemplo en next.config.js:

redirects: () => [
  {
    source: '/about',
    destination: '/',
    permanent: true,
  },
]

🧠 Conclusión

En esta segunda parte, exploramos características avanzadas del sistema de routing de Next.js:

• Route Groups para estructura sin afectar URLs
• Parallel Routes para vistas simultáneas
• Intercepting Routes para modales sin navegación
• Middleware y redirecciones flexibles

Estas herramientas te permiten crear aplicaciones sofisticadas y con gran rendimiento.
Sigue explorando y ¡saca el máximo provecho del App Router de Next.js!

¿Te perdiste la primera parte?
👉 Routing básico con Next.js: Guía para principiantes