CSS-Module

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

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 und verwenden Sie die obige CSS-Datei:

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 zugegriffen wird.
      className={styles.error}
    >
      Zerstören
    </button>
  )
}

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

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 Hot Reloading während der Bearbeitung - 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 der CSS-Importe in der _app.js-Datei. 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 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.