مقدمه
کتابخانه‌های 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 بهره‌برداری کرد.