CSS Modules

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

CSS Modules begrenzen CSS lokal, indem automatisch ein eindeutiger Klassenname erstellt wird. Dadurch können Sie denselben Klassennamen in verschiedenen Dateien verwenden, ohne Kollisionen befürchten zu müssen. Dieses Verhalten macht CSS Modules zur idealen Methode 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 eine optionale Funktion und werden nur für Dateien mit der Endung .module.css aktiviert. Reguläre <link>-Stylesheets und globale CSS-Dateien werden weiterhin unterstützt.

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, um Ihre Anwendung darzustellen.

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 Sie globale Styles nur in der _app.js-Datei importieren 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 kein <link rel="stylesheet" /> verwenden.

Zusätzliche Funktionen

Next.js enthält zusätzliche Funktionen, um das Erstellen von Styles zu verbessern:

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

Beispiel

Globale Styles

Externe Stylesheets

Zusätzliche Funktionen

On this page