Magdy Atef Zahran

التنسيق في نيكست (Styling in Next.js)

واحدة من أهم الخطوات اللي لازم تاخد بالك منها هي اختيار الطريقة المناسبة لتنسيق الموقع ونيكست بيدعم 3 طرق مختلفة للاستايلينج وكل طريقة ليها مميزاتها واستخداماتها حسب طبيعة مشروعك…

فتعالي نتعرف سوا علي ال 3 طرق للاستايلينج في next.js يا صديقي

1. الطريقه الاولي: CSS & Sass Modules

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

طيب إزاي نستخدمها؟

اول حاجه بتعمل ملف CSS أو SCSS بنفس اسم الـ Component وتحطه في نفس الفولدر.
بعدين بتسمي الكلاسات بطريقة عادية جدًا، وبعد كده تستدعيها جوه الـ Component.

كدا عرفنا اول طريقه وازاي نستخدمها… دا مثال عملي عليها عشان توضحلك الدنيا اكتر :

import styles from ‘./Button.module.css’; export default function Button() { return <button className={styles.primary}>Click Me!</button>; }

وده بيخلي الاستيلات خاصة بالـ Button Component ده بس.

2. الطريقه التانيه: Styled Components

لو بتحب تكتب ستايلاتك جوه الكود بتاعك فالطريقة دي مناسبه ليك لان ال Styled Components مكتبة بتخليك تعمل Components فيها ستايل وداتا في مكان واحد.

طيب إزاي نستخدمها؟

الأول بتنزل المكتبة:

npm install styled-components

بعدين بتكتب الكود بالشكل دا

import styled from ‘styled-components’; const Button = styled.button` border: none; border-radius: 5px; `; export default function App() { return <Button>Click Me!</Button>; }

3. الطريقه التالته: Global Styles

دي بقا الطريقة المشهوره لو عايز تضيف ستايلات عامة لكل المشروع. أي ملف CSS بتحطه هنا هيشتغل في كل الصفحات.

طيب إزاي نستخدمها؟

بكل بساطة بتحط ملف CSS جوا فولدر styles/ (مثلاً: globals.css) وتستدعيه في ملف _app.js… بس كدا دي كل الحكايه

ودا مثال عليها:

import ‘../styles/globals.css’; export default function MyApp({ Component, pageProps }) { return <Component {…pageProps} />; }

كدا فهمنا ال 3طرق وازاي نستخدمهم وادينا مثال علي كل طريقه… لو عندك سؤال أو استفسار، اكتب في الكومنتات. ومتنساش تقول رأيك في الشرح يا صديقي

Borma

Magdy Atef Zahran

التنسيق في نيكست (Styling in Next.js)

1. الطريقه الاولي: CSS & Sass Modules

طيب إزاي نستخدمها؟

2. الطريقه التانيه: Styled Components

طيب إزاي نستخدمها؟

3. الطريقه التالته: Global Styles

طيب إزاي نستخدمها؟

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