وحدات CSS والأنماط العامة

يدعم Next.js أنواعًا مختلفة من ملفات الأنماط، بما في ذلك:

وحدات CSS
الأنماط العامة
ملفات الأنماط الخارجية

وحدات CSS

يحتوي Next.js على دعم مدمج لوحدات CSS باستخدام امتداد .module.css.

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

مثال

يمكن استيراد وحدات CSS إلى أي ملف داخل دليل app:

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

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

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

export default function DashboardLayout({ children }) {
  return <section className={styles.dashboard}>{children}</section>
}

app/dashboard/styles.module.css

.dashboard {
  padding: 24px;
}

وحدات CSS مفعلة فقط للملفات ذات الامتداد .module.css و .module.sass.

في بيئة الإنتاج، سيتم دمج جميع ملفات وحدات CSS تلقائيًا في عدة ملفات .css مضغوطة ومقسمة بالكود. تمثل هذه الملفات .css مسارات تنفيذ ساخنة في تطبيقك، مما يضمن تحميل الحد الأدنى من CSS لتطبيقك للرسم.

الأنماط العامة

يمكن استيراد الأنماط العامة إلى أي تخطيط أو صفحة أو مكون داخل دليل app.

معلومة مفيدة: هذا يختلف عن دليل pages، حيث يمكنك فقط استيراد الأنماط العامة داخل ملف _app.js.

على سبيل المثال، ضع في الاعتبار ملف أنماط باسم app/global.css:

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

داخل التخطيط الجذري (app/layout.js)، قم باستيراد ملف الأنماط global.css لتطبيق الأنماط على كل مسار في تطبيقك:

// هذه الأنماط تنطبق على كل مسار في التطبيق
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، بما في ذلك المكونات المجاورة:

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

معلومة مفيدة: يجب استيراد ملفات الأنماط الخارجية مباشرة من حزمة npm أو تنزيلها ووضعها بجوار الكود الخاص بك. لا يمكنك استخدام <link rel="stylesheet" />.

الترتيب والدمج

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

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

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

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

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

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

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

للحفاظ على ترتيب يمكن التنبؤ به، نوصي بما يلي:

استيراد ملف CSS فقط في ملف JS/TS واحد.
- إذا كنت تستخدم أسماء فئات عامة، قم باستيراد الأنماط العامة في نفس الملف بالترتيب الذي تريد تطبيقه به.
افضل وحدات CSS على الأنماط العامة.
- استخدم اصطلاح تسمية متسق لوحدات CSS الخاصة بك. على سبيل المثال، استخدم <name>.module.css بدلاً من <name>.tsx.
استخرج الأنماط المشتركة في مكون منفصل.
إذا كنت تستخدم Tailwind، قم باستيراد ملف الأنماط في أعلى الملف، ويفضل في التخطيط الجذري.

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

ميزات إضافية

يتضمن Next.js ميزات إضافية لتحسين تجربة كتابة الأنماط:

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