تنسيق CSS
لنتحدث الآن عن تنسيق CSS.
كما ترى، صفحتنا الرئيسية (http://localhost:3000) تحتوي بالفعل على بعض التنسيقات. إذا نظرت إلى بنية الملفات، ستجد مجلدًا باسم styles يحتوي على ملفين CSS: ورقة أنماط عامة (global.css)، ووحدة CSS (Home.module.css).
إذا لم يكن مشروعك يحتوي على هذه الملفات، يمكنك تنزيل الكود المبدئي من هنا:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"وحدات CSS
وحدات CSS تتيح لك تحديد نطاق CSS محليًا على مستوى المكون عن طريق إنشاء أسماء فريدة للفئات تلقائيًا. هذا يسمح لك باستخدام نفس اسم فئة CSS في ملفات مختلفة دون القلق عن تعارض أسماء الفئات.
بالإضافة إلى وحدات CSS، يمكنك تنسيق تطبيق Next.js الخاص بك بعدة طرق، بما في ذلك:
- Sass الذي يسمح لك باستيراد ملفات
.cssو.scss. - مكتبات PostCSS مثل Tailwind CSS.
- مكتبات CSS-in-JS مثل styled-jsx، styled-components، و emotion
في هذا الدرس، سنتحدث عن كيفية استخدام وحدات CSS و Sass في Next.js. دعونا نبدأ!