نصائح حول التنسيق

إليك بعض النصائح حول التنسيق التي قد تكون مفيدة.

يمكنك قراءة الأقسام التالية فقط. لا حاجة لإجراء أي تغييرات على تطبيقنا!

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

clsx هي مكتبة بسيطة تتيح لك تبديل أسماء الفئات بسهولة. يمكنك تثبيتها باستخدام npm install clsx أو yarn add clsx.

يرجى الاطلاع على الوثائق لمزيد من التفاصيل، ولكن إليك الاستخدام الأساسي:

• لنفترض أنك تريد إنشاء مكون Alert يقبل type، والذي يمكن أن يكون 'success' أو 'error'.
• إذا كان 'success'، تريد أن يكون لون النص أخضر. إذا كان 'error'، تريد أن يكون لون النص أحمر.

يمكنك أولاً كتابة وحدة CSS (مثل alert.module.css) كما يلي:

.success {
  color: green;
}
.error {
  color: red;
}

واستخدام clsx كما يلي:

import styles from './alert.module.css';
import { clsx } from 'clsx';
 
export default function Alert({ children, type }) {
  return (
    <div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

تخصيص إعدادات PostCSS

بدون أي تكوين، يقوم Next.js بتحويل CSS باستخدام PostCSS.

لتخصيص إعدادات PostCSS، يمكنك إنشاء ملف في المستوى الأعلى يسمى postcss.config.js. هذا مفيد إذا كنت تستخدم مكتبات مثل Tailwind CSS.

إليك الخطوات لإضافة Tailwind CSS. أولاً، قم بتثبيت الحزم:

npm install -D tailwindcss autoprefixer postcss

ثم، قم بإنشاء ملف postcss.config.js:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

نوصي أيضًا بتكوين مصادر المحتوى عن طريق تحديد خيار content في tailwind.config.js:

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // للحصول على أفضل أداء وتجنب النتائج الإيجابية الخاطئة،
    // كن محددًا قدر الإمكان في تكوين المحتوى الخاص بك.
  ],
};

لمعرفة المزيد حول تخصيص إعدادات PostCSS، راجع وثائق PostCSS.

للبدء بسهولة مع Tailwind CSS، تحقق من مثالنا.

استخدام Sass

بدون أي تكوين، يسمح لك Next.js باستيراد Sass باستخدام كل من امتدادات .scss و .sass. يمكنك استخدام Sass على مستوى المكون عبر وحدات CSS وامتدادات .module.scss أو .module.sass.

قبل أن تتمكن من استخدام دعم Sass المدمج في Next.js، تأكد من تثبيت sass:

npm install -D sass

هذا كل شيء لهذا الدرس!

لمعرفة المزيد حول دعم CSS المدمج في Next.js ووحدات CSS، تحقق من وثائق CSS.