Next.js Projektstruktur
Diese Seite bietet einen Überblick über die Projektstruktur einer Next.js-Anwendung. Sie behandelt die wichtigsten Dateien und Ordner, Konfigurationsdateien sowie Routing-Konventionen innerhalb der Verzeichnisse app und pages.
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 Ihrer Anwendung und statische Assets zu organisieren.
app | App Router |
pages | Pages Router |
public | Statische Assets für den Auslieferung |
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 | 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
Die folgenden Dateikonventionen werden verwendet, um Routen zu definieren und Metadaten im app-Router zu verwalten.
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) | Routen gruppieren ohne Routing-Einfluss |
_folder | Ordner und Kindsegmente aus dem Routing ausschließen |
Parallele und abgefangene Routen
@folder | Benannter Slot |
(.)folder | Auf gleicher Ebene abfangen |
(..)folder | Eine Ebene höher abfangen |
(..)(..)folder | Zwei Ebenen höher abfangen |
(...)folder | Von der Wurzel abfangen |
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
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 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 |