Wird diese Next.JS-Ordnerstruktur empfohlen?

Lesezeit: 9 Minuten

Wir haben auf diese folgende Projektstruktur zurückgegriffen

|- pages
    |- <page_name>
        |- index.js             # To do a default export of the main component
        |- MainComponent.jsx    # Contains other subcomponents
        |- main-component.css   # CSS for the main component
        |- OtherComponents.jsx  # more than 1 file for child components that are used only in that page
        |- __tests__            # Jest unit and snapshot tests
|- components
    |- index.js                 # Exports all the default components of each component as named exports
    |- CommonCmpnt1
        |- CommonCmpnt1.jsx
        |- common-cmpnt-1.css
        |- index.js             # To default export the component
        |- __tests__
    |- CommonCmpnt2
        |- CommonCmpnt2.jsx
        |- common-cmpnt-2.css
        |- index.js             # To default export the component
        |- __tests__

Zur Verdeutlichung, es ist nichts kaputt gegangen und es funktioniert erstaunlich gut. Wir haben Komponenten, die auf mehreren Seiten innerhalb der wiederverwendet werden components Verzeichnis, wo wir wie folgt importieren

// Assuming we are inside MainComponent.jsx
// ...
import { CommonCmpnt1 } from '../../components';    // We even take it a step further and use absolute imports

Außerdem befinden sich darin Komponenten, die nur einmal verwendet werden, nebeneinander pages Mappe.

Das einzige Problem, dem wir jetzt gegenüberstehen, ist das Hot Module Nachladen ist kaputt, dh immer wenn wir das editieren .jsx Datei entweder in der pages oder der components -Verzeichnis müssen wir die Seite manuell neu laden, um die vorgenommenen Änderungen zu sehen (es wirkt sich nicht auf die CSS-Dateien aus). Es ist etwas, an das wir uns gewöhnt haben und das uns daher nicht ernsthaft beeinträchtigt.

Meine Frage ist, gibt es eine bevorstehende Katastrophe, von der wir nichts wissen?

  • Nun, auf jeden Fall ist CSS im nächsten Projekt nicht allgemein. Sie verwenden JS-basiertes CSS. etwas wie styled components

    – Code-Maniac

    19. Dezember 2018 um 16:17 Uhr


  • @CodeManiac Ich stimme zu, aber es ist eher eine Präferenz als eine Lösung. Wir wechseln uns ab styled-jsx (gestylte Komponenten), sass und css

    – cr05s19xx

    19. Dezember 2018 um 16:27 Uhr

Bin auf diesen Beitrag gestoßen, als ich selbst nach einer geeigneten Ordnerstruktur für NextJS gesucht habe. Ich habe eine ähnliche Struktur verwendet, aber kürzlich festgestellt, dass dies der Fall ist nicht wie Sie NextJS verwenden sollen.

Ich weiß nicht allzu viel über die Details, aber NextJS hat Optimierungen auf Seitenebene. Wenn Sie ein NextJS-Projekt erstellen, sehen Sie die Seiten, die als Teil des Builds protokolliert wurden. NextJS Leckereien jede Komponentendatei unter dem pages Ordner als Seite, also durch Platzieren von Nicht-Seiten-Komponenten im pages Ordner, du bist drastisch Erhöhung der Build-Zeit, da NextJS jetzt jede dieser Komponenten als Seite erstellt.

  • Ich stimme zu … und glauben Sie mir, ich habe es auf die harte Tour herausgefunden. Ich muss diesen Beitrag noch bearbeiten, aber ich freue mich über Ihren

    – cr05s19xx

    27. Januar 2020 um 7:19 Uhr

  • Ja … Ich habe es auch auf die harte Tour herausgefunden und mich gefragt, warum ein Build Minuten dauert 😮

    – Hans

    27. Januar 2020 um 18:19 Uhr


  • Ich stimme dem zu. Ich habe auch auf die harte Tour gelernt. Jetzt betrachte ich Seiten als Routing und lege nur Sachen auf den Server, die gerendert werden müssen, und importiere alles dynamisch aus dem Komponentenordner. Macht es einfach, auch zu Nicht-Nextjs-Projekten zu wechseln

    – Apnerv

    24. Februar 2020 um 7:17 Uhr

  • Was ist also die richtige Lösung? Ihre Antwort legt nahe, dass Komponenten nicht untergehen sollen pages wo sollen sie also hin?

    – Rylan Schäfer

    10. Juni um 0:17

  • @RylanSchaeffer Sie können sie im gemeinsamen Ordner hinzufügen. Der Seitenordner soll nur Seiten hosten, keine Komponenten. Wenn Sie eine Komponente in Seiten wie „pages/home/myComponent.tsx“ einfügen, wird eine Seite wie „localhost:3000/home/myComponent“ generiert

    – Shazil Sattar

    20. Juni um 8:33 Uhr


Ich mag die in diesem Artikel vorgeschlagene Struktur

https://medium.com/@pablo.delvalle.cr/an-opinionated-basic-next-js-files-and-directories-structure-88fefa2aa759

