Projektorganisation und Datei-Kolokation

Abgesehen von den Routing-Ordner- und Dateikonventionen ist Next.js nicht vorschreibend darüber, wie Sie Ihre Projektdateien organisieren und kolokalisieren.

Diese Seite beschreibt das Standardverhalten und Funktionen, die Sie zur Organisation Ihres Projekts nutzen können.

• Sichere Kolokation standardmäßig
• Projektorganisationsfunktionen
• Projektorganisationsstrategien

Sichere Kolokation standardmäßig

Im app-Verzeichnis definiert die verschachtelte Ordnerhierarchie die Routenstruktur.

Jeder Ordner repräsentiert ein Routensegment, das einem entsprechenden Segment in einem URL-Pfad zugeordnet ist.

Allerdings ist eine Route nicht öffentlich zugänglich, bis eine page.js- oder route.js-Datei zu einem Routensegment hinzugefügt wird.

Und selbst wenn eine Route öffentlich zugänglich gemacht wird, wird nur der Inhalt, der von page.js oder route.js zurückgegeben wird, an den Client gesendet.

Das bedeutet, dass Projektdateien sicher kolokalisiert werden können innerhalb von Routensegmenten im app-Verzeichnis, ohne versehentlich routbar zu sein.

Gut zu wissen:

• Dies unterscheidet sich vom pages-Verzeichnis, wo jede Datei in pages als Route betrachtet wird.
• Während Sie Ihre Projektdateien in app kolokalisieren können, müssen Sie dies nicht tun. Wenn Sie es bevorzugen, können Sie sie außerhalb des app-Verzeichnisses speichern.

Projektorganisationsfunktionen

Next.js bietet mehrere Funktionen, die Ihnen bei der Organisation Ihres Projekts helfen.

Private Ordner

Private Ordner können erstellt werden, indem einem Ordner ein Unterstrich vorangestellt wird: _folderName

Dies zeigt an, dass der Ordner ein privates Implementierungsdetail ist und nicht vom Routing-System berücksichtigt werden sollte, wodurch der Ordner und alle seine Unterordner aus dem Routing ausgenommen werden.

Da Dateien im app-Verzeichnis standardmäßig sicher kolokalisiert werden können, sind private Ordner für die Kolokation nicht erforderlich. Sie können jedoch nützlich sein für:

• Trennung von UI-Logik und Routing-Logik.
• Konsistente Organisation interner Dateien in einem Projekt und im Next.js-Ökosystem.
• Sortierung und Gruppierung von Dateien in Code-Editoren.
• Vermeidung potenzieller Namenskonflikte mit zukünftigen Next.js-Dateikonventionen.

Gut zu wissen

• Obwohl keine Framework-Konvention, können Sie auch Dateien außerhalb privater Ordner als "privat" markieren, indem Sie das gleiche Unterstrich-Muster verwenden.
• Sie können URL-Segmente erstellen, die mit einem Unterstrich beginnen, indem Sie dem Ordnernamen %5F voranstellen (die URL-kodierte Form eines Unterstrichs): %5FfolderName.
• Wenn Sie keine privaten Ordner verwenden, ist es hilfreich, die speziellen Dateikonventionen von Next.js zu kennen, um unerwartete Namenskonflikte zu vermeiden.

Routengruppen

Routengruppen können erstellt werden, indem ein Ordner in Klammern eingeschlossen wird: (folderName)

Dies zeigt an, dass der Ordner zu Organisationszwecken dient und nicht in den URL-Pfad der Route aufgenommen werden sollte.

Routengruppen sind nützlich für:

• Organisation von Routen in Gruppen, z.B. nach Website-Bereich, Absicht oder Team.
• Ermöglichen verschachtelter Layouts auf demselben Routensegment-Level:
  • Erstellen mehrerer verschachtelter Layouts im selben Segment, einschließlich mehrerer Root-Layouts
  • Hinzufügen eines Layouts zu einer Teilmenge von Routen in einem gemeinsamen Segment

src-Verzeichnis

Next.js unterstützt die Speicherung von Anwendungscode (einschließlich app) in einem optionalen src-Verzeichnis. Dies trennt Anwendungscode von Projektkonfigurationsdateien, die meist im Stammverzeichnis eines Projekts liegen.

Modulpfad-Aliase

Next.js unterstützt Modulpfad-Aliase, die das Lesen und Warten von Importen über tief verschachtelte Projektdateien hinweg erleichtern.

// vorher
import { Button } from '../../../components/button'

// nachher
import { Button } from '@/components/button'

Projektorganisationsstrategien

Es gibt keine "richtige" oder "falsche" Methode, wenn es darum geht, Ihre eigenen Dateien und Ordner in einem Next.js-Projekt zu organisieren.

Der folgende Abschnitt listet eine sehr allgemeine Übersicht über gängige Strategien. Die einfachste Erkenntnis ist, eine Strategie zu wählen, die für Sie und Ihr Team funktioniert, und diese konsistent im Projekt anzuwenden.

Gut zu wissen: In unseren Beispielen unten verwenden wir components- und lib-Ordner als allgemeine Platzhalter. Ihre Benennung hat keine besondere Bedeutung für das Framework, und Ihre Projekte könnten andere Ordner wie ui, utils, hooks, styles usw. verwenden.

Projektdateien außerhalb von app speichern

Diese Strategie speichert den gesamten Anwendungscode in gemeinsamen Ordnern im Stammverzeichnis Ihres Projekts und behält das app-Verzeichnis rein für Routing-Zwecke.

Projektdateien in Top-Level-Ordnern innerhalb von app speichern

Diese Strategie speichert den gesamten Anwendungscode in gemeinsamen Ordnern im Stammverzeichnis des app-Verzeichnisses.

Projektdateien nach Feature oder Route aufteilen

Diese Strategie speichert global geteilten Anwendungscode im Stammverzeichnis von app und teilt spezifischeren Anwendungscode in die Routensegmente auf, die ihn verwenden.