CSS-in-JS

Uyarı: Çalışma zamanı JavaScript gerektiren CSS-in-JS kütüphaneleri şu anda Sunucu Bileşenleri'nde desteklenmemektedir. CSS-in-JS'yi Sunucu Bileşenleri ve Akış gibi daha yeni React özellikleriyle kullanmak, kütüphane yazarlarının eşzamanlı işleme de dahil olmak üzere React'in en son sürümünü desteklemesini gerektirir .

React Sunucu Bileşenleri ve akış mimarisi desteğiyle CSS ve JavaScript varlıklarını işlemek için yukarı akış API'leri üzerinde React ekibiyle birlikte çalışıyoruz.

Aşağıdaki kütüphaneler app dizinindeki İstemci Bileşenlerinde desteklenmektedir (alfabetik):

Aşağıdakiler şu anda destek üzerinde çalışmaktadır:

Bilmekte fayda var: Farklı CSS-in-JS kütüphanelerini test ediyoruz ve React 18 özelliklerini ve/veya app dizinini destekleyen kütüphaneler için daha fazla örnek ekleyeceğiz.

Sunucu Bileşenlerine stil vermek istiyorsanız, CSS Modüllerini veya PostCSS veya Tailwind CSS gibi CSS dosyaları çıktısı veren diğer çözümleri kullanmanızı öneririz.

Configuring CSS-in-JS in app

CSS-in-JS'nin yapılandırılması üç adımlı bir katılım sürecidir:

  1. Bir render'daki tüm CSS kurallarını toplamak için bir stil kayıt defteri.
  2. Yeni useServerInsertedHTML kancası, kuralları onları kullanabilecek herhangi bir içerikten önce enjekte eder.
  3. İlk sunucu tarafı oluşturma sırasında uygulamanızı stil kayıt defteri ile saran bir İstemci Bileşeni.

styled-jsx

İstemci Bileşenlerinde styled-jsx kullanmak v5.1.0 kullanmayı gerektirir. İlk olarak, yeni bir kayıt defteri oluşturun:

app/registry.tsx
'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
}) {
  // Only create stylesheet once with lazy initial state
  // 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>
}

Ardından, kök düzeninizi kayıt defteri ile sarın:

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

Bir örneği burada görüntüleyin .

Styled Components

Aşağıda styled-components@6 veya daha yenisinin nasıl yapılandırılacağına dair bir örnek verilmiştir:

İlk olarak, next.config.js adresinde styled-components'ı etkinleştirin.

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

Ardından, bir render sırasında oluşturulan tüm CSS stil kurallarını toplamak için global bir kayıt bileşeni ve bu kuralları döndürmek için bir fonksiyon oluşturmak üzere styled-components API'sini kullanın. Ardından, kayıt defterinde toplanan stilleri kök düzenindeki <head> HTML etiketine enjekte etmek için useServerInsertedHTML kancasını kullanın.

lib/registry.tsx
'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
}) {
  // Only create stylesheet once with lazy initial state
  // 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>
  )
}

Kök düzenin children adresini stil kayıt defteri bileşeniyle sarın:

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

Bir örneği burada görüntüleyin .

Bildiğim iyi oldu:

  • Sunucu oluşturma sırasında stiller global bir kayıt defterine alınır ve HTML'nizin <head> adresine aktarılır. Bu, stil kurallarının bunları kullanabilecek tüm içeriklerden önce yerleştirilmesini sağlar. Gelecekte, stillerin nereye enjekte edileceğini belirlemek için yakında çıkacak bir React özelliğini kullanabiliriz.
  • Akış sırasında, her yığından stiller toplanacak ve mevcut stillere eklenecektir. İstemci tarafı hidrasyon tamamlandıktan sonra, styled-components her zamanki gibi devralacak ve başka dinamik stiller enjekte edecektir.
  • Stil kayıt defteri için özellikle ağacın en üst seviyesinde bir İstemci Bileşeni kullanıyoruz çünkü CSS kurallarını bu şekilde çıkarmak daha verimli. Sonraki sunucu render'larında stillerin yeniden oluşturulmasını önler ve Sunucu Bileşeni yükünde gönderilmelerini engeller.
  • Styled-components derlemesinin bireysel özelliklerini yapılandırmanız gereken gelişmiş kullanım durumları için, daha fazla bilgi edinmek üzere Next.js styled-components API referansımızı okuyabilirsiniz.