Projektstruktur und Organisation
Diese Seite bietet einen Überblick über alle Ordner- und Dateikonventionen in Next.js sowie Empfehlungen zur Organisation Ihres Projekts.
Ordner- und Dateikonventionen
Top-Level-Ordner
Top-Level-Ordner werden verwendet, um den Code Ihrer Anwendung und statische Assets zu organisieren.
app | App-Router |
pages | Pages-Router |
public | Statische Assets, die bereitgestellt werden sollen |
src | Optionaler Quellordner der Anwendung |
Top-Level-Dateien
Top-Level-Dateien werden verwendet, um Ihre Anwendung zu konfigurieren, Abhängigkeiten zu verwalten, Middleware auszuführen, Monitoring-Tools 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 Instrumentationsdatei |
middleware.ts | Next.js-Request-Middleware |
.env | Umgebungsvariablen |
.env.local | Lokale Umgebungsvariablen |
.env.production | Produktionsumgebungsvariablen |
.env.development | Entwicklungsumgebungsvariablen |
.eslintrc.json | Konfigurationsdatei für ESLint |
.gitignore | Git-Dateien und -Ordner, die ignoriert werden sollen |
next-env.d.ts | TypeScript-Deklarationsdatei für Next.js |
tsconfig.json | Konfigurationsdatei für TypeScript |
jsconfig.json | Konfigurationsdatei für JavaScript |
Dateikonventionen
_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 |