كيفية استخدام CSS في تطبيقك

يوفر Next.js عدة طرق لاستخدام CSS في تطبيقك، بما في ذلك:

وحدات CSS (CSS Modules)
CSS العام (Global CSS)
صفحات الأنماط الخارجية (External Stylesheets)
تيلويند CSS (Tailwind CSS)
ساس (Sass)
CSS-in-JS

وحدات CSS (CSS Modules)

تقوم وحدات CSS بتحديد نطاق CSS محليًا عن طريق إنشاء أسماء فريدة للفئات. هذا يسمح لك باستخدام نفس الفئة في ملفات مختلفة دون القلق حول تعارض الأسماء.

للبدء باستخدام وحدات CSS، أنشئ ملفًا جديدًا بامتداد .module.css وقم باستيراده إلى أي مكون داخل دليل app:

app/blog/blog.module.css

.blog {
  padding: 24px;
}

import styles from './blog.module.css'

export default function Page() {
  return <main className={styles.blog}></main>
}

import styles from './blog.module.css'

export default function Layout() {
  return <main className={styles.blog}></main>
}

CSS العام (Global CSS)

يمكنك استخدام CSS العام لتطبيق الأنماط على مستوى التطبيق بأكمله.

قم بإنشاء ملف app/global.css واستورده في التخطيط الجذري لتطبيق الأنماط على كل مسار في تطبيقك:

app/global.css

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

// هذه الأنماط تنطبق على كل مسار في التطبيق
import './global.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// هذه الأنماط تنطبق على كل مسار في التطبيق
import './global.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

معلومة مفيدة: يمكن استيراد الأنماط العامة في أي تخطيط أو صفحة أو مكون داخل دليل app. ومع ذلك، نظرًا لأن Next.js يستخدم دعم React المدمج لصفحات الأنماط للتكامل مع Suspense، فإن هذا حاليًا لا يزيل صفحات الأنماط أثناء التنقل بين المسارات مما قد يؤدي إلى تعارضات. نوصي باستخدام الأنماط العامة لـ CSS فعليًا عام، ووحدات CSS (CSS Modules) لـ CSS محدود النطاق.

صفحات الأنماط الخارجية (External Stylesheets)

يمكن استيراد صفحات الأنماط المنشورة بواسطة حزم خارجية في أي مكان داخل دليل app، بما في ذلك المكونات المجاورة:

import 'bootstrap/dist/css/bootstrap.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

import 'bootstrap/dist/css/bootstrap.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

معلومة مفيدة: في React 19، يمكن أيضًا استخدام <link rel="stylesheet" href="..." />. راجع توثيق React link لمزيد من المعلومات.

الترتيب والدمج (Ordering and Merging)

يقوم Next.js بتحسين CSS أثناء عمليات البناء للإنتاج عن طريق تجزئة (دمج) صفحات الأنماط تلقائيًا. يعتمد ترتيب CSS الخاص بك على ترتيب استيراد الأنماط في الكود الخاص بك.

على سبيل المثال، سيتم ترتيب base-button.module.css قبل page.module.css نظرًا لأن <BaseButton> يتم استيراده قبل page.module.css:

import { BaseButton } from './base-button'
import styles from './page.module.css'

export default function Page() {
  return <BaseButton className={styles.primary} />
}

import { BaseButton } from './base-button'
import styles from './page.module.css'

export default function Page() {
  return <BaseButton className={styles.primary} />
}

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

التوصيات

للحفاظ على ترتيب CSS قابل للتنبؤ:

حاول احتواء استيراد CSS في ملف دخول واحد لـ JavaScript أو TypeScript
استورد الأنماط العامة وصفحات أنماط تيلويند في جذر تطبيقك.
استخدم وحدات CSS بدلاً من الأنماط العامة للمكونات المتداخلة.
استخدم اصطلاح تسمية متسق لوحدات CSS الخاصة بك. على سبيل المثال، استخدام <name>.module.css بدلاً من <name>.tsx.
استخرج الأنماط المشتركة إلى مكونات مشتركة لتجنب الاستيراد المكرر.
أوقف أدوات التحقق أو التنسيق التي تقوم بفرز الاستيرادات تلقائيًا مثل sort-imports في ESLint.
يمكنك استخدام خيار cssChunking في next.config.js للتحكم في كيفية تجزئة CSS.

التطوير مقابل الإنتاج (Development vs Production)

في وضع التطوير (next dev)، يتم تطبيق تحديثات CSS على الفور مع التحديث السريع (Fast Refresh).
في الإنتاج (next build)، يتم دمج جميع ملفات CSS تلقائيًا في عدة ملفات .css مضغوطة ومجزأة، مما يضمن تحميل الحد الأدنى من CSS لكل مسار.
لا يزال CSS يتم تحميله مع تعطيل JavaScript في الإنتاج، ولكن JavaScript مطلوب في التطوير للتحديث السريع.
قد يتصرف ترتيب CSS بشكل مختلف في التطوير، تأكد دائمًا من التحقق من البناء (next build) للتحقق من ترتيب CSS النهائي.

كيفية استخدام CSS في تطبيقك

وحدات CSS (CSS Modules)

CSS العام (Global CSS)

صفحات الأنماط الخارجية (External Stylesheets)

الترتيب والدمج (Ordering and Merging)

التوصيات

التطوير مقابل الإنتاج (Development vs Production)

Tailwind CSS

Sass

CSS-in-JS

On this page