Summary  
This chapter covers how to import and apply a global CSS file in the root layout component to enforce consistent styles across an entire application.

General domain of usage  
Front-end web development (UI styling)

Globale CSS-Dateien enthalten typischerweise Elemente wie Layout, Typografie und andere konsistente Designmuster über verschiedene Teile der Anwendung hinweg.

Wenn Sie zum Ordner `app/ui` navigieren, finden Sie eine Datei namens `global.css`. Diese Datei ermöglicht es Ihnen, CSS-Regeln auf alle Routen in Ihrer App anzuwenden. Obwohl Sie `global.css` in jeder Komponente einbinden können, wird empfohlen, es im Root-Layout (`app/layout.tsx`), der Hauptkomponente der App, einzubinden.

Lassen Sie uns die globalen Stile zur App hinzufügen. Gehen Sie zu `app/layout.tsx` und importieren Sie die Datei `global.css`.

Nach dem Einbinden der globalen Styles sollten Sie die folgende Ansicht sehen, wenn der lokale Entwicklungsserver noch läuft: <a href="http://localhost:3000/" 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'" >http://localhost:3000/</a>

Next.js ist ein React-Framework, das für die Erstellung von Full-Stack-Webanwendungen entwickelt wurde. Mit Next.js nutzen Sie React, um Benutzeroberflächen zu erstellen, während Sie von zusätzlichen Funktionen und Optimierungen des Frameworks profitieren.

Lassen Sie uns besprechen, was Sie lernen müssen, bevor Sie in das Next.js-Framework eintauchen, was Sie von diesem Kurs erwarten können und was Sie bauen werden.

Wir werden das Projekt einrichten, Möglichkeiten zur Hinzufügung von Styling zu unserer App untersuchen und visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts behandeln.

Lernen Sie, wie Sie einfach eine neue Ansicht für Ihre App erstellen und verwalten und nahtlos durch alle Seiten mit einem integrierten Routing-System navigieren können.

Stellen Sie die Next.js-App mit GitHub- und Vercel-Konten bereit. Richten Sie zusätzlich eine Datenbank ein, um die App mit den notwendigen Daten zu versorgen.

Überlegen Sie, wie Sie Daten klar und effizient abrufen und dem Benutzer anzeigen können.

Entdecken Sie, wie Sie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und mehr implementieren.

Implementierung der Authentifizierung in Next.js.

Hinzufügen der Globalen CSS-Datei

In der Praxis

Awesome!

Hinzufügen der Globalen CSS-Datei

In der Praxis