Route parallele e slot nell'App Router

Una route parallela è uno slot con nome: `@analytics` dentro `app/dashboard/` si renderizza nella stessa pagina, ma con il suo `loading.tsx` e il suo `error.tsx`. Serve per pannelli indipendenti e per modali che hanno un URL.

La struttura minima

app/
  dashboard/
    layout.tsx
    page.tsx
    @analytics/
      page.tsx
      loading.tsx
      default.tsx
    @team/
      page.tsx
      default.tsx

La cartella con la chiocciola non aggiunge un segmento all'URL: `/dashboard` resta `/dashboard`. Cambia solo il numero di cose che il `layout` riceve e può comporre.

Il layout riceve gli slot come props

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    
      {children}
      {analytics}
      {team}
    
  );
}

`children` è lo slot implicito: la `page.tsx` della cartella. Gli altri slot hanno il nome della cartella, senza la chiocciola. Se non passi uno slot al layout, quel contenuto non compare e nessuno se ne accorge.

A cosa servono davvero

• Dashboard con pannelli che caricano a tempi diversi: ogni slot ha il suo confine di attesa.
• Modale con URL condivisibile, combinando lo slot con una route intercettata.
• Tab che mantengono lo stato quando l'utente cambia sezione.
• Due viste della stessa pagina, una per il team e una per il cliente, senza duplicare il layout.

Per lo stato attivo c'è `useSelectedLayoutSegment`, che accetta il nome dello slot. Funziona solo in un client component: sul server il segmento non esiste come hook.

// app/dashboard/@team/team-tabs.tsx
"use client";

import { useSelectedLayoutSegment } from "next/navigation";

export function TeamTabs() {
  const segment = useSelectedLayoutSegment("team");
  return {segment ?? "overview"};
}

Il vincolo che rompe i deploy

Ogni slot ha bisogno di un `default.tsx`, altrimenti una navigazione diretta a un URL che non matcha quello slot restituisce 404. La navigazione soft lo nasconde: il bug compare al refresh o al primo accesso da un link.

// app/dashboard/@analytics/default.tsx
export default function AnalyticsDefault() {
  return null;
}

Il numero che conta

Il catalogo EneUI indicizza 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati il 1 novembre 2026 su `/api/stats`. Per comporre gli slot servono tre categorie: tabs, blocchi dashboard e modal.

Lo slot eredita i confini di attesa: leggi streaming e Suspense nell'App Router. Per il fallimento isolato c'è error boundary nell'App Router. Per la struttura generale la struttura di un progetto App Router. Per il confronto con un altro framework Astro vs Next.js.

Limite noto: uno slot non è una route. Non puoi linkare `/dashboard/@analytics`, e non puoi annidare uno slot dentro un altro slot oltre il livello del layout che li dichiara.