Verwendung von CSS in Ihrer Anwendung

Next.js bietet mehrere Möglichkeiten, CSS in Ihrer Anwendung zu verwenden, darunter:

• CSS-Module
• Globales CSS
• Externe Stylesheets
• Tailwind CSS
• Sass
• CSS-in-JS

CSS-Module

CSS-Module begrenzen CSS lokal durch die Generierung eindeutiger Klassennamen. Dadurch können Sie dieselbe Klasse in verschiedenen Dateien verwenden, ohne Namenskonflikte befürchten zu müssen.

Um CSS-Module zu verwenden, erstellen Sie eine neue Datei mit der Endung .module.css und importieren Sie sie in eine beliebige Komponente im pages-Verzeichnis:

.blog {
  padding: 24px;
}

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

export default function Page() {
  return <main className={styles.blog}></main>
}

Globales CSS

Sie können globales CSS verwenden, um Stile anwendungsweit anzuwenden.

Importieren Sie das Stylesheet in der Datei pages/_app.js, um die Stile auf jede Route Ihrer Anwendung anzuwenden:

import '@/styles/global.css'

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

Aufgrund des globalen Charakters von Stylesheets und um Konflikte zu vermeiden, sollten Sie sie innerhalb von pages/_app.js importieren.

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 innerhalb von pages/_app.js importieren. Zum Beispiel:

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

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

Um CSS zu importieren, das von einer Drittanbieter-Komponente benötigt wird, können Sie dies in Ihrer Komponente tun. Zum 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>
  )
}

Reihenfolge und Zusammenführung

Next.js optimiert CSS während Produktions-Builds durch automatisches Chunking (Zusammenführen) von Stylesheets. Die Reihenfolge Ihres CSS hängt von der Reihenfolge ab, in der Sie Stile in Ihrem Code importieren.

Zum Beispiel wird base-button.module.css vor page.module.css geordnet, da <BaseButton> vor page.module.css importiert wird:

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

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

Empfehlungen

Um die CSS-Reihenfolge vorhersehbar zu halten:

• Versuchen Sie, CSS-Importe auf eine einzige JavaScript- oder TypeScript-Einstiegsdatei zu beschränken
• Importieren Sie globale Stile und Tailwind-Stylesheets im Stamm Ihrer Anwendung.
• Verwenden Sie CSS-Module anstelle von globalen Stilen für verschachtelte Komponenten.
• Verwenden Sie eine konsistente Namenskonvention für Ihre CSS-Module. Zum Beispiel <name>.module.css anstelle von <name>.tsx.
• Extrahieren Sie gemeinsame Stile in gemeinsame Komponenten, um doppelte Importe zu vermeiden.
• Deaktivieren Sie Linter oder Formatter, die Importe automatisch sortieren, wie ESLints sort-imports.
• Sie können die Option cssChunking in next.config.js verwenden, um zu steuern, wie CSS gechunkt wird.

Entwicklung vs. Produktion

• In der Entwicklung (next dev) werden CSS-Updates sofort mit Fast Refresh angewendet.
• In der Produktion (next build) werden alle CSS-Dateien automatisch in viele minimierte und code-gesplittete .css-Dateien zusammengeführt, um sicherzustellen, dass die minimale Menge an CSS für eine Route geladen wird.
• CSS wird in der Produktion auch ohne JavaScript geladen, aber JavaScript ist in der Entwicklung für Fast Refresh erforderlich.
• Die CSS-Reihenfolge kann sich in der Entwicklung anders verhalten. Überprüfen Sie daher immer den Build (next build), um die endgültige CSS-Reihenfolge zu bestätigen.