Summary  
CSS Modules automatically generate unique class names to scope CSS to specific components and prevent style collisions, enabling modular and maintainable styling.

General domain of usage  
Styling UI components in front-end web development

CSS-Module erstellen automatisch eindeutige Klassennamen, wodurch das CSS-Scoping auf eine bestimmte Komponente beschränkt wird und Stilkonflikte vermieden werden. Einfache CSS-Regeln können innerhalb der CSS-Module geschrieben werden.

## Zurück zum Projekt
Lassen Sie uns ein CSS-Modul namens `home.module.css` im Ordner `app/ui` erstellen und die folgenden CSS-Regeln einfügen:

```css
.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: rgb(255 255 255);
  border-radius: 9999px;
}
```

Wir sollten die Datei `home.module.css` in die Datei `app/page.tsx` importieren und dann die Klasse `styles.circle` auf das `div`-Element anwenden, das wir zuvor erstellt haben.

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.

CSS-Module

Zurück zum Projekt

In der Praxis

Awesome!

CSS-Module

Zurück zum Projekt

In der Praxis