CSS Modules und globale Styles

Next.js unterstützt verschiedene Arten von Stylesheets, darunter:

CSS Modules
Globale Styles
Externe Stylesheets

CSS Modules

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

CSS Modules begrenzen CSS lokal durch automatische Erstellung eines eindeutigen Klassennamens. Dies ermöglicht die Verwendung desselben Klassennamens in verschiedenen Dateien ohne Kollisionsgefahr. Dieses Verhalten macht CSS Modules zur idealen Wahl für komponentenspezifisches CSS.

Beispiel

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

import styles from './styles.module.css'

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

import styles from './styles.module.css'

export default function DashboardLayout({ children }) {
  return <section className={styles.dashboard}>{children}</section>
}

app/dashboard/styles.module.css

.dashboard {
  padding: 24px;
}

CSS Modules sind nur für Dateien mit den Endungen .module.css und .module.sass aktiviert.

In der Produktion werden alle CSS Module-Dateien automatisch in mehrere minimierte und code-aufgeteilte .css-Dateien zusammengeführt. Diese .css-Dateien repräsentieren wichtige Ausführungspfade in Ihrer Anwendung und stellen sicher, dass nur die minimal benötigte Menge an CSS geladen wird.

Globale Styles

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

Gut zu wissen: Dies unterscheidet sich vom pages-Verzeichnis, wo globale Styles nur in der _app.js-Datei importiert werden können.

Betrachten Sie beispielsweise ein Stylesheet namens 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 Styles auf jede Route Ihrer Anwendung anzuwenden:

// Diese Styles gelten für jede Route in der Anwendung
import './global.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// Diese Styles gelten für jede Route in der Anwendung
import './global.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Externe Stylesheets

Stylesheets, die von externen Paketen veröffentlicht werden, können überall im app-Verzeichnis importiert werden, einschließlich colokalisierter Komponenten:

import 'bootstrap/dist/css/bootstrap.css'

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

import 'bootstrap/dist/css/bootstrap.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

Gut zu wissen: Externe Stylesheets müssen direkt aus einem npm-Paket importiert oder heruntergeladen und mit Ihrem Codebase colokalisiert werden. Sie können <link rel="stylesheet" /> nicht verwenden.

Reihenfolge und Zusammenführung

Next.js optimiert CSS während Produktions-Builds durch automatisches Chunking (Zusammenführen) von Stylesheets. Die CSS-Reihenfolge wird durch die Reihenfolge bestimmt, in der Sie die Stylesheets in Ihren Anwendungscode importieren.

Beispielsweise wird base-button.module.css vor page.module.css geordnet, da <BaseButton> zuerst in <Page> importiert wird:

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

import { BaseButton } from './base-button'
import styles from './page.module.css'

export function Page() {
  return <BaseButton className={styles.primary} />
}

import { BaseButton } from './base-button'
import styles from './page.module.css'

export function Page() {
  return <BaseButton className={styles.primary} />
}

Für eine vorhersehbare Reihenfolge empfehlen wir:

Importieren Sie eine CSS-Datei nur in eine einzige JS/TS-Datei.
- Bei Verwendung globaler Klassennamen importieren Sie die globalen Styles in derselben Datei in der gewünschten Anwendungsreihenfolge.
Bevorzugen Sie CSS Modules gegenüber globalen Styles.
- Verwenden Sie eine konsistente Namenskonvention für Ihre CSS Modules. Beispielsweise <name>.module.css statt <name>.tsx.
Extrahieren Sie gemeinsame Styles in eine separate Shared-Komponente.
Bei Verwendung von Tailwind importieren Sie das Stylesheet am Anfang der Datei, vorzugsweise im Root Layout.

Gut zu wissen: Die CSS-Reihenfolge verhält sich im Entwicklungsmodus anders. Überprüfen Sie immer Preview-Deployments, um die endgültige CSS-Reihenfolge in Ihrem Produktions-Build zu verifizieren.

Zusätzliche Funktionen

Next.js enthält zusätzliche Funktionen zur Verbesserung der Stylesheet-Erstellung:

Bei lokaler Ausführung mit next dev nutzen lokale Stylesheets (global oder CSS Modules) Fast Refresh, um Änderungen sofort nach dem Speichern zu reflektieren.
Beim Produktions-Build mit next build werden CSS-Dateien in weniger minimierte .css-Dateien gebündelt, um die Anzahl der Netzwerkanfragen zu reduzieren.
Wenn JavaScript deaktiviert ist, werden Styles im Produktions-Build (next start) trotzdem geladen. Für next dev ist jedoch weiterhin JavaScript erforderlich, um Fast Refresh zu ermöglichen.