Assets, Metadaten und CSS

Die zweite Seite, die wir hinzugefügt haben, hat derzeit kein Styling. Fügen wir etwas CSS hinzu, um die Seite zu gestalten.

Next.js bietet integrierte Unterstützung für CSS und Sass. Für diesen Kurs werden wir CSS verwenden.

Diese Lektion behandelt auch, wie Next.js mit statischen Assets wie Bildern und Seitenmetadaten wie dem <title>-Tag umgeht.

Was Sie in dieser Lektion lernen werden

In dieser Lektion lernen Sie:

  • Wie man statische Dateien (Bilder etc.) zu Next.js hinzufügt.
  • Wie man anpasst, was im <head> jeder Seite enthalten ist.
  • Wie man eine wiederverwendbare React-Komponente erstellt, die mit CSS Modules gestaltet wird.
  • Wie man globales CSS in pages/_app.js hinzufügt.
  • Einige nützliche Tipps für das Styling in Next.js.

Voraussetzungen

  • Grundkenntnisse in CSS. Dieser Kurs zeigt, wie man CSS in einer Next.js-App hinzufügt, behandelt aber nicht die CSS-Grundlagen.

Wenn Sie nach detaillierter Dokumentation zum Styling in Next.js suchen, sehen Sie sich die CSS-Dokumentation an.

On this page