استفاده از CSS-in-JS در Next.js – پشتیبانی از رندرینگ همزمان و تنظیم رجیستری استایل‌ها

| CSS-in-JS |

| Style registry |

| styled-jsx |

| styled-components |

مقدمه

کتابخانه‌های CSS-in-JS به شما اجازه می‌دهند استایل‌ها را مستقیماً درون کامپوننت‌های React تعریف کنید. در Next.js، استفاده از این کتابخانه‌ها در ترکیب با Server Components و Streaming نیازمند پشتیبانی از رندرینگ همزمان React 18 است.

کتابخانه‌های پشتیبانی‌شده

در دایرکتوری app، کتابخانه‌های زیر در Client Components پشتیبانی می‌شوند:

ant-design
chakra-ui
@fluentui/react-components
kuma-ui
@mui/material
@mui/joy
pandacss
styled-jsx
styled-components
stylex
tamagui
tss-react
vanilla-extract

کتابخانه emotion در حال توسعهٔ پشتیبانی است.

مراحل پیکربندی CSS-in-JS

پیکربندی شامل سه مرحله است:

ایجاد رجیستری برای جمع‌آوری استایل‌ها
استفاده از هوک useServerInsertedHTML برای تزریق استایل‌ها قبل از محتوا
استفاده از یک Client Component برای wrap کردن اپلیکیشن در مرحلهٔ SSR

پیکربندی styled-jsx

مرحله ۱: ایجاد رجیستری

// 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 }) {
  const [jsxStyleRegistry] = useState(() => createStyleRegistry())

  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles()
    jsxStyleRegistry.flush()
    return <>{styles}</>
  })

  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}

مرحله ۲: wrap کردن layout

// app/layout.tsx
import StyledJsxRegistry from './registry'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  )
}

پیکربندی styled-components

مرحله ۱: فعال‌سازی در next.config.js

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

مرحله ۲: ایجاد رجیستری

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

مرحله ۳: wrap کردن layout

// app/layout.tsx
import StyledComponentsRegistry from './lib/registry'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  )
}

نکات مهم

در SSR، استایل‌ها به رجیستری جهانی استخراج و در <head> تزریق می‌شوند
در Streaming، استایل‌ها chunk به chunk جمع‌آوری و اضافه می‌شوند
استفاده از Client Component در بالای درخت باعث بهینه‌سازی استخراج استایل‌ها می‌شود
برای تنظیمات پیشرفته، می‌توانید از مستندات API مربوط به styled-components در Next.js استفاده کنید

جمع‌بندی

کتابخانه‌های CSS-in-JS در Next.js امکان تعریف استایل‌های پویا و قابل مدیریت را فراهم می‌کنند. با پیکربندی صحیح رجیستری و استفاده از هوک useServerInsertedHTML، می‌توان از این کتابخانه‌ها در ترکیب با Server Components و Streaming بهره‌برداری کرد.