وحدات 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. لا تزال أوراق الأنماط العادية <link> وملفات 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 ميزات إضافية لتحسين تجربة كتابة وإضافة الأنماط:

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

مثال

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

أوراق الأنماط الخارجية

ميزات إضافية

On this page