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 app-Verzeichnis:

app/blog/blog.module.css

.blog {
  padding: 24px;
}

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

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

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

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

Globales CSS

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

Erstellen Sie eine Datei app/global.css und importieren Sie sie im Root-Layout, um die Stile auf jede Route Ihrer Anwendung anzuwenden:

app/global.css

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

// Diese Stile 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 Stile gelten für jede Route in der Anwendung
import './global.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Gut zu wissen: Globale Stile können in jedes Layout, jede Seite oder Komponente im app-Verzeichnis importiert werden. Da Next.js jedoch die integrierte Stylesheet-Unterstützung von React für die Integration mit Suspense verwendet, werden Stylesheets derzeit nicht beim Navigieren zwischen Routen entfernt, was zu Konflikten führen kann. Wir empfehlen, globale Stile für wirklich globales CSS zu verwenden und CSS-Module für begrenztes CSS.

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: In React 19 kann auch <link rel="stylesheet" href="..." /> verwendet werden. Weitere Informationen finden Sie in der React link-Dokumentation.

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} />
}

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

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

import styles from './base-button.module.css'

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

import styles from './base-button.module.css'

export function BaseButton() {
  return <button 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.

Verwendung von CSS in Ihrer Anwendung

CSS-Module

Globales CSS

Externe Stylesheets

Reihenfolge und Zusammenführung

Empfehlungen

Entwicklung vs. Produktion

Tailwind CSS

Sass

CSS-in-JS

On this page