Next.js 43: Rutas paralelas (@slot)
easy⏱ 5 mincoursenextjs
@carpeta = un slot con nombre
@analytics y @team son slots, no segmentos de URL — no aparecen en la ruta. El layout que los contiene recibe children (el page.tsx por defecto) más una prop por cada slot. Next.js renderiza todos juntos y gestiona los límites de carga/error por slot.
app/dashboard/
layout.tsx // receives { children, analytics, team }
page.tsx
@analytics/
page.tsx
@team/
page.tsx
// app/dashboard/layout.tsx
export default function Layout({
children,
analytics,
team,
}: {
children: React.ReactNode;
analytics: React.ReactNode;
team: React.ReactNode;
}) {
return (
<>
{children}
<div className="grid">
{analytics}
{team}
</div>
</>
);
}
Demuestra la independencia
Haz clic en Refresh analytics y en Refresh team por separado. Observa que el estado de carga de un slot nunca afecta el contenido renderizado del otro — ese es el punto de las rutas paralelas: sub-páginas independientes y simultáneas dentro de un mismo layout.
Los slots necesitan un default.tsx de respaldo
Si navegas a algo que solo coincide con la ruta de un slot (por ejemplo, vía un Link dentro de @team), Next.js necesita saber qué renderizar para @analytics en esa URL. Agrega un default.tsx en cada carpeta de slot — sin él, Next.js recurre a un 404 para el slot que no coincide.