Next.Js 13 parallele Routen: Ein umfassender Leitfaden

1. Einleitung

Hallo!

Willkommen zu diesem umfassenden Leitfaden zu parallelen Routen in Next.js.

Mit der Weiterentwicklung der digitalen Landschaft entwickeln sich auch die Feinheiten der Webentwicklung weiter. Moderne Webanwendungen erfordern nicht nur robuste, sondern auch vielseitige Routing-Mechanismen, um das Benutzererlebnis zu verbessern und komplexe Designstrukturen zu berücksichtigen.

Dieser Artikel wurde sorgfältig ausgearbeitet, um die leistungsstarke Funktion zu verstehen, die in Next.js 13.3 – Parallele Routen eingeführt wurde.

Das Ziel ist zweifach: erstens ein klares Verständnis der Bedeutung paralleler Routen und ihrer praktischen Anwendungen zu vermitteln und zweitens praktische Einblicke in die effiziente Umsetzung dieser Routen in Ihren Next.js-Projekten zu bieten.

Beginnen wir diese Reise, um das transformative Potenzial paralleler Routen zu erkunden und wie sie die Grenzen des Webanwendungsdesigns neu definieren.

2. Die Welt vor Parallelrouten

Vor der Einführung paralleler Routen waren Webentwickler nur begrenzt in der Lage, Inhalte dynamisch in einer einzigen Ansicht zu strukturieren und anzuzeigen. Herkömmliche Routing-Mechanismen waren ziemlich linear: eine URL, eine Ansicht.

Betrachten Sie beispielsweise ein typisches Dashboard-Design:

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

Wenn Sie zu /dashboard/user navigieren, wird das Benutzer-Dashboard gerendert, während /dashboard/team das Team-Dashboard anzeigt. Die beiden schlossen sich gegenseitig aus. Um ein anderes Segment anzuzeigen, müsste ein Benutzer normalerweise seine aktuelle Ansicht vollständig verlassen.

Dies stellte eine Herausforderung dar, insbesondere wenn Entwickler mehrere Segmente einer Website gleichzeitig oder bedingt anzeigen wollten. Dem traditionellen Routing-Ansatz mangelte es an Flexibilität, was es schwierig machte, komplexe, interaktive Layouts wie nebeneinander liegende Dashboards oder Modals zu erstellen, ohne auf komplizierte Statusverwaltung oder Problemumgehungen zurückgreifen zu müssen.

Glücklicherweise hat sich diese Landschaft mit der Weiterentwicklung von Frameworks wie Next.js und der Einführung paralleler Routen drastisch verändert und eine neue Ära des dynamischen und adaptiven Webdesigns eingeläutet.

3. Parallele Routen verstehen

Parallele Routen sind bahnbrechende Funktionen, die in Next.js 13.3 eingeführt wurden und die Herangehensweise von Entwicklern an das Routing und die Präsentation von Inhalten im Web erheblich verändern.

3.1 Einführung in Parallelrouten:

Next.js 13.3 bringt eine neue dynamische Konvention mit sich, die die Implementierung komplexerer Routing-Fälle ermöglicht. Wie in der Dokumentation angegeben,

„Mit parallelen Routen können Sie mehr als eine Seite in derselben Ansicht anzeigen, beispielsweise bei komplexen Dashboards oder Modalitäten. Mit parallelen Routen können Sie eine oder mehrere Seiten gleichzeitig in derselben Ansicht rendern, die unabhängig voneinander navigiert werden können.“

Einfacher ausgedrückt können verschiedene Komponenten oder Abschnitte Ihrer App gleichzeitig geladen werden, was ein Gefühl von Flüssigkeit und Reaktionsfähigkeit vermittelt, insbesondere wenn bestimmte Komponenten aufgrund des Datenabrufs oder des Renderings länger dauern.

3.2 Anwendungsfälle: Dashboards, Modalitäten und mehr:

Die Struktur moderner Webanwendungen erfordert häufig erweiterte Layouts, die mehrere Ansichten kombinieren oder kontextbezogene Popups erfordern, ohne dass der zugrunde liegende Inhalt verloren geht.

Nehmen Sie das Beispiel aus der Dokumentation:

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

