Projektorganisation und Datei-Kolokation

Abgesehen von den Routing-Ordner- und Dateikonventionen ist Next.js unvoreingenommen bezüglich der Organisation und Kolokation Ihrer Projektdateien.

Diese Seite erläutert Standardverhalten und Funktionen, die Sie zur Projektorganisation nutzen können.

• Sichere Kolokation standardmäßig
• Projektorganisationsfunktionen
• Projektorganisationsstrategien

Sichere Kolokation standardmäßig

Im app-Verzeichnis definiert die verschachtelte Ordnerhierarchie die Routingstruktur.

Jeder Ordner repräsentiert ein Routingsegment, das einem entsprechenden Segment im URL-Pfad zugeordnet wird.

Eine Route ist jedoch nicht öffentlich zugänglich, bis eine page.js- oder route.js-Datei zu einem Routingsegment 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 innerhalb von Routingsegmenten im app-Verzeichnis sicher kolokiert werden können, ohne versehentlich routingfähig zu werden.

Hinweis:

• Dies unterscheidet sich vom pages-Verzeichnis, in dem jede Datei in pages als Route gilt.
• Sie können Ihre Projektdateien in app kolokieren, müssen es aber nicht. Bei Bedarf können Sie sie außerhalb des app-Verzeichnisses speichern.

Projektorganisationsfunktionen

Next.js bietet mehrere Funktionen zur Projektorganisation.

Private Ordner

Private Ordner können durch Voranstellen eines Unterstriches erstellt werden: _ordnerName

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

Da Dateien im app-Verzeichnis standardmäßig sicher kolokiert 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 von Routing-Logik
• Konsistente Organisation interner Dateien in einem Projekt und im Next.js-Ökosystem
• Sortieren und Gruppieren von Dateien in Code-Editoren
• Vermeidung potenzieller Namenskonflikte mit zukünftigen Next.js-Dateikonventionen

Hinweis:

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

Routengruppen

Routengruppen können durch Einschließen eines Ordners in Klammern erstellt werden: (ordnerName)

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

Routengruppen sind nützlich für:

• Organisation von Routen in Gruppen, z.B. nach Websitebereich, Absicht oder Team
• Aktivierung verschachtelter Layouts auf derselben Routingsegment-Ebene:
  • Erstellen mehrerer verschachtelter Layouts im gleichen 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 das Speichern von Anwendungscode (einschließlich app) in einem optionalen src-Verzeichnis. Dies trennt Anwendungscode von Projektkonfigurationsdateien, die hauptsächlich im Projektroot 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" Art, Dateien und Ordner in einem Next.js-Projekt zu organisieren.

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

Hinweis: In unseren Beispielen verwenden wir components- und lib-Ordner als verallgemeinerte Platzhalter. Ihre Benennung hat keine besondere Framework-Bedeutung, 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 Projektroot und hä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 Root des app-Verzeichnisses.

Projektdateien nach Feature oder Route aufteilen

Diese Strategie speichert global gemeinsam genutzten Anwendungscode im Root des app-Verzeichnisses und teilt spezifischeren Anwendungscode in die Routingsegmente auf, die ihn verwenden.