X'inhuma l-mogħdijiet paralleli u l-mogħdijiet li jintercettaw?

Question

Accepted Answer

Dawn huma żewġ features avvanzati tal-App Router għal layouts UI sofistikati. Huma jaqsmu s-sintassi tal-konvenzjoni tal-folder. ## Mogħdijiet Paralleli (@folder) — render multipli pages f'layout wieħed Mogħdijiet paralleli jippermettu layout wieħed li jrender **multipli "slots" tar-routes indipendenti simultaneously**, kull wieħed bil-każ tal-loading/error tiegħu. Int tiddefinisci slots bl-foldersm `@name`: ```text app/ layout.tsx @team/page.tsx → a slot @analytics/page.tsx → another slot ``` ```tsx // app/layout.tsx — slots are passed as named props export default function Layout({ children, team, // ← @team slot analytics, // ← @analytics slot }: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) { return <>

{children} ; } ``` Kull slot jinnaviga u jitload **indipendentement** — perfett għal **dashboards** fejn il-panels jiġu aġġornati separatament, jew juri żewġ sections simultaneament. ## Mogħdijiet li Jintercettaw ((.)folder) — overlay route mingħajr ma tilħaq il-page preżenti Mogħdijiet li jintercettaw jippermettuk "taqbad" navigazzjoni u jerrenderiha **fil-context preżenti** (eż. modal) minflok full page — li għad iżomm URL reali u shareable. ```text app/feed/page.tsx app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed app/photo/[id]/page.tsx → the full page (on direct visit / refresh) ``` ```text Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123 Refresh or share that URL → renders the FULL photo page (no interception) ``` I-markers ta' intercettazzjoni (`(.)` istess level, `(..)` wieħed up, `(...)` root) jikontrollau x'segment jiġi intercettat. Din hija eżattament kif taħdem il-pattern ta' Instagram-style "photo tiftaħ f'modal imma għandha URL tiegħa". ## Għaliex Hija Importanti Mogħdijiet paralleli jippermettu complex, independently-loading multi-pane layouts (dashboards) b'mod clean; mogħdijiet li jintercettaw jipprovdu l-pattern "modal b'URL reali" (shareable, refresh-safe, back-button-friendly) li għall-kuntrast hija diffiċli biex tinbena. Huma avvanzati, iżda jsolvu real UX problems — independent panels u contextual overlays — li qabel kienu jridu significant manual routing/state work.