Dieses Layout zeigt, wie parallele Routen verwendet werden können, um Benutzer- und Team-Dashboards gleichzeitig in derselben Ansicht anzuzeigen, indem benannte „Slots“ verwendet werden, eine Funktion, die diesem neuen Routing-Ansatz eigen ist.

3.3 Vorteile: Mehrseitenansicht, bedingtes Rendering, unabhängige Navigation:

Die Vorteile von Parallelrouten sind vielfältig. Wie hervorgehoben, erlauben sie:

„Gleichzeitiges Rendern einer oder mehrerer Seiten in derselben Ansicht, die unabhängig voneinander navigiert werden können“.

Darüber hinaus können sie für das bedingte Rendern von Seiten genutzt werden und bieten so ein beispielloses Maß an Flexibilität und Dynamik für Webanwendungen.

Im Wesentlichen sind Webentwickler mit der Einführung von Parallel Routes nun besser in der Lage, komplexe, dynamische und benutzerfreundliche Webschnittstellen zu erstellen, die auf die sich entwickelnden Anforderungen des modernen Webs zugeschnitten sind.

4. Wie parallele Routen funktionieren

Ein tieferer Einblick in Parallel Routes zeigt, wie intelligent Next.js 13.3 aufgebaut ist. Gehen wir die Details Schritt für Schritt durch.

4.1 Einführung in „Slots“ und die @folder-Konvention:

Das Konzept der „Slots“ ist das Herzstück von Parallel Routes. Stellen Sie sich Slots als bestimmte Bereiche vor, in denen verschiedene Seiten oder Teile Ihrer Website angezeigt werden können.

Die @folder Konvention ist die Methode, die zum Einrichten dieser Slots verwendet wird, wie aus dem Hinweis in der Dokumentation hervorgeht:

„Parallele Routen verwenden diese benannten ‚Slots‘, die mit der @folder-Methode definiert werden.“

• Code-Erklärung:

  
  

  • Ordnerstruktur für parallele Routen: Betrachten Sie dieses Beispiel:

     dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js

    Dabei fungieren „@user“ und „@team“ als Container für unterschiedliche Inhalte, wodurch wir unsere Website flexibler gestalten können.

    
    

  • Wie Layouts Slots als Requisiten verwenden: Basierend auf der Dokumentation kann die Anlage innerhalb desselben Routensegments diese Slots als Requisiten nutzen. Hier ist ein klares Beispiel:

     export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }

    
    

  • Hinweis: Im obigen Code wird die Funktion getCurrentUserType() verwendet, um den Benutzertyp zu bestimmen, der wiederum bestimmt, ob der user oder team Slot angezeigt wird.

    
    

• Implizite vs. explizite Routen-Slots: Eine der Stärken des Next.js-Routings ist seine Flexibilität. Während „@user“ und „@team“ in unserem Beispiel explizite Slots sind, die wir definieren (direkt mit einem @folder verknüpft), gibt es auch einen impliziten oder automatischen Slot.

  
  

• Die Dokumentation erklärt, dass die

  „ children ist diese Art von automatischem Slot, und wir müssen ihn nicht mit einem @folder verknüpfen. Daher funktioniert dashboard/page.js genauso wie dashboard/@children/page.js .“

Durch ein gründliches Verständnis der Funktionsweise von Parallel Routes können Entwickler die Funktionen von Next.js 13 optimieren und Websites erstellen, die intuitiver und anpassungsfähiger sind.

5. Eine Schritt-für-Schritt-Anleitung zur Verwendung paralleler Routen

5.1 Einrichten einer neuen Next.js-App

Beginnen Sie mit der Erstellung einer neuen Next.js-Anwendung:

 npx create-next-app@latest parallel-routes

Navigieren Sie in das Verzeichnis der neu erstellten App:

 cd parallel-routes

Starten Sie den Entwicklungsserver:

 yarn dev

5.2 Strukturierung der App

Erstellen Sie im Projektverzeichnis die folgenden Ordner und Dateien:

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 Erstellen der Comps und Simulieren des Datenladens

In app/@folder1/page.js erstellen wir die Komponente, um eine Ladezeit anzuzeigen und zu simulieren, um die visuelle Reihenfolge zu verstehen, in der Komponenten geladen werden:

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

