Menu

CSS-in-JS

Achtung: CSS-in-JS-Bibliotheken, die zur Laufzeit JavaScript erfordern, werden derzeit in Server-Komponenten nicht unterstützt. Die Verwendung von CSS-in-JS mit neueren React-Funktionen wie Server-Komponenten und Streaming erfordert von Bibliotheksautoren die Unterstützung der neuesten React-Version, einschließlich Concurrent Rendering.

Wir arbeiten mit dem React-Team an Upstream-APIs zur Handhabung von CSS- und JavaScript-Assets mit Unterstützung für React Server Components und Streaming-Architektur.

Die folgenden Bibliotheken werden in Client-Komponenten im app-Verzeichnis unterstützt (alphabetisch):

Die folgenden arbeiten derzeit an der Unterstützung:

Hinweis: Wir testen verschiedene CSS-in-JS-Bibliotheken und werden weitere Beispiele für Bibliotheken hinzufügen, die React 18-Funktionen und/oder den app-Verzeichnis unterstützen.

Wenn Sie Server-Komponenten stylen möchten, empfehlen wir die Verwendung von CSS-Modulen oder anderen Lösungen, die CSS-Dateien ausgeben, wie PostCSS oder Tailwind CSS.

CSS-in-JS im app-Verzeichnis konfigurieren

Die Konfiguration von CSS-in-JS ist ein dreistufiger Opt-in-Prozess, der Folgendes umfasst:

  1. Eine Style-Registry, um alle CSS-Regeln in einem Rendering zu sammeln.
  2. Der neue useServerInsertedHTML-Hook zum Einfügen von Regeln vor Inhalten, die sie möglicherweise verwenden.
  3. Eine Client-Komponente, die Ihre App während des ersten serverseitigen Renderings mit der Style-Registry umschließt.

styled-jsx

Die Verwendung von styled-jsx in Client-Komponenten erfordert v5.1.0. Erstellen Sie zunächst eine neue Registry:

app/registry.tsx
TypeScript
'use client'
 
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 
export default function StyledJsxRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // Registry nur einmal mit verzögertem initialem Zustand erstellen
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [jsxStyleRegistry] = useState(() => createStyleRegistry())
 
  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles()
    jsxStyleRegistry.flush()
    return <>{styles}</>
  })
 
  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}

Umschließen Sie dann das Root-Layout mit der Registry:

app/layout.tsx
TypeScript
import StyledJsxRegistry from './registry'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  )
}

Beispiel hier ansehen.

Styled Components

Nachfolgend ein Beispiel, wie styled-components@6 oder neuer konfiguriert wird:

Aktivieren Sie zunächst styled-components in next.config.js.

next.config.js
module.exports = {
  compiler: {
    styledComponents: true,
  },
}

Verwenden Sie dann die styled-components-API, um eine globale Registry-Komponente zu erstellen, die alle während eines Renderings generierten CSS-Stilregeln sammelt, und eine Funktion, um diese Regeln zurückzugeben. Nutzen Sie anschließend den useServerInsertedHTML-Hook, um die in der Registry gesammelten Stile in das <head>-HTML-Tag im Root-Layout einzufügen.

lib/registry.tsx
TypeScript
'use client'
 
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
 
export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // Registry nur einmal mit verzögertem initialem Zustand erstellen
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })
 
  if (typeof window !== 'undefined') return <>{children}</>
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

Umschließen Sie die children des Root-Layouts mit der Style-Registry-Komponente:

app/layout.tsx
TypeScript
import StyledComponentsRegistry from './lib/registry'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  )
}

Beispiel hier ansehen.

Hinweis:

  • Während des Server-Renderings werden Styles in eine globale Registry extrahiert und in den <head> Ihres HTML eingefügt. Dies stellt sicher, dass die Stilregeln vor allen Inhalten platziert werden, die sie möglicherweise verwenden. In Zukunft werden wir möglicherweise eine kommende React-Funktion verwenden, um zu bestimmen, wo die Styles eingefügt werden.
  • Während des Streamings werden Styles aus jedem Chunk gesammelt und an bestehende Styles angehängt. Nach Abschluss der Client-seitigen Hydratation wird styled-components wie üblich übernehmen und weitere dynamische Styles injizieren.
  • Wir verwenden speziell eine Client-Komponente auf der obersten Ebene des Baums für die Style-Registry, da es effizienter ist, CSS-Regeln auf diese Weise zu extrahieren. Es vermeidet das erneute Generieren von Styles bei nachfolgenden Server-Renderings und verhindert, dass sie in der Server-Komponenten-Nutzlast gesendet werden.
  • Für fortgeschrittene Anwendungsfälle, bei denen Sie einzelne Eigenschaften der styled-components-Kompilierung konfigurieren müssen, können Sie unsere Next.js styled-components API-Referenz lesen, um mehr zu erfahren.