Next.js-Dateistruktur

Blog

Ursprünglich veröffentlicht von Sergio Xalambri bei sergiodxa.com

React hat keine klare Meinung zur Strukturierung Ihrer Dateien. Ähnlich hat Next.js ein paar Meinungen, erstelle ein |_+_| und |_+_| Verzeichnis und das ist alles.

Ich habe an einigen Next.js-basierten Projekten gearbeitet, eines davon das ZEIT Website, die die Ersteller dieser Tools sind.

Dieser Artikel ist eine Zusammenfassung der Ordner, die ich gerne erstelle, wenn ich in einer Next.js-basierten Anwendung arbeite.

pages

__spottet__

In diesem Ordner platziere ich die Mocks für installierte Module, die ich bei Integrations- oder Unit-Tests verwenden werde. Mocks müssen denselben Namen wie die importierte Datei haben, in Fällen wie |_+_| das sind verschachtelte Module, die wir brauchen, um ein |_+_| . zu erstellen Ordner und legen Sie die |_+_| Datei darin.

__Tests__

Hier sind die Integrationstests, jeder Integrationstest sollte mit einer Seite innerhalb der Seiten Verzeichnis.

__Tests__/__Schnappschüsse__

Jeder vom Integrationstest generierte Snapshot wird in diesem Ordner abgelegt. Es wird automatisch von Jest generiert, wenn ein Snapshot-Test durchgeführt wird.

Komponenten

Hier sind die React-Komponenten, die auf mehreren Seiten wiederverwendet werden können oder komplex genug sind, um sie in eine andere Datei zu verschieben und einzeln zu testen.

Jede Datei sollte einen Standardexport mit einer einzelnen Komponente haben, innerhalb der Datei können jedoch mehrere Komponenten vorhanden sein. Der Dateiname muss kebab-case verwenden.

So sehen Sie private Twitter-Profile

Jede Komponente hier sollte mindestens einen Snapshot-Test haben, die Testdatei sollte sich in demselben Ordner mit demselben Dateinamen befinden und |_+_| . hinzufügen als Dateierweiterung.

Komponenten/__Schnappschüsse__

Es ist das gleiche wie __Tests__/__Schnappschüsse__ aber für den Unit-Test jeder Komponente.

e2e

Hier werden die End-to-End-Tests platziert. Jede Datei sollte das |_+_| . haben Verlängerung als Test anerkannt werden. Jede andere Datei sollte vom E2E-Testtool ignoriert werden (ich benutze persönlich TestCafe).

Helfer

Wenn für die E2E-Tests eine Hilfsfunktion benötigt wird, sollte diese hier platziert werden. Die Datei konnte nicht mit |_+_| . enden da es als Testsuite betrachtet wird.

Dies sind im Idealfall winzige Funktionen, die in jedem E2E-Test verwendet werden, z. eine |_+_|Funktion.

Haken

Jeder benutzerdefinierte Hook, der für die Anwendung erstellt wurde, sollte hier platziert werden. Testdateien sind ideal, aber nicht erforderlich, da ein Hook durch die Integrations- oder Komponententests der Komponenten, die sie verwenden, getestet werden könnte.

Hinweis-Hooks an dieser Stelle sollen von mehreren Komponenten verwendet werden. Jeder benutzerdefinierte Hook, der für die Verwendung in einer einzelnen Komponente erstellt wurde, sollte in der Komponentendatei selbst platziert werden.

Seiten

Hier sind die Seiten (auch bekannt als Ansichten) der Anwendung, jede Datei wird automatisch einer Route zugeordnet, wie in beschrieben Next.js-Dokumentation .

Die |_+_| ist eine spezielle Datei, die die Hauptanwendungskomponente sein wird.

Die |_+_| ist eine spezielle Datei, die nur serverseitig verwendet wird, um das grundlegende HTML der Anwendung zu rendern.

Die |_+_| ist eine spezielle Datei, die verwendet wird, um die Fehlerseite Next.js anzupassen.

statisch

Alle statischen Dateien, die von der Anwendung benötigt werden (Bilder, Audios usw.) können hier platziert werden.

Dies ist ein normaler Next.js-Ordner, hier nichts Besonderes.

utils

Hier platziere ich jede Hilfsfunktion, die ich für meine Projekte erstelle, Dinge, die Sie wahrscheinlich aus |_+_|, |_+_| . importieren würden oder eine andere Bibliothek wie diese, die jedoch speziell für mein Projekt erstellt wurde.

Letzte Worte

Dies ist die Dateistruktur, die ich bei der Arbeit mit Next.js nützlich fand und die bei der Verwendung des Frameworks hilfreich war.

Es bedeutet nicht, dass es das beste ist und es wahrscheinlich auf Projektbasis verbessert oder geändert werden könnte. Denken Sie daran, dass die beste Dateistruktur darin besteht, Dateien zu verschieben, bis es sich richtig anfühlt.

Ursprünglich veröffentlicht von Sergio Xalambri bei sergiodxa.com

==============================

Danke fürs Lesen :heart: Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden! Folge mir auf Facebook | Twitter

Erfahren Sie mehr

TypeScript verstehen

Typoskript-Meisterklasse & KOSTENLOSES E-Book

React - Das komplette Handbuch (inkl. Hooks, React Router, Redux)

Modernes Reagieren mit Redux [2019-Update]

Der komplette React-Entwicklerkurs (mit Hooks und Redux)

React JS Webentwicklung - Das Essentials Bootcamp

React JS, Angular & Vue JS - Schnellstart & Vergleich

Der komplette React Js & Redux-Kurs – Erstellen Sie moderne Web-Apps

React JS und Redux Bootcamp - Master React Web Development

#javascript #node-js #web-entwicklung #reactjs

sergiodxa.com

Next.js-Dateistruktur

Übersicht über die Dateistruktur, die ich gerne in Next.js-Projekten verwende