Ebenso in app/@folder2/page.js :

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

Mithilfe dieser simulierten Ladezeiten können Sie die Leistungsfähigkeit paralleler Routen visuell beurteilen.

5.4 Layoutcode aktualisieren

Passen Sie in app/layout.js den Layoutcode an, um die beiden Ordner aufzunehmen:

Vor:

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

Nach:

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

Für eine bessere Lesbarkeit können Sie das Layout so gut wie möglich gestalten

5.5 Ladezustände hinzufügen

In der Dokumentation von Next.J heißt es:

Die spezielle Datei loading.js hilft Ihnen, eine aussagekräftige Loading-UI mit React Suspense zu erstellen. Mit dieser Konvention können Sie einen sofortigen Ladestatus vom Server anzeigen, während der Inhalt eines Routensegments geladen wird. Der neue Inhalt wird automatisch eingefügt, sobald das Rendern abgeschlossen ist.

Für jede Komponente (Ordner1 und Ordner2) erstellen wir einen Ladestatus. Ihre Ordnerstruktur sollte wie folgt aussehen:

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

app/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

app/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6. Ändern Sie die Seite

Passen Sie den Inhalt von app/page.js an.

Diese Änderung stellt sicher, dass auf der Hauptseite nichts angezeigt wird, sodass die parallelen Routen glänzen:

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }

Haftungsausschluss

Beim Üben mit parallelen Routen habe ich festgestellt, dass beim Hot-Reload die Routen nicht wie erwartet angezeigt wurden. Ich habe das Problem nicht untersucht und kann Ihnen daher nicht genau sagen, wo das Problem liegt. Wenn dies auftritt, starten Sie einfach den Entwicklungsserver neu, um die Änderungen zu übernehmen.

Abschluss

Parallele Routen, die in Next.js 13.3 eingeführt wurden, haben einen bedeutenden Fortschritt im Bereich der Webentwicklung markiert.

Vor ihrer Einführung standen Entwickler vor der Herausforderung, mehrere Segmente einer Website gleichzeitig anzuzeigen, da das herkömmliche Routing ein eher lineares Erlebnis bot.

Mit parallelen Routen bietet Next.js einen innovativen Ansatz für dynamisches Webdesign, der das gleichzeitige Rendern mehrerer Seiten in einer einzigen Ansicht ermöglicht.

Diese leistungsstarke Funktion sorgt nicht nur für ein verbessertes Benutzererlebnis, sondern erleichtert auch komplexe Layouts und bedingte Renderings und verschiebt damit die Grenzen des modernen Webanwendungsdesigns.

Durch Befolgen der oben bereitgestellten detaillierten Anleitung können Entwickler tief in die Funktionsweise paralleler Routen eintauchen, vom Verständnis der Kernkonzepte wie „Slots“ und der „@folder“-Konvention bis hin zur praktischen Implementierung mithilfe des Next.js-Frameworks.

Auch wenn es ein paar Unebenheiten geben kann, wie zum Beispiel das bekannte Hot-Reloading-Problem, ist die Lernkurve aufgrund der Flexibilität und Dynamik, die Webanwendungen durch parallele Routen hinzugefügt werden, lohnenswert.

Während sich die digitale Landschaft weiterentwickelt, werden Tools und Funktionen wie diese zweifellos eine entscheidende Rolle bei der Gestaltung der Zukunft der Webentwicklung spielen.

Nochmals vielen Dank für Ihre Geduld und Ihr Engagement.

Haben Sie Feedback oder Fragen? Sie können dies gerne teilen. Jede Stimme schafft einen Mehrwert.

Kontaktieren Sie mich unter:

dev.to Community @leandro_nnz hackernoon.com Community @leandronnz hashnode.com Leandronnz twitter.com @digpollution

Bis zum nächsten Mal, viel Spaß beim Codieren!

Verweise

Den vollständigen Code in diesem Repo finden Sie hier .

Offizielle Next.js-Dokumentation hier .

Zum Erstellen dieses Artikels habe ich StackEdit verwendet.

Foto von Markus Spiske auf Unsplash