/root
  \_ /.next/
  \_ /components/
      \_ Button/
          \_ button.spec.jsx
          \_ button.styles.jsx
          \_ index.jsx
  \_ /constants/
      \_ theme.js
      \_ page.js
  \_ /contexts/
      \_ Locale/
         \_ index.js
      \_ Page/
         \_ index.js
  \_ /pages/
      \_ _app.jsx
      \_ _document.jsx
      \_ about.jsx
      \_ index.jsx
  \_ /providers/
      \_ Locale/
         \_ index.js
      \_ Page/
         \_ index.js
  \_ /public/
      \_ favicon.ico
      \_ header.png
  \_ /redux/
      \_ actions/
         \_ users/
            \_ index.js
         \_ products/
            \_ index.js
      \_ reducers/
         \_ users/
            \_ index.js
         \_ products/
            \_ index.js
      \_ store/
         \_ index.js
      \_ types/
         \_ index.js
  \_ /shared/
      \_ jsons/
          \_ users.json
      \_ libs/
          \_ locale.js
      \_ styles/
          \_ global.css
  \_ /widgets/
      \_ PageHeader/
          \_ index.jsx
  \
  \_ .eslintignore
  \_ .eslintrc
  \_ .env
  \_ babel.config.js
  \_ Dockerfile
  \_ jest.config.js
  \_ next.config.js
  \_ package.json
  \_ README.md

Benutzeravatar von Gabriel Taype
Gabriel Tappe

Falls noch jemand Interesse hat, speichere ich die Datei je nach Typ in meinem Projekt ab, z.B.:

|-Nextjs-root
  |-Components
    |-Header.js
    |-Footer.js
    |-MoreExamples.js
  |-styles
   |-globals.css
   |-header.module.css
   |-footer.module.css
  |-Services
    |-api              #Axios config to connect to my api
  |-Context
   |-AuthContext.js    #Global context to my app for auth purposes
  |-pages
   |-index.js

  • Ich bezweifle, dass der serverseitige Debugger nicht funktioniert Services/api weil ich denke, dass next.js eine Quellkarte nur für Dateien innerhalb des Seitenverzeichnisses erstellt

    – Nika Tsogiaidze

    7. Februar um 11:17 Uhr


  • Das skaliert nicht. Ordner nach Funktion ist besser für mittelgroße Projekte.

    – Versohlt

    25. September um 1:50 Uhr

Allen, die sich noch dafür interessieren, empfehle ich persönlich diesen Ansatz, da er hilft, Ressourcen aufzuteilen und Dinge schnell zu finden und Unit-Tests zu ermöglichen.

Es wurde von einem Artikel von HackerNoon inspiriert So strukturieren Sie Ihre React-App

Hier ist, was ich empfehle, mit einem modularen Designmuster:

/public
    favicon.ico
/src
    /common
        /components
            /elements
                /[Name]
                    [Name].tsx
                    [Name].test.ts
        /hooks
        /types
        /utils
    /modules
        /auth
            /api
                AuthAPI.js
                AuthAPI.test.js
            /components
                AuthForm.tsx
                AuthForm.test.ts
            auth.js
    /pages
        /api
          /authAPI
              authAPI.js
          /[Name]API
              [Name]API.js
        _app.tsx
        _document.tsx
        index.tsx

Ich habe dazu einen Artikel geschrieben: https://dev.to/vadorequest/a-2021-guide-about-structuring-your-next-js-project-in-a-flexible-and-efficient-way-472

Das einzige, worauf Sie wirklich achten müssen, ist, nichts unter Seiten zu haben, die keine tatsächlichen Seiten oder API-Endpunkte sind (z. B.: Tests, Komponenten usw.), da es keine Möglichkeit gibt, sie zu ignorieren, und Next wird bündeln und bereitstellen sie als tatsächliche Seiten.

  • Was ist mit Styling? Modul-CSS-Dateien und globale CSS-Dateien?

    – Naor Anhaisy

    6. Oktober 2021 um 21:00 Uhr

  • CSS-Dateien auf Komponentenebene können entweder in die .tsx Datei (bei Verwendung von CSS-in-JS) oder mit einer .css Datei daneben. (im selben Ordner, mit dem Namen der Komponente)

    – Vadoranfrage

    7. Oktober 2021 um 11:33 Uhr


  • Für globale Styles habe ich ein Special src/app Ordner, der alles enthält, was die App als Ganzes betrifft. Da ich CSS-in-JS verwende, habe ich a src/app/components/GlobalStyles.tsx Datei, die alle globalen Stile enthält (innerhalb einer Global Komponente aus der @emotion/react Bibliothek).

    – Vadoranfrage

    7. Oktober 2021 um 11:36 Uhr

  • Wo bewahren Sie Ihre Seitenkomponenten auf? Ich meine: pages/about.tsx wird höchstwahrscheinlich eine rendern About.tsx Komponente. Ofc, about ist normalerweise eine sehr einfache Komponente, aber wir könnten auch darüber sprechen pages/posts/[id].tsx das macht a PostContainer das mit dynamischen Daten usw. umgeht. Wo bewahren Sie diese auf, da sie nicht in der sein können pages Routing-Ordner? Wenn du kannst, schau auch mal bei: github.com/vercel/next.js/discussions/34130

    – cbdeveloper

    9. Februar um 15:30 Uhr


  • @cbdeveloper Normalerweise in a /modules Unterordner.

    – Vadoranfrage

    10. Februar um 12:12 Uhr

