Summary
This chapter demonstrates how to create a reusable layout component that composes shared UI elements (such as a side navigation) and renders nested content via a children prop, leveraging framework conventions for route-level layouts.

General domain of usage
Web application dashboards

Entwurf eines Layouts für die gesamte Anwendung. In diesem Szenario wird eine Komponente erstellt, die die Navigation durch die Seiten der Anwendung unterstützt und zudem die Möglichkeit zum Ausloggen bietet (weitere Informationen zur Autorisierung folgen in den nächsten Kapiteln).

## Zurück zum Projekt
Nun wird eine `layout.tsx` für das Dashboard generiert. Im Verzeichnis `/dashboard` eine neue Datei mit dem Namen `layout.tsx` anlegen und den folgenden Code einfügen:

In diesem Code finden einige wichtige Aktionen statt. Eine genauere Betrachtung:
- Die Komponente `<SideNav />` wird eingebunden und ist Teil des Layouts. Alle Komponenten, die hier importiert werden, sind Bestandteil des gesamten Seitendesigns;
- Die Komponente `<Layout />` verfügt über eine `children`-Prop. Dieses "Child" kann entweder eine Seite oder ein weiteres Layout sein. Insbesondere werden die Seiten im Verzeichnis `/dashboard` automatisch innerhalb eines `<Layout />` platziert.


Versuchen Sie nun, dem Link <a href="http://localhost:3000/dashboard" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> http://localhost:3000/dashboard</a> zu folgen und zwischen der Dashboard- und der Rechnungsseite zu navigieren.

Erlernen Sie den Aufbau moderner, leistungsstarker Webanwendungen mit Next.js. Richten Sie Projekte mit strukturierten Layouts, Styling und Routing für eine nahtlose Navigation ein. Effizientes Abrufen und Anzeigen von Daten bei gleichzeitiger Optimierung von Rendering und Performance. Implementieren Sie fortgeschrittene Funktionen wie Paginierung, CRUD-Operationen und globale Suche für dynamische Webanwendungen. Stellen Sie Ihre Next.js-Projekte bereit, verbinden Sie diese mit Datenbanken und fügen Sie Authentifizierung zum Schutz von Benutzerdaten hinzu.

Wir besprechen die erforderlichen Vorkenntnisse für die Arbeit mit dem Next.js-Framework, die Kursinhalte sowie die zu entwickelnden Projekte.

Wir richten das Projekt ein, untersuchen Möglichkeiten zur Einbindung von Styling in unsere Anwendung und behandeln visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts.

Erfahren Sie, wie Sie mühelos eine neue Ansicht für Ihre Anwendung erstellen und verwalten sowie mit einem integrierten Routingsystem nahtlos durch alle Seiten navigieren.

Bereitstellung der Next.js-App mit GitHub- und Vercel-Konten. Zusätzlich Einrichtung einer Datenbank zur Bereitstellung der erforderlichen Daten für die App.

Überlegungen zum klaren und effizienten Abrufen sowie zur Darstellung von Daten für den Benutzer.

Erfahren Sie, wie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und weitere implementiert werden.

Implementierung der Authentifizierung in Next.js.

Erstellung Einer Gemeinsamen Layout-Komponente

Zurück zum Projekt

Awesome!

Erstellung Einer Gemeinsamen Layout-Komponente

Zurück zum Projekt