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

Betrachten Sie beispielsweise eine wiederverwendbare Button-Komponente im components/-Ordner:

Erstellen Sie zunächst components/Button.module.css mit folgendem Inhalt:

/*
Sie müssen sich keine Sorgen machen, dass .error {} mit anderen `.css`- oder
`.module.css`-Dateien kollidiert!
*/
.error {
  color: white;
  background-color: red;
}

Erstellen Sie dann components/Button.js, importieren Sie die obige CSS-Datei und verwenden Sie sie:

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

export function Button() {
  return (
    <button
      type="button"
      // Beachten Sie, wie die "error"-Klasse als Eigenschaft des importierten
      // `styles`-Objekts aufgerufen wird.
      className={styles.error}
    >
      Zerstören
    </button>
  )
}

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

Um ein Stylesheet zu Ihrer Anwendung hinzuzufügen, importieren Sie die CSS-Datei in pages/_app.js.

Betrachten Sie beispielsweise das folgende Stylesheet namens styles.css:

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Erstellen Sie eine pages/_app.js-Datei, falls noch nicht vorhanden. Importieren Sie dann die styles.css-Datei mit import.

import '../styles.css'

// Dieser Standardexport ist in einer neuen `pages/_app.js`-Datei erforderlich.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Diese Styles (styles.css) gelten für alle Seiten und Komponenten in Ihrer Anwendung. Aufgrund des globalen Charakters von Stylesheets und um Konflikte zu vermeiden, dürfen Sie sie nur innerhalb von pages/_app.js importieren.

In der Entwicklung ermöglicht diese Art der Stylesheet-Definition ein Hot Reloading der Styles während der Bearbeitung – d.h., Sie können den Anwendungszustand beibehalten.

In der Produktion werden alle CSS-Dateien automatisch in eine einzige minimierte .css-Datei zusammengeführt. Die Reihenfolge der Zusammenführung entspricht der Reihenfolge, in der die CSS-Dateien in _app.js importiert wurden. Achten Sie besonders auf importierte JS-Module, die eigenes CSS enthalten; das CSS des JS-Moduls wird nach denselben Regeln wie importierte CSS-Dateien zusammengeführt. Beispiel:

import '../styles.css'
// Das CSS in ErrorBoundary hängt vom globalen CSS in styles.css ab,
// daher importieren wir es nach styles.css.
import ErrorBoundary from '../components/ErrorBoundary'

export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

Externe Stylesheets

Next.js ermöglicht das Importieren von CSS-Dateien aus einer JavaScript-Datei. Dies ist möglich, weil Next.js das Konzept von import über JavaScript hinaus erweitert.

Importieren von Styles aus node_modules

Seit Next.js 9.5.4 ist das Importieren einer CSS-Datei aus node_modules überall in Ihrer Anwendung erlaubt.

Für globale Stylesheets wie bootstrap oder nprogress sollten Sie die Datei in pages/_app.js importieren. Beispiel:

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

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Für das Importieren von CSS, das von einer Drittanbieter-Komponente benötigt wird, können Sie dies in Ihrer Komponente tun. Beispiel:

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Dialog öffnen</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Schließen</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hallo. Ich bin ein Dialog</p>
      </Dialog>
    </div>
  )
}

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.