Alle Datei- und Ordnerkonventionen des App Routers in einer durchsuchbaren Tabelle, ein Pfadtester, der einen app/-Dateipfad in seine URL umwandelt, und geprüfter Code für layout, loading und error.
Im App Router werden Ordner innerhalb von app/ zu URL-Segmenten, und spezielle Dateien geben jedem Segment seine UI: page macht es öffentlich, layout umschließt es, loading ergänzt einen Suspense-Fallback, error eine Error Boundary, und route liefert eine API. Eckige Klammern machen Segmente dynamisch, runde Klammern gruppieren Routen, ohne die URL zu ändern, und ein Unterstrich versteckt einen Ordner.
Die Dateien, die du am häufigsten schreibst
Forenthreads zum App Router fragen meist, wohin eine Datei gehört und warum sie nicht erkannt wird. Dieser Spickzettel beantwortet das direkt: Durchsuche die Konventionen, tippe einen Dateipfad ein, um die erzeugte URL zu sehen, und kopiere minimale Versionen der Dateien, alles geprüft gegen die aktuelle Dokumentation auf nextjs.org.
Ein Layout bleibt gemountet, wenn du zwischen seinen Unterseiten wechselst, sodass State und Effects erhalten bleiben. Eine template-Datei sitzt direkt innerhalb des Layouts und wird bei Navigation neu gerendert. Das passt zu Effects, die bei jedem Seitenwechsel laufen sollen.
Entweder fehlt die Zeile 'use client', denn Error Boundaries müssen Client Components sein, oder der Fehler passiert im Layout desselben Segments, das error.tsx nicht umschließt. Fehler im Root-Layout brauchen global-error.
error, ein Error-Objekt mit optionalem digest, und retry, das das Segment neu abruft und neu rendert. Laut Dokumentation wurde retry in Version 16.3 stabil. reset gibt es weiterhin, um den Fehler ohne erneutes Abrufen zurückzusetzen, aber retry ist die übliche Wahl.
Ein Ordner mit Unterstrich ist privat und wird vom Routing ignoriert. Für ein echtes URL-Segment mit Unterstrich am Anfang benennst du den Ordner mit %5F, der codierten Form, zum Beispiel %5Fdrafts.
In Version 16 wurde die Dateikonvention middleware als veraltet markiert und in proxy umbenannt. Neue Projekte nutzen daher proxy.ts im Projekt-Root (oder in src), das eine proxy-Funktion exportiert. Next.js liefert einen Codemod, middleware-to-proxy, der Datei und Funktion umbenennt.
Dateien, Ordner und Metadaten-Dateien
Pflicht und die einzige Stelle, an der html und body geschrieben werden. Jede Seite wird dort gerendert, wo children steht.
params ist ein Promise, daher ist die Seite async und wartet darauf, bevor sie slug verwendet.
Wird bei Navigation sofort angezeigt, während die Seite hereinstreamt. Erhält keine Props.
Muss eine Client Component sein. retry ruft das Segment neu ab und rendert es neu.
Ersetzt das Root-Layout, solange es aktiv ist, bringt daher eigenes html und body mit und kann keine metadata exportieren.
Datei
Gemeinsame UI für ein Segment und seine Kinder; bleibt gemountet
Datei
UI für eine Route; macht das Segment öffentlich
Datei
Suspense-Fallback für das Segment
Datei
UI für notFound() und nicht passende URLs
Datei
Error Boundary; Client Component
Datei
Fehler-UI für das Root-Layout; eigenes html und body
Datei
API-Endpunkt; nur .js oder .ts
Datei
Wie ein Layout, wird aber bei Navigation neu gerendert
Datei
Fallback für einen Slot einer Parallel Route
Datei
UI für forbidden()
Datei
UI für unauthorized()
Root-Datei
Request-Proxy im Projekt-Root
Root-Datei
Setup für OpenTelemetry und Instrumentierung
Ordner
Ein URL-Segment
Ordner
Dynamisches Segment
Ordner
Catch-all-Segment, ein oder mehrere Teile
Ordner
Optionales Catch-all, passt auch auf den Parent
Ordner
Route Group, in der URL ausgelassen
Ordner
Privater Ordner, vom Routing ignoriert
Ordner
Benannter Slot für Parallel Routes
Ordner
Route auf derselben Ebene abfangen
Ordner
Route eine Ebene höher abfangen
Ordner
Route zwei Ebenen höher abfangen
Ordner
Route ab dem App-Root abfangen
Metadaten
App-Icons, als Bilder oder per Code generiert
Metadaten
Vorschaubilder zum Teilen, als Dateien oder generiert
Metadaten
sitemap.xml und robots.txt, statisch oder generiert
Tippe einen Dateipfad innerhalb von app/. Der Tester entfernt Route Groups, liest dynamische Segmente aus und nennt dir das URL-Muster oder den Grund, warum die Datei keine Route ist.
Dateipfad
Konventionen durchsuchen
Suchen
error, slot, group
Nach Art filtern
Alle
{n} angezeigt
Gib einen Pfad ein, zum Beispiel app/blog/[slug]/page.tsx
Keine Route: Ein Ordner, der mit _ beginnt, ist privat.
Keine öffentliche Route. {file} ist eine spezielle Datei, die die Route in diesem Ordner umschließt.
Keine öffentliche Route. {file} ist eine danebenliegende Datei und wird nie ausgeliefert.
route-Dateien müssen .js oder .ts sein.
{d} ist eine Route Group und wird in der URL ausgelassen
{d} ist ein Slot einer Parallel Route, kein URL-Segment
{d} passt auch auf den Parent-Pfad
{d} ist eine abfangende Route
API-Endpunkt unter {url}
Seite unter {url}
Kostenlos starten · Keine Kreditkarte nötig