CSS

Next.js unterstützt mehrere Methoden zur CSS-Handhabung, einschließlich:

CSS-Module
Globale Stile
Externe Stylesheets

CSS-Module

Next.js bietet integrierte Unterstützung für CSS-Module mit der Dateiendung .module.css.

CSS-Module begrenzen CSS lokal, indem automatisch eindeutige Klassennamen erstellt werden. Dies ermöglicht die Verwendung desselben Klassennamens in verschiedenen Dateien ohne Namenskollisionen. Dieses Verhalten macht CSS-Module zur idealen Methode für komponentenbezogene CSS-Stile.

Beispiel

CSS-Module können in jede Datei innerhalb des app-Verzeichnisses importiert werden:

app/dashboard/layout.tsx

TypeScript

import styles from './styles.module.css'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

app/dashboard/styles.module.css

.dashboard {
  padding: 24px;
}

CSS-Module sind nur für Dateien mit den Erweiterungen .module.css und .module.sass aktiviert.

In der Produktionsversion werden alle CSS-Modul-Dateien automatisch in mehrere minifizierte und Code-gesplittete .css-Dateien zusammengeführt. Diese .css-Dateien repräsentieren Hot-Execution-Pfade in Ihrer Anwendung und gewährleisten, dass nur die minimal erforderliche CSS-Menge für das Rendering der Anwendung geladen wird.

Globale Stile

Globale Stile können in jedes Layout, jede Seite oder Komponente innerhalb des app-Verzeichnisses importiert werden.

Hinweis:

Dies unterscheidet sich vom pages-Verzeichnis, wo globale Stile nur innerhalb der _app.js-Datei importiert werden können.

Next.js unterstützt die Verwendung globaler Stile nur, wenn sie tatsächlich global sind, das heißt, sie können auf alle Seiten angewendet werden und für die gesamte Lebensdauer der Anwendung existieren. Dies liegt daran, dass Next.js die in React integrierte Unterstützung für Stylesheets zur Integration mit Suspense nutzt. Diese integrierte Unterstützung entfernt Stylesheets derzeit nicht beim Navigieren zwischen Routen. Aus diesem Grund empfehlen wir die Verwendung von CSS-Modulen anstelle globaler Stile.

Betrachten wir beispielsweise ein Stylesheet mit dem Namen app/global.css:

app/global.css

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Importieren Sie das global.css-Stylesheet im Root-Layout (app/layout.js), um die Stile auf jede Route in Ihrer Anwendung anzuwenden:

app/layout.tsx

TypeScript

// Diese Stile werden auf jede Route in der Anwendung angewendet
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Externe Stylesheets

Von externen Paketen veröffentlichte Stylesheets können an beliebiger Stelle im app-Verzeichnis importiert werden, einschließlich zusammengestellter Komponenten:

app/layout.tsx

TypeScript

import 'bootstrap/dist/css/bootstrap.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

Hinweis: Externe Stylesheets müssen direkt von einem npm-Paket importiert oder heruntergeladen und mit Ihrer Codebasis zusammengestellt werden. Die Verwendung von <link rel="stylesheet" /> ist nicht möglich.

Reihenfolge und Zusammenführung

Next.js optimiert CSS während der Produktions-Builds, indem Stylesheets automatisch in Chunks (zusammengeführt) werden. Die CSS-Reihenfolge wird durch die Reihenfolge der Stylesheet-Importe im Anwendungscode bestimmt.

Zum Beispiel wird base-button.module.css vor page.module.css angeordnet, da <BaseButton> zuerst in <Page> importiert wird:

base-button.tsx

TypeScript

import styles from './base-button.module.css'
 
export function BaseButton() {
  return <button className={styles.primary} />
}

page.ts

TypeScript

import { BaseButton } from './base-button'
import styles from './page.module.css'
 
export function Page() {
  return <BaseButton className={styles.primary} />
}

Um eine vorhersehbare Reihenfolge zu gewährleisten, empfehlen wir Folgendes:

Importieren Sie eine CSS-Datei nur in einer einzigen JS/TS-Datei.
- Bei Verwendung globaler Klassenamen importieren Sie die globalen Styles in derselben Datei in der Reihenfolge, in der sie angewendet werden sollen.
Bevorzugen Sie CSS-Module gegenüber globalen Styles.
- Verwenden Sie eine konsistente Benennungskonvention für Ihre CSS-Module. Zum Beispiel <name>.module.css statt <name>.tsx.
Extrahieren Sie gemeinsam genutzte Styles in eine separate gemeinsame Komponente.
Bei Verwendung von Tailwind importieren Sie das Stylesheet am Anfang der Datei, vorzugsweise im Root Layout.
Deaktivieren Sie Linter/Formatierer (z.B. ESLints sort-import), die Ihre Imports automatisch sortieren. Dies kann versehentlich Ihr CSS beeinflussen, da die CSS-Import-Reihenfolge wichtig ist.

Hinweis:

Die CSS-Reihenfolge kann sich im Entwicklungsmodus anders verhalten, stellen Sie sicher, den Build (next build) zu überprüfen, um die endgültige CSS-Reihenfolge zu verifizieren.

Sie können die Option cssChunking in next.config.js verwenden, um zu steuern, wie CSS in Chunks aufgeteilt wird.

Zusätzliche Funktionen

Next.js bietet zusätzliche Funktionen, um die Erstellungserfahrung beim Hinzufügen von Styles zu verbessern:

Bei lokaler Ausführung mit next dev profitieren lokale Stylesheets (global oder CSS-Module) von Fast Refresh, um Änderungen sofort zu reflektieren, sobald Bearbeitungen gespeichert werden.
Beim Produktions-Build mit next build werden CSS-Dateien in weniger minifizierte .css-Dateien gebündelt, um die Anzahl der Netzwerkanfragen zum Abrufen von Styles zu reduzieren.
Wenn JavaScript deaktiviert ist, werden Styles im Produktions-Build (next start) weiterhin geladen. Für next dev ist JavaScript jedoch erforderlich, um Fast Refresh zu ermöglichen.