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 dienen der Organisation Ihres Anwendungscodes und statischer Assets.
app | App Router |
pages | Pages Router |
public | Statische Assets für den Einsatz |
src | Optionaler Quellordner der Anwendung |
Top-Level-Dateien
Top-Level-Dateien werden zur Konfiguration Ihrer Anwendung, Verwaltung von Abhängigkeiten, Ausführung von Middleware, Integration von Monitoring-Tools und Definition von Umgebungsvariablen verwendet.
| 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 | Git-Dateien und -Ordner zum Ignorieren |
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 |