الدرس الثالث: إدارة الأنماط في Next.js

مقدمة

في التطبيقات الحديثة، يلعب التصميم دورًا كبيرًا في جذب المستخدمين. في هذا الدرس، سنستكشف طرقًا مختلفة لإدارة الأنماط في Next.js، بما في ذلك:

1. إضافة ملفات CSS عالمية .
2. استخدام CSS Modules للأنماط المحلية .
3. إضافة Styling Libraries مثل Tailwind CSS أو Material-UI .

1. إضافة ملف CSS عالمي

Next.js يسمح بإضافة ملف CSS عالمي لتطبيقك كله. هذا الملف يمكن أن يحتوي على الأنماط الأساسية التي تُطبق على جميع الصفحات.

الخطوات:

1.1 إنشاء ملف CSS عالمي

• افتح مجلد styles/ في مشروعك.
• قم بإنشاء ملف باسم global.css.

1.2 إضافة الأنماط إلى الملف

أضف بعض الأنماط البسيطة إلى global.css:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}


h1 {
color: #333;
}


a {
text-decoration: none;
color: #007bff;
}


a:hover {
text-decoration: underline;
}

1.3 ربط الملف مع التطبيق

للتأكد من تطبيق هذه الأنماط على جميع الصفحات، يجب ربط الملف في مكون _app.js.

• افتح ملف _app.js الموجود في مجلد pages/.
• استورد ملف global.css داخله:

import '../styles/global.css';


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


export default MyApp;

2. استخدام CSS Modules للأنماط المحلية

CSS Modules هو أداة تتيح لك كتابة الأنماط الخاصة بكل مكون بشكل منفصل، مما يمنع تضارب الأسماء بين الأنماط.

الخطوات:

2.1 إنشاء ملف CSS Module

• افتح صفحة about.js الموجودة في مجلد pages/.
• قم بإنشاء ملف جديد باسم about.module.css بجانب ملف about.js.

2.2 إضافة الأنماط إلى الملف

أضف الأنماط التالية إلى about.module.css:

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.title {
font-size: 24px;
color: #444;
}


.description {
font-size: 16px;
color: #666;
}

2.3 استيراد واستخدام الأنماط

عدل ملف about.js لاستخدام الأنماط:

import styles from './about.module.css';


export default function About() {
return (
<div className={styles.container}>
<h1 className={styles.title}>من نحن</h1>
<p className={styles.description}>
هذه هي صفحة عن الموقع. نقدم خدماتنا بطريقة احترافية ومبتكرة.
</p>
</div>
);
}

3. إضافة Styling Library (مثال: Tailwind CSS)

Tailwind CSS هو إطار عمل Styling شائع يوفر فئات CSS جاهزة يمكنك استخدامها مباشرة في HTML الخاص بك.

الخطوات:

3.1 تثبيت Tailwind CSS

في Terminal، قم بتثبيت Tailwind CSS باستخدام الأمر التالي:

npm install tailwindcss postcss autoprefixer

3.2 إنشاء ملفات تكوين Tailwind

قم بإنشاء ملفات التكوين باستخدام الأمر التالي:

npx tailwindcss init

3.3 تعديل ملف tailwind.config.js

تأكد من أن ملف tailwind.config.js يحتوي على الإعدادات التالية:

module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};

3.4 إضافة Tailwind إلى ملف CSS

• افتح ملف global.css وإضافة الكود التالي:

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

3.5 استخدام Tailwind في الصفحة

عدل ملف index.js لاستخدام Tailwind:

import Link from 'next/link';


export default function Home() {
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
<h1 className="text-3xl font-bold text-blue-600">مرحبًا بك في موقعنا!</h1>
<p className="mt-4 text-gray-700">اختر صفحة:</p>
<nav className="mt-4 space-x-4">
<Link href="/about">
<a className="text-blue-500 hover:text-blue-700">عن الموقع</a>
</Link>
<Link href="/contact">
<a className="text-blue-500 hover:text-blue-700">اتصل بنا</a>
</Link>
</nav>
</div>
);
}

4. اختبار الأنماط

بعد تنفيذ الخطوات السابقة، قم بتشغيل المشروع باستخدام:

npm run dev

افتح المتصفح واذهب إلى http://localhost:3000 . ستلاحظ أن الأنماط قد تم تطبيقها بنجاح.

5. مقارنة بين الأساليب المختلفة

ختام الدرس الثالث

في هذا الدرس، تعلمت كيفية:

1. إضافة ملف CSS عالمي لتطبيقك.
2. استخدام CSS Modules لإدارة الأنماط المحلية.
3. إضافة Styling Library مثل Tailwind CSS.

في الدرس القادم، سنتحدث عن إدارة البيانات باستخدام getStaticProps وgetServerSideProps .

إلى اللقاء في الدرس الرابع! 🚀