Next.js Projektstruktur

Diese Seite bietet einen Überblick über die Projektstruktur einer Next.js-Anwendung. Sie behandelt Top-Level-Ordner und -Dateien, Konfigurationsdateien und Routing-Konventionen innerhalb der app- und pages-Verzeichnisse.

Klicken Sie auf die Datei- und Ordnernamen, um mehr über jede Konvention zu erfahren.

Top-Level-Ordner

Top-Level-Ordner werden verwendet, um den Code und die statischen Assets Ihrer Anwendung zu organisieren.


`app`	App Router
`pages`	Pages Router
`public`	Statische Assets zum Bereitstellen
`src`	Optionaler Anwendungsquellordner

Top-Level-Dateien

Top-Level-Dateien werden verwendet, um Ihre Anwendung zu konfigurieren, Abhängigkeiten zu verwalten, Middleware auszuführen, Überwachungstools zu integrieren und Umgebungsvariablen zu definieren.


Next.js
`next.config.js`	Konfigurationsdatei für Next.js
`package.json`	Projektabhängigkeiten und Skripte
`instrumentation.ts`	OpenTelemetry und Instrumentierungs-Datei
`middleware.ts`	Next.js-Anfrage-Middleware
`.env`	Umgebungsvariablen
`.env.local`	Lokale Umgebungsvariablen
`.env.production`	Produktions-Umgebungsvariablen
`.env.development`	Entwicklungs-Umgebungsvariablen
`.eslintrc.json`	Konfigurationsdatei für ESLint
`.gitignore`	Git-Dateien und -Ordner ignorieren
`next-env.d.ts`	TypeScript-Deklarationsdatei für Next.js
`tsconfig.json`	Konfigurationsdatei für TypeScript
`jsconfig.json`	Konfigurationsdatei für JavaScript

Routing-Konventionen für `app`

Die folgenden Dateikonventionen werden verwendet, um Routen zu definieren und Metadaten im app-Router zu behandeln.

Routing-Dateien


`layout`	`.js` `.jsx` `.tsx`	Layout
`page`	`.js` `.jsx` `.tsx`	Seite
`loading`	`.js` `.jsx` `.tsx`	Ladebenutzeroberfläche
`not-found`	`.js` `.jsx` `.tsx`	Nicht gefunden Benutzeroberfläche
`error`	`.js` `.jsx` `.tsx`	Fehler-Benutzeroberfläche
`global-error`	`.js` `.jsx` `.tsx`	Globale Fehler-Benutzeroberfläche
`route`	`.js` `.ts`	API-Endpunkt
`template`	`.js` `.jsx` `.tsx`	Erneut gerenderte Layout
`default`	`.js` `.jsx` `.tsx`	Paralleler Routen-Fallback

Verschachtelte Routen


`folder`	Routensegment
`folder/folder`	Verschachteltes Routensegment

Dynamische Routen


`[folder]`	Dynamisches Routensegment
`[...folder]`	Catch-All-Routensegment
`[[...folder]]`	Optionales Catch-All-Routensegment

Routengruppen und private Ordner


`(folder)`	Routen gruppieren ohne Routing zu beeinflussen
`_folder`	Ordner und alle untergeordneten Segmente vom Routing ausschließen

Parallele und abgefangene Routen


`@folder`	Benannter Slot
`(.)folder`	Auf gleicher Ebene abfangen
`(..)folder`	Eine Ebene darüber abfangen
`(..)(..)folder`	Zwei Ebenen darüber abfangen
`(...)folder`	Von Root abfangen

Metadaten-Dateikonventionen

App-Symbole


`favicon`	`.ico`	Favicon-Datei
`icon`	`.ico` `.jpg` `.jpeg` `.png` `.svg`	App-Symbol-Datei
`icon`	`.js` `.ts` `.tsx`	Generiertes App-Symbol
`apple-icon`	`.jpg` `.jpeg`, `.png`	Apple App-Symbol-Datei
`apple-icon`	`.js` `.ts` `.tsx`	Generiertes Apple App-Symbol

Open Graph und Twitter-Bilder


`opengraph-image`	`.jpg` `.jpeg` `.png` `.gif`	Open Graph-Bilddatei
`opengraph-image`	`.js` `.ts` `.tsx`	Generiertes Open Graph-Bild
`twitter-image`	`.jpg` `.jpeg` `.png` `.gif`	Twitter-Bilddatei
`twitter-image`	`.js` `.ts` `.tsx`	Generiertes Twitter-Bild

SEO


`sitemap`	`.xml`	Sitemap-Datei
`sitemap`	`.js` `.ts`	Generierte Sitemap
`robots`	`.txt`	Robots-Datei
`robots`	`.js` `.ts`	Generierte Robots-Datei

Routing-Konventionen für `pages`

Die folgenden Dateikonventionen werden verwendet, um Routen im pages-Router zu definieren.

Spezielle Dateien


`_app`	`.js` `.jsx` `.tsx`	Benutzerdefinierte App
`_document`	`.js` `.jsx` `.tsx`	Benutzerdefiniertes Dokument
`_error`	`.js` `.jsx` `.tsx`	Benutzerdefinierte Fehlerseite
`404`	`.js` `.jsx` `.tsx`	404-Fehlerseite
`500`	`.js` `.jsx` `.tsx`	500-Fehlerseite

Routen


Ordnerkonvention
`index`	`.js` `.jsx` `.tsx`	Startseite
`folder/index`	`.js` `.jsx` `.tsx`	Verschachtelte Seite
Dateikonvention
`index`	`.js` `.jsx` `.tsx`	Startseite
`file`	`.js` `.jsx` `.tsx`	Verschachtelte Seite

Dynamische Routen


Ordnerkonvention
`[folder]/index`	`.js` `.jsx` `.tsx`	Dynamisches Routing-Segment
`[...folder]/index`	`.js` `.jsx` `.tsx`	Catch-All-Routing-Segment
`[[...folder]]/index`	`.js` `.jsx` `.tsx`	Optionales Catch-All-Routing-Segment
Dateikonvention
`[file]`	`.js` `.jsx` `.tsx`	Dynamisches Routing-Segment
`[...file]`	`.js` `.jsx` `.tsx`	Catch-All-Routing-Segment
`[[...file]]`	`.js` `.jsx` `.tsx`	Optionales Catch-All-Routing-Segment