التخطيط الرئيسي

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 11 من 47.

كل تطبيق يحتوي على أجزاء لا تتغير أبداً: هيكل الصفحة، الهيدر (Header)، والفوتار (Footer). في Next.js، تعيش هذه الأجزاء داخل layout، ويُطلق على الجزء الخارجي منها اسم root layout.

إنه الملف الذي كان أمامك طوال الوقت:

// app/layout.jsx
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

ثلاثة أشياء تجعله مختلفًا عن الصفحة:

إنه مطلوب، وهو الملف الوحيد الذي يعرض <html> و <body>
إنه يستقبل children، أياً كانت الصفحة التي تطابقت مع رابط URL. إذا نسيت عرض {children} فلن يعرض تطبيقك أي شيء سوى الهيكل الخارجي.
إنه يغلف كل مسار (route) في الـ app، دون أن تقوم أي صفحة باستيراده

إنه يستمر

إليك الجزء الذي يفاجئ الكثيرين. عندما ينتقل المستخدم من / إلى /menu، فإن الـ layout لا يعاد إنشاؤه. حيث يقوم Next.js بتبديل الصفحة بداخله ويترك الـ layout كما هو دون تغيير.

لذلك، لا ترمش الترويسة المشتركة، ويستمر تشغيل الفيديو في الشريط الجانبي، وأي حالة تعيش في الـ layout تظل قائمة خلال التنقل: حيث يظل القائمة المفتوحة مفتوحة، وموقع التمرير يظل كما هو. إن الـ layout عبارة عن إطار طويل الأجل؛ بينما تأتي الصفحات وتذهب بداخله.

إحدى النتايج التي تستحق التذكر: نظرًا لأن التخطيط layout لا يُعاد تشغيله عند التنقل، فإنه لا يمكنه قراءة searchParams الخاصة بالصفحة الحالية. فهو لا يستمع إلى هذا التغيير.

جرّب بنفسك

لا يتضمّن هذا الدرس تحدّيًا برمجيًا.