موجه التطبيق: تنسيق CSS

حاليًا، لا تحتوي صفحتك الرئيسية على أي تنسيقات. دعونا نلقي نظرة على الطرق المختلفة التي يمكنك من خلالها تنسيق تطبيق Next.js الخاص بك.

التنسيقات العامة

إذا نظرت داخل مجلد /app/ui، ستجد ملفًا يسمى global.css. يمكنك استخدام هذا الملف لإضافة قواعد CSS إلى جميع المسارات في تطبيقك - مثل قواعد إعادة تعيين CSS، والتنسيقات العامة لعناصر HTML مثل الروابط، وغير ذلك.

يمكنك استيراد global.css في أي مكون في تطبيقك، ولكن من الممارسات الجيدة عادةً إضافته إلى المكون الأعلى مستوى. في Next.js، هذا هو تخطيط الجذر (المزيد عن هذا لاحقًا).

أضف التنسيقات العامة إلى تطبيقك عن طريق الانتقال إلى /app/layout.tsx واستيراد ملف global.css:

/app/layout.tsx

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

مع استمرار تشغيل خادم التطوير، احفظ التغييرات الخاصة بك ومعاينتها في المتصفح. يجب أن تبدو صفحتك الرئيسية الآن هكذا:

صفحة مزودة بتنسيقات مع شعار 'Acme' ووصف ورابط تسجيل الدخول.

لكن انتظر لحظة، لم تقم بإضافة أي قواعد CSS، من أين جاءت التنسيقات؟

إذا ألقيت نظرة داخل global.css، ستلاحظ بعض توجيهات @tailwind:

/app/ui/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind هو إطار عمل CSS يسرع عملية التطوير من خلال السماح لك بكتابة فئات الأدوات مباشرة في كود React الخاص بك.

في Tailwind، تقوم بتنسيق العناصر عن طريق إضافة أسماء الفئات. على سبيل المثال، إضافة "text-blue-500" ستحول نص <h1> إلى اللون الأزرق:

<h1 className="text-blue-500">I'm blue!</h1>

على الرغم من أن تنسيقات CSS مشتركة عالميًا، إلا أن كل فئة تُطبق بشكل فردي على كل عنصر. هذا يعني أنه إذا قمت بإضافة أو حذف عنصر، فلن تقلق بشأن الحفاظ على أوراق أنماط منفصلة، أو تعارض التنسيقات، أو زيادة حجم حزمة CSS مع توسع تطبيقك.

عند استخدام create-next-app لبدء مشروع جديد، سيسألك Next.js عما إذا كنت تريد استخدام Tailwind. إذا حددت نعم، فسيقوم Next.js تلقائيًا بتثبيت الحزم الضرورية وتكوين Tailwind في تطبيقك.

إذا نظرت إلى /app/page.tsx، ستجد أننا نستخدم فئات Tailwind في المثال.

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // هذه فئات Tailwind:
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}

لا تقلق إذا كانت هذه هي المرة الأولى التي تستخدم فيها Tailwind. لتوفير الوقت، قمنا بالفعل بتنسيق جميع المكونات التي ستستخدمها.

دعونا نلعب مع Tailwind! انسخ الكود أدناه والصقه فوق عنصر <p> في /app/page.tsx:

/app/page.tsx

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

إذا كنت تفضل كتابة قواعد CSS التقليدية أو الحفاظ على تنسيقاتك منفصلة عن JSX - فإن وحدات CSS هي بديل رائع.

وحدات CSS

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

سنواصل استخدام Tailwind في هذه الدورة، ولكن دعونا نأخذ لحظة لنرى كيف يمكنك تحقيق نفس النتائج من الاختبار أعلاه باستخدام وحدات CSS.

داخل /app/ui، أنشئ ملفًا جديدًا يسمى home.module.css وأضف قواعد CSS التالية:

/app/ui/home.module.css

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

ثم، داخل ملف /app/page.tsx قم باستيراد التنسيقات واستبدل أسماء فئات Tailwind من <div> الذي أضفته بـ styles.shape:

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
  )
}

احفظ التغييرات الخاصة بك ومعاينتها في المتصفح. يجب أن ترى نفس الشكل كما كان من قبل.

يعتبر Tailwind ووحدات CSS هما الطريقتان الأكثر شيوعًا لتنسيق تطبيقات Next.js. سواء استخدمت أحدهما أو الآخر هو مسألة تفضيل - يمكنك حتى استخدام كلاهما في نفس التطبيق!

استخدام مكتبة `clsx` لتبديل أسماء الفئات

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

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

لنفترض أنك تريد إنشاء مكون InvoiceStatus الذي يقبل status. يمكن أن تكون الحالة 'pending' أو 'paid'.
إذا كانت 'paid'، تريد أن يكون اللون أخضر. إذا كانت 'pending'، تريد أن يكون اللون رماديًا.

يمكنك استخدام clsx لتطبيق الفئات شرطيًا، مثل هذا:

/app/ui/invoices/status.tsx

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

حلول تنسيق أخرى

بالإضافة إلى الأساليب التي ناقشناها، يمكنك أيضًا تنسيق تطبيق Next.js الخاص بك باستخدام:

Sass الذي يسمح لك باستيراد ملفات .css و .scss.
مكتبات CSS-in-JS مثل styled-jsx، styled-components، و emotion.

ألق نظرة على توثيق CSS لمزيد من المعلومات.

تنسيق CSS

التنسيقات العامة

Tailwind

وحدات CSS

استخدام مكتبة clsx لتبديل أسماء الفئات

حلول تنسيق أخرى

On this page

استخدام مكتبة `clsx` لتبديل أسماء الفئات