LogoENEnglish

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

کتابخانه‌های CSS-in-JS در Next.js امکان تعریف استایل‌ها درون جاوااسکریپت را فراهم می‌کنند. برای پشتیبانی از ویژگی‌های جدید React مانند Server Components و Streaming، باید از نسخه‌های جدید این کتابخانه‌ها استفاده شود. این مقاله نحوهٔ پیکربندی styled-jsx و styled-components را با استفاده از رجیستری استایل و هوک useServerInsertedHTML توضیح می‌دهد.

CSS-in-JSStyle registrystyled-jsxstyled-components

~3 دقیقه مطالعه • بروزرسانی ۴ آبان ۱۴۰۴

مقدمه


کتابخانه‌های 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


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

  1. ایجاد رجیستری برای جمع‌آوری استایل‌ها
  2. استفاده از هوک useServerInsertedHTML برای تزریق استایل‌ها قبل از محتوا
  3. استفاده از یک 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 بهره‌برداری کرد.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article