وحدات CSS (CSS Modules)

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

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

وحدات CSS

يحتوي 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 و .module.sass.

في بيئة الإنتاج، سيتم دمج جميع ملفات وحدات 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).