Next.js • المستوى الأول • الدرس 2

التخطيطات المشتركة والصفحات (Layouts & Pages)

أهداف الدرس العلمية

فهم دور ملف layout.js في الحفاظ على حالة المكونات وتثبيت الترويسة والتذييل.
استقبال المكون الابن children داخل التخطيط العام.
التمييز بين layout.js (ثابت) و page.js (يتغير مع كل مسار).
بناء تخطيط عام يحتفظ بحالة التنقل بين الصفحات.

1. ما هو الـ Layout؟

التخطيط هو واجهة تحيط بعشرات الصفحات داخل التطبيق لتجنب تكرار كود الهيدر والقائمة الجانبية، وتتيح تنقلاً خفيفاً وسريعاً بين المحتويات دون إعادة تحميل الصفحة.

javascript

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />         {/* ← يظهر في كل الصفحات */}
        {children}         {/* ← يتغير حسب الصفحة */}
        <Footer />         {/* ← يظهر في كل الصفحات */}
      </body>
    </html>
  );
}

2. بنية المجلدات في Next.js

bash

app/
├── layout.js           ← التخطيط العام (لكل الصفحات)
├── page.js             ← الصفحة الرئيسية /
├── about/
│   └── page.js         ← /about
└── courses/
    ├── layout.js       ← تخطيط خاص بقسم الدورات
    └── page.js         ← /courses

كل page.js يُغلَّف تلقائياً بـ layout.js الأقرب له. هذا يعني أن الطالب يرى نفس الهيدر والتذييل في كل الصفحات.

التطبيق العملي المباشر

تحدي الدرس الثاني: تعديل التخطيط العام

قم بالتعديل على الكود في المحرر أدناه:

أضف شريط تنقل <nav> داخل الـ header يحتوي على 3 روابط على الأقل (الرئيسية، الدورات، من نحن).

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الثالث