Routing in Next.js: Come funziona davvero (e perché è geniale)

Il routing è il cuore di ogni applicazione web. È ciò che collega un URL a un componente, una pagina o un’azione del server. In Next.js, il routing non è solo una funzionalità: è un paradigma architetturale. Dimentica le configurazioni manuali, le rotte scritte a mano o i file infiniti di setup: Next.js basa tutto sulla struttura delle cartelle. Il filesystem è la mappa dell’applicazione.

Con l’introduzione del nuovo App Router (introdotto con Next.js 13 e ormai standard nelle versioni attuali), il framework ha rivoluzionato il modo in cui si gestiscono le pagine, le rotte dinamiche, il rendering lato server e la navigazione client-side. Oggi, creare un’app complessa in Next.js è questione di organizzazione, non di configurazione.

App Router e struttura base del progetto

Le rotte ora si definiscono nella cartella app/, non più in pages/. Ogni sottocartella rappresenta automaticamente una rotta, e ogni file page.js (o .tsx) diventa una pagina renderizzata.

Esempio base di struttura:

Le URL generate saranno:

• / → app/page.js

• /about → app/about/page.js

• /blog → app/blog/page.js

• /blog/[slug] → app/blog/[slug]/page.js

• /contact → app/contact/page.js

Tutto automatico. Niente file di routing, niente configurazione extra.

Rotte dinamiche e segmenti parametrici

I parametri dinamici sono una delle armi più potenti del sistema di routing di Next.js. Basta usare le parentesi quadre nel nome della cartella per definire un parametro.

Esempio:

Questo genera rotte come:

All’interno del file, puoi accedere al parametro in modo semplice:

Puoi anche usare parametri multipli o annidati:

→ URL come /products/elettronica/123 o /products/abbigliamento/456.

E per rotte “catch-all”, usa [...slug] (cattura più segmenti) o [[...slug]] (segmento opzionale).

Layout e gerarchia di rendering

Una delle differenze fondamentali rispetto al vecchio sistema pages/ è la presenza dei layout annidati. Ogni cartella può avere un file layout.js che definisce l’interfaccia persistente per quella sezione dell’app (header, sidebar, menu, ecc.).

Questo significa che:

• app/layout.js gestisce il layout principale (es. header e footer globali)

• app/blog/layout.js aggiunge elementi specifici per la sezione blog (es. menù laterale, breadcrumb)

• app/blog/[slug]/page.js si concentra solo sul contenuto del post

Esempio di layout:

I layout sono server components per default, ottimizzati e condivisi tra pagine.

Navigazione client-side con Link e useRouter

La navigazione tra pagine è istantanea grazie al componente Link di Next.js, che pre-carica le pagine in background per rendere il passaggio fluido.

Per navigare via codice (senza clic), puoi usare l’hook useRouter:

Server Actions e API Routes

Con l’App Router, Next.js unifica il concetto di backend e frontend.
Non c’è più bisogno di pages/api come in passato: puoi definire server actions direttamente nei componenti server-side.

Esempio:

Questo codice esegue la logica sul server, non nel browser — niente fetch, niente API esterne: Next.js gestisce tutto automaticamente.

Ovviamente, puoi ancora usare la cartella app/api/ per definire endpoint REST:

→ disponibile su /api/posts

Rendering: SSG, SSR e ISR

Il routing in Next.js è profondamente connesso al modello di rendering. Ogni pagina può essere generata in modo diverso:

• Static Generation (SSG): HTML pre-generato in fase di build

• Server-Side Rendering (SSR): HTML generato a ogni richiesta

• Incremental Static Regeneration (ISR): statico, ma aggiornabile in background

Nel nuovo App Router, puoi gestire questi comportamenti con le funzioni generateStaticParams e revalidate.

Esempio per generare articoli statici aggiornabili ogni 10 secondi:

Questo unisce il meglio di entrambi i mondi: performance da sito statico e freschezza dei dati server-side.

Rotte parallele e Intercepting Routes

Le versioni più recenti di Next.js introducono concetti avanzati come rotte parallele (@segment) e intercepting routes, che permettono di visualizzare più sezioni o modali contemporaneamente senza rompere la gerarchia di navigazione.
Ad esempio, puoi aprire un dettaglio di prodotto come modale sopra la pagina principale senza uscire dal contesto corrente — tutto gestito dal router.

Conclusione

Il routing di Next.js 15 non è solo un sistema di navigazione, ma un ecosistema completo per costruire applicazioni React moderne, modulari e performanti.
Con un approccio file-based, il router diventa una mappa logica del progetto, integrando routing, layout, rendering e logica server in un unico flusso coerente.

Che tu stia creando un semplice blog o una piattaforma enterprise, l’App Router di Next.js ti permette di farlo in modo chiaro, scalabile e immediato, riducendo al minimo la configurazione e massimizzando la produttività.

Next.js non ti fa solo scrivere meno codice: ti costringe a scriverlo meglio.