import React from 'react';
export default function RootLayout({
children,
modal,
}: {
children: React.ReactNode;
modal: React.ReactNode;
}) {
return (
<html lang="ro">
<body>
<main className="container mx-auto">
{children}
</main>
{modal}
</body>
</html>
);
}Salutare. Am tot văzut pe forum întrebări despre cum facem modale dinamice în App Router, genul ăla de pop-up care are propriul lui URL, dar nu strică starea paginii din spate când dai click pe el. Am implementat asta recent pe un proiect cu vreo 12k imagini și am redus numărul de request-uri inutile la baza de date cu aproape 35% pentru că userii nu mai reîncărcau layout-ul complet când navigau rapid prin galerie.
Înainte, făceam mizeria aia cu query params (?modal=true). Era simplu de implementat, dar dădea destule dureri de cap la SEO și arăta destul de urât în istoric dacă userul voia să navigheze înapoi. Cu Parallel și Intercepting Routes obții comportamentul perfect: dacă dai click pe o poză din homepage, se deschide modalul peste listă, iar URL-ul se schimbă în /photos/42. Dacă dai refresh sau trimiți link-ul unui prieten, se randează direct pagina completă de detalii.
Trade-off-uri de care te lovești rapid
Mărturisesc că prima implementare m-a făcut să-mi pierd răbdarea destul de repede. Structura de foldere devine extrem de stufoasă și greu de citit din cauza convențiilor de denumire. Dacă greșești o singură paranteză la folderul interceptat, Next.js îți dă un 404 silențios la navigare, fără vreun log util în consolă.
Al doilea mare minus este managementul stării. Dacă ai un formular în modalul respectiv și vrei să trimiți un semnal în pagina din spate să facă refetch, nu mai poți pasa simplu un callback prin props. Trebuie să te bazezi pe mecanisme de router refresh, context global sau un state manager extern.
Structura folderelor pe care trebuie să o respecți
Ca să meargă magia, ai nevoie de o structură exactă în folderul app/:
app/layout.tsx-> Layout-ul principal unde injectezi slotul@modal.app/page.tsx-> Pagina de unde pornește navigarea (homepage-ul cu galeria).app/photos/[id]/page.tsx-> Pagina normală, rânduită la refresh.app/@modal/(.)photos/[id]/page.tsx-> Modalul interceptat. Paranteza cu punct(.)îi spune lui Next.js să intercepteze rutaphotos/[id]doar la navigarea pe client.app/@modal/default.tsx-> Fișierul critic care returneazănull. Dacă îl uiți, Next.js va crăpa la refresh pe paginile care nu folosesc modalul.
Implementarea în Layout
Cheia este să prinzi slotul @modal ca prop în layout-ul tău de root. Next.js știe să injecteze acolo componenta potrivită în funcție de ruta activă.
După ce ai layout-ul pus la punct, în folderul interceptat (.)photos/[id]/page.tsx vei crea componenta de modal propriu-zisă. Pentru a-l închide, folosește simplu router.back(). Asta va scoate automat segmentul interceptat din URL și va demonta modalul, aducând userul înapoi în pagina de start.
Voi ce soluție folosiți pentru modale de genul ăsta? Ați rămas pe varianta clasică cu query params sau ați trecut la structura asta nativă din App Router?