App Router: CSS-Styling | Next.js

Aktuell hat Ihre Startseite keine Stile. Schauen wir uns die verschiedenen Möglichkeiten an, wie Sie Ihre Next.js-Anwendung gestalten können.

Globale Stile

Wenn Sie sich den Ordner /app/ui ansehen, finden Sie eine Datei namens global.css. Sie können diese Datei verwenden, um CSS-Regeln für alle Routen in Ihrer Anwendung hinzuzufügen – wie CSS-Reset-Regeln, seitenweite Stile für HTML-Elemente wie Links und mehr.

Sie können global.css in jeder Komponente Ihrer Anwendung importieren, aber es ist in der Regel eine gute Praxis, sie in Ihre Top-Level-Komponente einzufügen. In Next.js ist dies das Root-Layout (mehr dazu später).

Fügen Sie globale Stile zu Ihrer Anwendung hinzu, indem Sie zu /app/layout.tsx navigieren und die Datei global.css importieren:

/app/layout.tsx

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Während der Entwicklungsserver noch läuft, speichern Sie Ihre Änderungen und sehen Sie sie sich im Browser an. Ihre Startseite sollte jetzt so aussehen:

Aber warten Sie einen Moment, Sie haben keine CSS-Regeln hinzugefügt – woher kommen die Stile?

Wenn Sie sich global.css ansehen, werden Sie einige @tailwind-Direktiven bemerken:

/app/ui/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind ist ein CSS-Framework, das den Entwicklungsprozess beschleunigt, indem es Ihnen ermöglicht, schnell Utility-Klassen direkt in Ihren React-Code zu schreiben.

In Tailwind gestalten Sie Elemente, indem Sie Klassennamen hinzufügen. Zum Beispiel wird "text-blue-500" den Text eines <h1>-Elements blau färben:

<h1 className="text-blue-500">I'm blue!</h1>

Obwohl die CSS-Stile global geteilt werden, wird jede Klasse einzeln auf jedes Element angewendet. Das bedeutet, wenn Sie ein Element hinzufügen oder löschen, müssen Sie sich keine Gedanken über separate Stylesheets, Stilkonflikte oder die Größe Ihres CSS-Bundles machen, während Ihre Anwendung wächst.

Wenn Sie create-next-app verwenden, um ein neues Projekt zu starten, wird Next.js Sie fragen, ob Sie Tailwind verwenden möchten. Wenn Sie ja auswählen, installiert Next.js automatisch die notwendigen Pakete und konfiguriert Tailwind in Ihrer Anwendung.

Wenn Sie sich /app/page.tsx ansehen, werden Sie feststellen, dass wir im Beispiel Tailwind-Klassen verwenden.

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // Dies sind Tailwind-Klassen:
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}

Machen Sie sich keine Sorgen, wenn Sie zum ersten Mal Tailwind verwenden. Um Zeit zu sparen, haben wir bereits alle Komponenten gestaltet, die Sie verwenden werden.

Lassen Sie uns mit Tailwind experimentieren! Kopieren Sie den folgenden Code und fügen Sie ihn über dem <p>-Element in /app/page.tsx ein:

/app/page.tsx

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

Wenn Sie es bevorzugen, traditionelle CSS-Regeln zu schreiben oder Ihre Stile von Ihrem JSX getrennt zu halten – sind CSS-Module eine gute Alternative.

CSS-Module

CSS-Module ermöglichen es Ihnen, CSS auf eine Komponente zu beschränken, indem automatisch eindeutige Klassennamen erstellt werden, sodass Sie sich ebenfalls keine Gedanken über Stilkonflikte machen müssen.

Wir werden in diesem Kurs weiterhin Tailwind verwenden, aber lassen Sie uns einen Moment nehmen, um zu sehen, wie Sie dieselben Ergebnisse wie im obigen Quiz mit CSS-Modulen erreichen können.

Erstellen Sie im Ordner /app/ui eine neue Datei namens home.module.css und fügen Sie die folgenden CSS-Regeln hinzu:

/app/ui/home.module.css

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Importieren Sie dann in Ihrer Datei /app/page.tsx die Stile und ersetzen Sie die Tailwind-Klassennamen des hinzugefügten <div> durch styles.shape:

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
  )
}

Speichern Sie Ihre Änderungen und sehen Sie sie sich im Browser an. Sie sollten dieselbe Form wie zuvor sehen.

Tailwind und CSS-Module sind die beiden gängigsten Methoden, um Next.js-Anwendungen zu gestalten. Ob Sie die eine oder die andere verwenden, ist eine Frage der Präferenz – Sie können sogar beide in derselben Anwendung verwenden!

Verwendung der `clsx`-Bibliothek zum Umschalten von Klassennamen

Es kann Fälle geben, in denen Sie ein Element basierend auf dem Zustand oder einer anderen Bedingung bedingt gestalten müssen.

clsx ist eine Bibliothek, mit der Sie Klassennamen einfach umschalten können. Wir empfehlen, einen Blick in die Dokumentation zu werfen, aber hier ist die grundlegende Verwendung:

Angenommen, Sie möchten eine InvoiceStatus-Komponente erstellen, die status akzeptiert. Der Status kann 'pending' oder 'paid' sein.
Wenn er 'paid' ist, soll die Farbe grün sein. Wenn er 'pending' ist, soll die Farbe grau sein.

Sie können clsx verwenden, um die Klassen bedingt anzuwenden, wie hier:

/app/ui/invoices/status.tsx

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

Andere Styling-Lösungen

Zusätzlich zu den besprochenen Ansätzen können Sie Ihre Next.js-Anwendung auch mit folgenden Methoden gestalten:

Sass, das Ihnen erlaubt, .css- und .scss-Dateien zu importieren.
CSS-in-JS-Bibliotheken wie styled-jsx, styled-components und emotion.

Werfen Sie einen Blick in die CSS-Dokumentation für weitere Informationen.

CSS-Styling

Globale Stile

Tailwind

CSS-Module

Verwendung der clsx-Bibliothek zum Umschalten von Klassennamen

Andere Styling-Lösungen

On this page

Verwendung der `clsx`-Bibliothek zum Umschalten von Klassennamen