كيفية استخدام 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 وقم باستيراده إلى أي مكون داخل دليل pages:

.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 Page() {
  return <main className={styles.blog}></main>
}

CSS العام (Global CSS)

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

قم باستيراد صفحة الأنماط في ملف pages/_app.js لتطبيق الأنماط على كل مسار في تطبيقك:

import '@/styles/global.css'

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

بسبب الطبيعة العامة لصفحات الأنماط، ولتجنب التعارضات، يجب استيرادها داخل pages/_app.js.

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

يسمح لك 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}>فتح الحوار</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>إغلاق</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>مرحبًا. أنا حوار</p>
      </Dialog>
    </div>
  )
}

الترتيب والدمج (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 النهائي.