Benutzeravatar von Phạm Huy Phát
Phạm Huy Phát

Die Art und Weise, die mir jetzt am besten passt, ist die Verwendung von pages Ordner nur für Routing-Zwecke, Komponenten in jeder Datei sind nur ein Wrapper für die “real” Seitenkomponenten in src Mappe. Mit diesem Ansatz kann ich meine Homepage einfacher strukturieren und es fühlt sich intuitiver an – das Layout und seine untergeordneten Komponenten im selben Ordner zu enthalten.

  • Was ist mit Styling? Modul-CSS-Dateien und globale CSS-Dateien?

    – Naor Anhaisy

    6. Oktober 2021 um 21:00 Uhr

  • CSS-Dateien auf Komponentenebene können entweder in die .tsx Datei (bei Verwendung von CSS-in-JS) oder mit einer .css Datei daneben. (im selben Ordner, mit dem Namen der Komponente)

    – Vadoranfrage

    7. Oktober 2021 um 11:33 Uhr


  • Für globale Styles habe ich ein Special src/app Ordner, der alles enthält, was die App als Ganzes betrifft. Da ich CSS-in-JS verwende, habe ich a src/app/components/GlobalStyles.tsx Datei, die alle globalen Stile enthält (innerhalb einer Global Komponente aus der @emotion/react Bibliothek).

    – Vadoranfrage

    7. Oktober 2021 um 11:36 Uhr

  • Wo bewahren Sie Ihre Seitenkomponenten auf? Ich meine: pages/about.tsx wird höchstwahrscheinlich eine rendern About.tsx Komponente. Ofc, about ist normalerweise eine sehr einfache Komponente, aber wir könnten auch darüber sprechen pages/posts/[id].tsx das macht a PostContainer das mit dynamischen Daten usw. umgeht. Wo bewahren Sie diese auf, da sie nicht in der sein können pages Routing-Ordner? Wenn du kannst, schau auch mal bei: github.com/vercel/next.js/discussions/34130

    – cbdeveloper

    9. Februar um 15:30 Uhr


  • @cbdeveloper Normalerweise in a /modules Unterordner.

    – Vadoranfrage

    10. Februar um 12:12 Uhr

Ciro Santilli Benutzeravatar von OurBigBook.com
Ciro Santilli OurBigBook.com

Achten Sie darauf, reine Backend-Dateien von Frontend- und Backend-Dateien zu trennen

Unabhängig davon, wie Sie sie nennen, würde ich empfehlen, zwei Verzeichnisse mit sehr klarer Semantik zu haben:

  • das reine Backend-Verzeichnis: kann reine Backend-Operationen durchführen, z. B. direkte DB- oder Dateisystemzugriffe (require('fs'))
  • das Frontend + Backend-Verzeichnis: Nur Frontend-sichere Dinge. Da Next.js ein SSR-Setup ist, muss alles, was Frontend-sicher ist, auch Backend-sicher sein, damit Sie sie auch vom Backend aus verwenden können, z. B. gemeinsam genutzte Konfigurationen oder Helfer.

Dies ist wichtig, da Sie sonst anfangen, auf Fehler zu stoßen, wie zum Beispiel:

Modul nicht gefunden: Kann ‘fs’ nicht auflösen

beim Ausklammern von Dingen mit HoCs und wie unter Modul nicht gefunden erwähnt: Kann ‘fs’ in der Next.js-Anwendung nicht auflösen. Ich weiß nicht, wie ich dies lösen soll, außer indem ich diese klare und eindeutige Aufteilung mache.

Vielleicht ist dies die beabsichtigte Semantik des lib/ vs components/ Konvention häufig verwendet, aber ich konnte kein klares Zitat finden.

Ich bin eher versucht, sie einfach anzurufen back/ und front/

ESLint pages/, components/und lib/ standardmäßig

Dies ist der einzige eindeutige In-Upstream-Code-Effekt von components/ und lib/ die ich wie erwähnt finden konnte unter: https://nextjs.org/docs/basic-features/eslint#linting-custom-directories-and-files (pages/ ist natürlich magisch und enthält die URL-Einstiegspunkte, und Sie sollten dort natürlich nichts anderes einfügen):

Standardmäßig führt Next.js ESLint für alle Dateien in den Verzeichnissen pages/, components/ und lib/ aus.

In diesem Fall spielt es keine große Rolle, da die Verzeichnisliste wie dort dokumentiert einfach konfiguriert werden kann.

  • /server und /client sind der Standard für /back und /front

    – mtro

    10. Mai um 15:24 Uhr

  • @mtro danke, hast du eine Referenz?

    – Ciro Santilli OurBigBook.com

    10. Mai um 16:24 Uhr

1434570cookie-checkWird diese Next.JS-Ordnerstruktur empfohlen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy