وحدات CSS (CSS Modules)

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

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

مثال

على سبيل المثال، لنفكر في مكون Button قابل لإعادة الاستخدام في مجلد components/:

أولاً، أنشئ components/Button.module.css بالمحتوى التالي:

/*
لا داعي للقلق بشأن تعارض .error {} مع أي ملفات `.css` أو
`.module.css` أخرى!
*/
.error {
  color: white;
  background-color: red;
}

ثم أنشئ components/Button.js، وقم باستيراد واستخدام ملف CSS أعلاه:

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

export function Button() {
  return (
    <button
      type="button"
      // لاحظ كيف يتم الوصول إلى فئة "error" كخاصية في كائن
      // `styles` المستورد.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

وحدات CSS هي ميزة اختيارية وتكون مفعلة فقط للملفات ذات الامتداد .module.css. لا تزال أوراق الأنماط العادية <link> وملفات CSS العامة مدعومة.

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

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

لإضافة ورقة أنماط إلى تطبيقك، قم باستيراد ملف CSS داخل pages/_app.js.

على سبيل المثال، لنفكر في ورقة الأنماط التالية المسماة styles.css:

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

أنشئ ملف pages/_app.js إذا لم يكن موجودًا بالفعل. ثم، قم باستيراد ملف styles.css باستخدام import.

import '../styles.css'

// هذا التصدير الافتراضي مطلوب في ملف `pages/_app.js` جديد.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

هذه الأنماط (styles.css) ستنطبق على جميع الصفحات والمكونات في تطبيقك. بسبب الطبيعة العامة لأوراق الأنماط، ولتجنب التعارضات، يمكنك استيرادها فقط داخل pages/_app.js.

في بيئة التطوير، تسمح هذه الطريقة في التعبير عن أوراق الأنماط بإعادة تحميل الأنماط ساخنة أثناء تعديلها - مما يعني أنه يمكنك الحفاظ على حالة التطبيق.

في بيئة الإنتاج، سيتم دمج جميع ملفات CSS تلقائيًا في ملف .css مضغوط واحد. سيتبع ترتيب دمج CSS ترتيب استيراد CSS في ملف _app.js. انتبه بشكل خاص إلى وحدات JS المستوردة التي تتضمن CSS خاص بها؛ سيتم دمج CSS الخاص بوحدة JS وفقًا لنفس قواعد الترتيب مثل ملفات CSS المستوردة. على سبيل المثال:

import '../styles.css'
// يعتمد CSS في ErrorBoundary على CSS العام في styles.css،
// لذا نستورده بعد styles.css.
import ErrorBoundary from '../components/ErrorBoundary'

export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

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

يسمح Next.js باستيراد ملفات CSS من ملف JavaScript. هذا ممكن لأن Next.js يوسع مفهوم import ليشمل أكثر من JavaScript.

استيراد الأنماط من node_modules

منذ Next.js 9.5.4، يُسمح باستيراد ملف CSS من node_modules في أي مكان في تطبيقك.

بالنسبة لأوراق الأنماط العامة، مثل bootstrap أو nprogress، يجب استيراد الملف داخل pages/_app.js. على سبيل المثال:

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

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

لاستيراد CSS المطلوب لمكون تابع لجهة خارجية، يمكنك القيام بذلك في مكونك. على سبيل المثال:

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

ميزات إضافية

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

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