Tutte le convenzioni di file e cartelle dell'App Router in una tabella consultabile, un tester che trasforma un percorso di file in app/ nel suo URL e codice verificato per layout, loading ed error.
Nell'App Router, le cartelle dentro app/ diventano segmenti dell'URL e i file speciali danno a ogni segmento la sua UI: page lo rende pubblico, layout lo avvolge, loading aggiunge un fallback Suspense, error aggiunge un error boundary e route serve un'API. Le parentesi quadre rendono i segmenti dinamici, le parentesi tonde raggruppano le route senza cambiare l'URL e un underscore nasconde una cartella.
I file che scriverai più spesso
Le discussioni nei forum sull'App Router chiedono quasi sempre dove va un file e perché non viene rilevato. Questa guida risponde direttamente: cerca tra le convenzioni, digita un percorso di file per vedere l'URL che produce e copia le versioni minime dei file, tutte verificate sulla documentazione attuale di nextjs.org.
Un layout resta montato quando ti sposti tra le sue pagine figlie, quindi stato ed effetti persistono. Un file template sta subito dentro il layout e viene renderizzato di nuovo a ogni navigazione, il che è adatto agli effetti che devono girare a ogni cambio di pagina.
O manca la riga 'use client', perché gli error boundary devono essere Client Component, oppure l'errore avviene nel layout dello stesso segmento, che error.tsx non avvolge. Gli errori nel root layout richiedono global-error.
error, un oggetto Error con un digest opzionale, e retry, che recupera di nuovo i dati e renderizza di nuovo il segmento. La documentazione dice che retry è diventato stabile nella versione 16.3. reset esiste ancora per azzerare l'errore senza recuperare di nuovo i dati, ma di solito si sceglie retry.
Una cartella con underscore è privata e viene ignorata dal routing. Per ottenere un vero segmento di URL che inizia con un underscore, chiama la cartella con %5F, la forma codificata, per esempio %5Fdrafts.
Nella versione 16 la convenzione del file middleware è stata deprecata e rinominata in proxy, quindi i nuovi progetti usano proxy.ts nella radice del progetto (o dentro src) che esporta una funzione proxy. Next.js fornisce un codemod, middleware-to-proxy, che rinomina il file e la funzione.
File, cartelle e file di metadati
Obbligatorio, ed è l'unico posto in cui si scrivono html e body. Ogni pagina viene renderizzata dove si trova children.
params è una Promise, quindi la pagina è async e la attende con await prima di usare slug.
Mostrato subito durante la navigazione mentre la pagina arriva in streaming. Non riceve props.
Deve essere un Client Component. retry recupera di nuovo i dati e renderizza di nuovo il segmento.
Sostituisce il root layout mentre è attivo, quindi porta i propri html e body e non può esportare metadata.
File
UI condivisa per un segmento e i suoi figli; resta montata
File
UI per una route; rende pubblico il segmento
File
Fallback Suspense per il segmento
File
UI mostrata per notFound() e per gli URL senza corrispondenza
File
Error boundary; Client Component
File
UI di errore per il root layout; html e body propri
File
Endpoint API; solo .js o .ts
File
Come un layout ma renderizzato di nuovo a ogni navigazione
File
Fallback per uno slot di parallel route
File
UI per forbidden()
File
UI per unauthorized()
File radice
Proxy delle richieste nella radice del progetto
File radice
Configurazione di OpenTelemetry e della strumentazione
Cartella
Un segmento dell'URL
Cartella
Segmento dinamico
Cartella
Segmento catch-all, una o più parti
Cartella
Catch-all opzionale, corrisponde anche al genitore
Cartella
Route group, escluso dall'URL
Cartella
Cartella privata, ignorata dal routing
Cartella
Slot con nome per le parallel route
Cartella
Intercetta una route allo stesso livello
Cartella
Intercetta una route un livello sopra
Cartella
Intercetta una route due livelli sopra
Cartella
Intercetta una route dalla radice di app
Metadati
Icone dell'app, come immagini o generate con il codice
Metadati
Immagini di condivisione, come file o generate
Metadati
sitemap.xml e robots.txt, statici o generati
Digita un percorso di file dentro app/. Il tester rimuove i route group, legge i segmenti dinamici e ti dice il pattern dell'URL, oppure perché il file non è una route.
Percorso del file
Cerca tra le convenzioni
Cerca
error, slot, group
Filtra per tipo
Tutti
{n} mostrati
Inserisci un percorso come app/blog/[slug]/page.tsx
Non è una route: una cartella che inizia con _ è privata.
Non è una route pubblica. {file} è un file speciale che avvolge la route in questa cartella.
Non è una route pubblica. {file} è un file collocato accanto e non viene mai servito.
i file route devono essere .js o .ts.
{d} è un route group, escluso dall'URL
{d} è uno slot di parallel route, non un segmento dell'URL
{d} corrisponde anche al percorso genitore
{d} è una intercepting route
Endpoint API su {url}
Pagina su {url}
Inizia gratis · Nessuna carta di credito richiesta