Next.js Projektstruktur
Diese Seite bietet einen Überblick über die Datei- und Ordnerstruktur eines Next.js-Projekts. Sie behandelt die Top-Level-Dateien und -Ordner, Konfigurationsdateien sowie Routing-Konventionen innerhalb der Verzeichnisse app und pages.
Top-Level-Ordner
app | App Router |
pages | Pages Router |
public | Statische Assets für den Server |
src | Optionaler Quellordner der Anwendung |
Top-Level-Dateien
| Next.js | |
next.config.js | Konfigurationsdatei für Next.js |
package.json | Projektabhängigkeiten und Skripte |
instrumentation.ts | OpenTelemetry- und Instrumentationsdatei |
middleware.ts | Next.js-Request-Middleware |
.env | Umgebungsvariablen |
.env.local | Lokale Umgebungsvariablen |
.env.production | Produktions-Umgebungsvariablen |
.env.development | Entwicklungs-Umgebungsvariablen |
.eslintrc.json | Konfigurationsdatei für ESLint |
.gitignore | Zu ignorierende Git-Dateien und -Ordner |
next-env.d.ts | TypeScript-Deklarationsdatei für Next.js |
tsconfig.json | Konfigurationsdatei für TypeScript |
jsconfig.json | Konfigurationsdatei für JavaScript |
app Routing-Konventionen
Routing-Dateien
layout | .js .jsx .tsx | Layout |
page | .js .jsx .tsx | Seite |
loading | .js .jsx .tsx | Lade-UI |
not-found | .js .jsx .tsx | Nicht-gefunden-UI |
error | .js .jsx .tsx | Fehler-UI |
global-error | .js .jsx .tsx | Globale Fehler-UI |
route | .js .ts | API-Endpunkt |
template | .js .jsx .tsx | Neu gerendertes Layout |
default | .js .jsx .tsx | Fallback-Seite für parallele Routen |
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) | Gruppierung von Routen ohne Routing-Beeinflussung |
_folder | Ausschluss von Ordner und Kindsegmenten aus dem Routing |
Parallele und abgefangene Routen
@folder | Benannter Slot |
(.)folder | Abfangen auf gleicher Ebene |
(..)folder | Abfangen eine Ebene höher |
(..)(..)folder | Abfangen zwei Ebenen höher |
(...)folder | Abfangen vom Root |
Metadaten-Dateikonventionen
App-Icons
favicon | .ico | Favicon-Datei |
icon | .ico .jpg .jpeg .png .svg | App-Icon-Datei |
icon | .js .ts .tsx | Generiertes App-Icon |
apple-icon | .jpg .jpeg, .png | Apple-App-Icon-Datei |
apple-icon | .js .ts .tsx | Generiertes Apple-App-Icon |
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 |
pages Routing-Konventionen
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 Routensegment |
[...folder]/index | .js .jsx .tsx | Catch-all-Routensegment |
[[...folder]]/index | .js .jsx .tsx | Optionales Catch-all-Routensegment |
| Dateikonvention | ||
[file] | .js .jsx .tsx | Dynamisches Routensegment |
[...file] | .js .jsx .tsx | Catch-all-Routensegment |
[[...file]] | .js .jsx .tsx | Optionales Catch-all-Routensegment |