# Route groups and nested layouts in the App Router

Folders in parentheses add no URL segment. They split layouts, and nested layouts stay mounted as you navigate. Rules and the traps.

> Page: https://ui.eneawork.it/blog/nextjs-route-groups-layout
> Markdown: https://ui.eneawork.it/blog/nextjs-route-groups-layout.md

*2026-11-01*

Un route group è una cartella tra parentesi che non aggiunge un segmento all'URL: serve a dare a due parti del sito layout e confini diversi. Il layout annidato, invece, resta montato quando navighi e non ri-renderizza.

## La struttura

app/ layout.tsx # root: html, body, font (marketing)/ layout.tsx # public header page.tsx # / pricing/page.tsx # /pricing (app)/ layout.tsx # shell with sidebar dashboard/ layout.tsx # section title and tabs page.tsx # /dashboard settings/page.tsx # /dashboard/settings (auth)/ layout.tsx login/page.tsx # /login

Nessuna delle tre cartelle tra parentesi compare negli URL: /pricing, /dashboard/settings e /login sono gli indirizzi reali. Il gruppo decide solo quale layout avvolge la pagina.

## Cosa fa un layout annidato

Un layout riceve children e resta montato finché la navigazione resta dentro il suo segmento. Passare da /dashboard a /dashboard/settings ri-renderizza la pagina, non la shell: lo stato della sidebar sopravvive.

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

Il layout non riceve searchParams: quelli arrivano solo alla pagina. Se un filtro vive nell'URL e serve anche alla shell, leggi il parametro nella pagina e passalo come prop a un componente client.

## Quando il gruppo serve

## Gli errori che si pagano

Il catalogo EneUI indicizza 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie: numeri misurati il 1 novembre 2026 su /api/stats. Nel dataset dei blocchi 1.422 dei 1.556 portano almeno un file .tsx e arrivano da 28 sorgenti, contati il 31 ottobre 2026 su data/blocks.json.

Per montare i layout servono blocchi, non pagine intere: header, sidebar e footer entrano nel tuo repository e seguono il tuo albero.

La struttura generale è in struttura di un progetto App Router; per i pannelli paralleli c'è route parallele e per l'attesa streaming e Suspense. Il confronto con un altro framework è in Astro vs Next.js.

npx next build

Limite noto: un route group non cambia l'URL né il percorso del file. Se due gruppi dichiarano la stessa rotta, Next.js non sceglie: ferma la build.

## FAQ

### Un route group cambia l'URL?

No. Le parentesi tolgono la cartella dal percorso: pricing dentro (marketing) resta /pricing.

### Posso avere due layout radice?

Sì, se ogni gruppo ha il proprio layout con html e body. Il passaggio da un gruppo all'altro ricarica la pagina per intero, quindi perdi la navigazione client.

### Il layout si ri-renderizza a ogni navigazione?

No, finché resti dentro il suo segmento. Cambia quando la navigazione esce dal layout o quando il dato condiviso viene invalidato sul server.

### Dove metto il controllo di sessione?

Nella pagina o in un componente server chiamato dalla pagina. Nel layout costa una query anche per le rotte che non lo usano.

### Le route group funzionano con le parallel routes?

Sì, uno slot può stare dentro un gruppo. Il gruppo decide il layout, lo slot decide il pannello: sono due assi diversi.