dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
NEX Toate comenzile Next.js

Rute paralele (@slot) și interceptate – Dashboard-uri avansate și ferestre modale în Next.js

Structură App Router și Fișiere Speciale Next.js 13.3+

Permite randarea simultană sau condiționată a mai multor pagini în cadrul aceluiași layout și afișarea de modale cu URL propriu.

Sintaxă 
app/@analize/page.tsx
app/@utilizatori/page.tsx
app/layout.tsx -> ({ analize, utilizatori })

Ce face Rute paralele (@slot) și interceptate - Dashboard-uri avansate și ferestre modale

Rutele paralele sunt create folosind foldere denumite cu simbolul `@` (de exemplu `@analytics` și `@team`). Ele sunt transmise ca proprietăți props directe către fișierul `layout.tsx` părinte.

Permite streaming independent: fiecare slot își poate avea propriul `loading.tsx` și `error.tsx` fără a bloca celelalte panouri din ecran.

Combinate cu rutele interceptate `(.)fotografie/[id]`, permit crearea de ferestre modale avansate care pot fi partajate prin link direct sau reîmprospătate cu F5.

Exemple

Exemplul 1: Consumarea a două sloturi paralele în dashboard layout

Randează două secțiuni independente de date simultan.

export default function DashboardLayout({
  children,
  statistici,
  notificari,
}: {
  children: React.ReactNode;
  statistici: React.ReactNode;
  notificari: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-3 gap-6">
      <div className="col-span-2">{children}</div>
      <div className="space-y-6">
        {statistici}
        {notificari}
      </div>
    </div>
  );
}

Ieșire în terminal

Ambele componente sunt randate în paralel cu timpi de încărcare independenți.

Greșeli frecvente

  • Omiterea fișierului ‘default.tsx’ în sloturile paralele; la o navigare pe care slotul nu o acoperă, Next.js poate afișa 404 fără un fișier fallback default.

Comenzi înrudite