Elke bestands- en mapconventie van de App Router in één doorzoekbare tabel, een padtester die een app/-bestandspad omzet in de bijbehorende URL, en gecontroleerde code voor layout, loading en error.
In de App Router worden mappen binnen app/ URL-segmenten en geven speciale bestanden elk segment zijn UI: page maakt het openbaar, layout omhult het, loading voegt een Suspense-fallback toe, error voegt een error boundary toe en route levert een API. Vierkante haken maken segmenten dynamisch, ronde haken groeperen routes zonder de URL te veranderen, en een underscore verbergt een map.
De bestanden die u het vaakst schrijft
Forumdiscussies over de App Router gaan meestal over waar een bestand hoort en waarom het niet wordt opgepikt. Dit overzicht beantwoordt dat direct: doorzoek de conventies, typ een bestandspad om de URL te zien die het oplevert, en kopieer minimale versies van de bestanden, allemaal gecontroleerd tegen de actuele documentatie op nextjs.org.
Een layout blijft gemount wanneer u tussen de onderliggende pagina's navigeert, zodat state en effects behouden blijven. Een template-bestand zit direct binnen de layout en wordt bij navigatie opnieuw gerenderd, wat handig is voor effects die bij elke paginawissel moeten draaien.
Ofwel ontbreekt de regel 'use client', want error boundaries moeten Client Components zijn, ofwel ontstaat de fout in de layout van hetzelfde segment, die error.tsx niet omhult. Fouten in de root layout vereisen global-error.
error, een Error-object met een optionele digest, en retry, dat het segment opnieuw ophaalt en rendert. Volgens de documentatie werd retry stabiel in versie 16.3. reset bestaat nog om de fout te wissen zonder opnieuw op te halen, maar retry is de gebruikelijke keuze.
Een map met een underscore is privé en wordt door de routing genegeerd. Voor een echt URL-segment dat met een underscore begint, geeft u de map een naam met %5F, de gecodeerde vorm, bijvoorbeeld %5Fdrafts.
In versie 16 werd de middleware-bestandsconventie afgeschaft en hernoemd naar proxy, dus nieuwe projecten gebruiken proxy.ts in de projectroot (of in src) met een geëxporteerde proxy-functie. Next.js levert een codemod, middleware-to-proxy, die het bestand en de functie hernoemt.
Bestanden, mappen en metadatabestanden
Verplicht, en de enige plek waar html en body worden geschreven. Elke pagina wordt gerenderd op de plek van children.
params is een Promise, dus de pagina is async en wacht erop met await voordat slug wordt gebruikt.
Wordt meteen getoond bij navigatie terwijl de pagina binnenstroomt. Krijgt geen props.
Moet een Client Component zijn. retry haalt het segment opnieuw op en rendert het opnieuw.
Vervangt de root layout zolang het actief is, dus het brengt eigen html en body mee en kan geen metadata exporteren.
Bestand
Gedeelde UI voor een segment en zijn kinderen; blijft gemount
Bestand
UI voor een route; maakt het segment openbaar
Bestand
Suspense-fallback voor het segment
Bestand
UI voor notFound() en URL's zonder match
Bestand
Error boundary; Client Component
Bestand
Fout-UI voor de root layout; eigen html en body
Bestand
API-endpoint; alleen .js of .ts
Bestand
Zoals een layout, maar opnieuw gerenderd bij navigatie
Bestand
Fallback voor een parallel route slot
Bestand
UI voor forbidden()
Bestand
UI voor unauthorized()
Rootbestand
Request-proxy in de projectroot
Rootbestand
Instelling voor OpenTelemetry en instrumentatie
Map
Een URL-segment
Map
Dynamisch segment
Map
Catch-all segment, één of meer delen
Map
Optionele catch-all, matcht ook de ouder
Map
Route group, niet opgenomen in de URL
Map
Privémap, genegeerd door de routing
Map
Benoemd slot voor parallel routes
Map
Onderschept een route op hetzelfde niveau
Map
Onderschept een route een niveau hoger
Map
Onderschept een route twee niveaus hoger
Map
Onderschept een route vanaf de app-root
Metadata
App-iconen, als afbeeldingen of met code gegenereerd
Metadata
Deelafbeeldingen, als bestanden of gegenereerd
Metadata
sitemap.xml en robots.txt, statisch of gegenereerd
Typ een bestandspad binnen app/. De tester laat route groups weg, leest dynamische segmenten en vertelt u het URL-patroon, of waarom het bestand geen route is.
Bestandspad
Doorzoek de conventies
Zoeken
error, slot, group
Filter op soort
Alle
{n} getoond
Voer een pad in zoals app/blog/[slug]/page.tsx
Geen route: een map die met _ begint is privé.
Geen openbare route. {file} is een speciaal bestand dat de route in deze map omhult.
Geen openbare route. {file} is een meegeplaatst bestand en wordt nooit geserveerd.
route-bestanden moeten .js of .ts zijn.
{d} is een route group, niet opgenomen in de URL
{d} is een parallel route slot, geen URL-segment
{d} matcht ook het bovenliggende pad
{d} is een onderscheppende route
API-endpoint op {url}
Pagina op {url}
Gratis beginnen · Geen creditcard nodig