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   navigieren, wird das Benutzer-Dashboard gerendert, während   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. /dashboard/user /dashboard/team  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   Konvention ist die Methode, die zum Einrichten dieser Slots verwendet wird, wie aus dem Hinweis in der Dokumentation hervorgeht: @folder  „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} </> ); }    Funktion   verwendet, um den Benutzertyp zu bestimmen, der wiederum bestimmt, ob der   oder   Slot angezeigt wird. Hinweis: Im obigen Code wird die getCurrentUserType() user team  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   verknüpft), gibt es auch einen impliziten oder automatischen Slot. @folder  Die Dokumentation erklärt, dass die  „   ist diese Art von automatischem Slot, und wir müssen ihn nicht mit einem   verknüpfen. Daher funktioniert   genauso wie   .“ children @folder dashboard/page.js 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   erstellen wir die Komponente, um eine Ladezeit anzuzeigen und zu simulieren, um die visuelle Reihenfolge zu verstehen, in der Komponenten geladen werden: app/@folder1/page.js   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   den Layoutcode an, um die beiden Ordner aufzunehmen: app/layout.js   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    heißt es: In der Dokumentation von Next.J  Die spezielle Datei   hilft Ihnen, eine aussagekräftige Loading-UI mit   zu erstellen. Mit dieser Konvention können Sie einen   vom Server anzeigen, während der Inhalt eines Routensegments geladen wird. Der neue Inhalt wird automatisch eingefügt, sobald das Rendern abgeschlossen ist. loading.js React Suspense sofortigen Ladestatus  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   an. app/page.js  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:    Community     Community          dev.to @leandro_nnz hackernoon.com @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   verwendet. StackEdit   Foto von   auf  Markus Spiske Unsplash

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Make resilience your competitive advantage

Next.Js 13 parallele Routen: Ein umfassender Leitfaden

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

HackerNoon Decoded 2024: Celebrating Our AI Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

HackerNoon Decoded 2024: Celebrating Our AI Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps