CSS-Module

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

Betrachten wir 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 und importieren Sie die CSS-Datei:

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

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

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

Betrachten wir beispielsweise das Stylesheet mit dem Namen 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.

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

Diese Stile (styles.css) werden auf alle Seiten und Komponenten in Ihrer Anwendung angewendet. Aufgrund der globalen Natur von Stylesheets können diese nur innerhalb von pages/_app.js importiert werden.

In der Entwicklung ermöglicht das Definieren von Stylesheets auf diese Weise ein Hot Reloading der Stile während des Bearbeitens und behält den Anwendungszustand bei.

In der Produktionsversion werden alle CSS-Dateien automatisch in eine einzelne minifizierte .css-Datei zusammengeführt. Die Reihenfolge der Zusammenführung von CSS entspricht der Reihenfolge des Imports in der _app.js-Datei. Achten Sie besonders auf importierte JS-Module, die eigene CSS-Dateien enthalten; das CSS des JS-Moduls wird nach den gleichen Importregeln zusammengeführt wie importierte CSS-Dateien. 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 den Import von CSS-Dateien aus einer JavaScript-Datei. Dies ist möglich, da Next.js das Konzept von import über JavaScript hinaus erweitert.

Import von Stilen aus node_modules

Seit Next.js 9.5.4 ist der Import einer CSS-Datei aus node_modules an beliebiger Stelle in der Anwendung erlaubt.

Bei globalen Stylesheets wie bootstrap oder nprogress sollten Sie die Datei innerhalb von pages/_app.js importieren. Beispiel:

import 'bootstrap/dist/css/bootstrap.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Für den Import von CSS, das für eine Drittanbieter-Komponente erforderlich ist, 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 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.