المسارات المتوازية في Next.js: بناء تخطيطات صفحات ديناميكية

Next.js، إطار عمل React الرائد، يتطور باستمرار ليزود المطورين بأدوات قوية لبناء تطبيقات ويب حديثة. واحدة من أكثر الميزات إثارة التي تم تقديمها في الإصدارات الأخيرة هي المسارات المتوازية (Parallel Routes). تتيح لك هذه الميزة عرض أقسام متعددة مستقلة ضمن تخطيط الصفحة نفسه، مما يوفر مرونة وتحكمًا لا مثيل لهما في بنية تطبيقك وتجربة المستخدم.

ما هي المسارات المتوازية؟

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

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

• عرض شريط تنقل دائم بجانب المحتوى الرئيسي.
• تنفيذ نوافذ منبثقة (modals) أو أشرطة جانبية دون التأثير على تدفق الصفحة الرئيسي.
• إنشاء لوحات تحكم (dashboards) مع أدوات (widgets) مستقلة يمكن تحميلها وتحديثها بشكل منفصل.
• إجراء اختبار A/B لإصدارات مختلفة من المكون دون التأثير على بنية الصفحة الكلية.

فهم المفهوم: الخانات (Slots)

المفهوم الأساسي وراء المسارات المتوازية هو فكرة "الخانات" (slots). الخانة هي منطقة مسماة داخل تخطيطك حيث يتم عرض جزء مسار معين. يمكنك تحديد هذه الخانات في مجلد app الخاص بك باستخدام الرمز @ متبوعًا باسم الخانة. على سبيل المثال، يمثل @sidebar خانة باسم "sidebar".

يمكن بعد ذلك ربط كل خانة بجزء مسار. عندما ينتقل المستخدم إلى مسار معين، سيقوم Next.js بعرض المكون المرتبط بجزء المسار هذا في الخانة المقابلة في التخطيط.

التنفيذ: مثال عملي

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

1. بنية المجلدات

أولاً، دعنا نحدد بنية المجلدات لتطبيقنا:

app/
  product/
    [id]/
      @cart/
        page.js  // مكون عربة التسوق
      page.js      // مكون تفاصيل المنتج
    layout.js   // تخطيط المنتج
  layout.js     // التخطيط الجذري

إليك ما يمثله كل ملف:

• app/layout.js: التخطيط الجذري للتطبيق بأكمله.
• app/product/[id]/layout.js: تخطيط خاص بصفحة تفاصيل المنتج. هذا هو المكان الذي سنحدد فيه خاناتنا.
• app/product/[id]/page.js: مكون تفاصيل المنتج الرئيسي.
• app/product/[id]/@cart/page.js: مكون عربة التسوق، والذي سيتم عرضه في خانة @cart.

2. التخطيط الجذري (app/layout.js)

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

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
تطبيقي للتجارة الإلكترونية
        {children}
        
      
    
  );
}

3. تخطيط المنتج (app/product/[id]/layout.js)

هذا هو الجزء الحاسم حيث نحدد خاناتنا. نتلقى المكونات الخاصة بصفحة المنتج الرئيسية وعربة التسوق كـ props، والتي تتوافق مع page.js و @cart/page.js على التوالي.

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    

      
{children}
      
    
  );
}

في هذا المثال، نستخدم تخطيط flexbox بسيط لوضع محتوى المنتج الرئيسي والشريط الجانبي للعربة جنبًا إلى جنب. سيحتوي الـ prop children على المخرجات المعروضة من app/product/[id]/page.js، وسيحتوي الـ prop cart على المخرجات المعروضة من app/product/[id]/@cart/page.js.

4. صفحة تفاصيل المنتج (app/product/[id]/page.js)

هذه صفحة مسار ديناميكية قياسية تعرض تفاصيل المنتج بناءً على المعلمة id.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // جلب بيانات المنتج بناءً على الـ ID
  const product = await fetchProduct(id);

  return (
    

      
تفاصيل المنتج
      
{product.name}
      
{product.description}
      
السعر: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // استبدل هذا بمنطق جلب البيانات الفعلي الخاص بك
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `منتج ${id}`, description: `وصف المنتج ${id}`, price: 99.99 });
  }, 500));
}

5. مكون عربة التسوق (app/product/[id]/@cart/page.js)

يمثل هذا المكون عربة التسوق، والتي سيتم عرضها في خانة @cart.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    

      
عربة التسوق
      
العناصر في العربة: 3
      الدفع
    
  );
}

شرح

عندما ينتقل المستخدم إلى /product/123، سيقوم Next.js بما يلي:

1. عرض التخطيط الجذري (app/layout.js).
2. عرض تخطيط المنتج (app/product/[id]/layout.js).
3. ضمن تخطيط المنتج، عرض مكون تفاصيل المنتج (app/product/[id]/page.js) في الـ prop children.
4. بشكل متزامن، عرض مكون عربة التسوق (app/product/[id]/@cart/page.js) في الـ prop cart.

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

فوائد استخدام المسارات المتوازية

• تجربة مستخدم محسنة: إنشاء واجهات مستخدم أكثر تفاعلية وجاذبية مع عناصر دائمة وأقسام ديناميكية.
• زيادة قابلية إعادة استخدام الكود: مشاركة المكونات والتخطيطات عبر مسارات مختلفة بسهولة أكبر.
• أداء معزز: تحميل وتحديث أقسام الصفحة بشكل مستقل، مما يقلل من الحاجة إلى إعادة عرض الصفحة بالكامل.
• تطوير مبسط: إدارة التخطيطات والتفاعلات المعقدة بهيكل أكثر نمطية وتنظيمًا.
• إمكانيات اختبار A/B: اختبار تنويعات مختلفة من أقسام معينة في الصفحة بسهولة دون التأثير على الصفحة بأكملها.

اعتبارات وأفضل الممارسات

• تعارض المسارات: كن حذرًا لتجنب تعارض المسارات بين المسارات المتوازية. يجب أن يكون لكل جزء مسار غرض فريد وألا يتداخل مع الأجزاء الأخرى.
• تعقيد التخطيط: بينما توفر المسارات المتوازية المرونة، يمكن أن يؤدي الاستخدام المفرط إلى تخطيطات معقدة يصعب صيانتها. اسعَ لتحقيق توازن بين المرونة والبساطة.
• تأثيرات تحسين محركات البحث (SEO): ضع في اعتبارك تأثيرات تحسين محركات البحث لاستخدام المسارات المتوازية، خاصةً إذا كان المحتوى في الخانات المختلفة مختلفًا بشكل كبير. تأكد من أن محركات البحث يمكنها الزحف إلى المحتوى وفهرسته بشكل صحيح. استخدم عناوين URL الأساسية (canonical URLs) بشكل مناسب.
• جلب البيانات: إدارة جلب البيانات بعناية، خاصة عند التعامل مع أقسام مستقلة متعددة. فكر في استخدام مخازن بيانات مشتركة أو آليات تخزين مؤقت لتجنب الطلبات المتكررة.
• إمكانية الوصول (Accessibility): تأكد من أن تنفيذ المسارات المتوازية الخاص بك متاح لجميع المستخدمين، بما في ذلك ذوي الإعاقة. استخدم سمات ARIA المناسبة و HTML الدلالي لتوفير تجربة مستخدم جيدة.

الاستخدام المتقدم: العرض الشرطي والخانات الديناميكية

لا تقتصر المسارات المتوازية على تعريفات الخانات الثابتة. يمكنك أيضًا استخدام العرض الشرطي والخانات الديناميكية لإنشاء تخطيطات أكثر مرونة.

العرض الشرطي

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

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    

      
{children}
      
    
  );
}

function AdminPanel() {
  return (
    

      
لوحة الإدارة
      
إدارة تفاصيل المنتج هنا.
    
  );
}

في هذا المثال، إذا كان لدى المستخدم دور 'admin'، فسيتم عرض مكون AdminPanel في خانة @cart بدلاً من عربة التسوق.

الخانات الديناميكية

على الرغم من أنها أقل شيوعًا، يمكنك *نظريًا* بناء أسماء الخانات ديناميكيًا، ولكن هذا الأمر لا يُنصح به عمومًا بسبب التعقيد والتأثيرات المحتملة على الأداء. من الأفضل الالتزام بالخانات المحددة مسبقًا والمفهومة جيدًا. إذا نشأت الحاجة إلى "خانات" ديناميكية، ففكر في حلول بديلة مثل استخدام مكونات React القياسية مع props والعرض الشرطي.

أمثلة واقعية وحالات استخدام

دعنا نستكشف بعض الأمثلة الواقعية لكيفية استخدام المسارات المتوازية في أنواع مختلفة من التطبيقات:

• منصات التجارة الإلكترونية: عرض عربة تسوق، أو توصيات، أو معلومات حساب المستخدم بجانب تفاصيل المنتج أو صفحات الفئات.
• لوحات التحكم (Dashboards): إنشاء لوحات تحكم مع أدوات (widgets) مستقلة لعرض المقاييس والرسوم البيانية والتقارير. يمكن تحميل كل أداة وتحديثها بشكل منفصل دون التأثير على لوحة التحكم بأكملها. قد تعرض لوحة تحكم المبيعات بيانات جغرافية في مسار متوازٍ، وأداء المنتج في مسار آخر، مما يسمح للمستخدم بتخصيص ما يراه دون إعادة تحميل الصفحة بالكامل.
• تطبيقات الوسائط الاجتماعية: إظهار شريط جانبي للدردشة أو لوحة إشعارات بجانب التغذية الرئيسية أو صفحات الملف الشخصي.
• أنظمة إدارة المحتوى (CMS): توفير جزء معاينة أو أدوات تحرير بجانب المحتوى الذي يتم تحريره. يمكن لمسار متوازٍ عرض معاينة حية للمقالة التي تتم كتابتها، وتحديثها في الوقت الفعلي مع إجراء التغييرات.
• منصات التعلم: عرض مواد الدورة التدريبية بجانب تتبع التقدم أو ميزات التفاعل الاجتماعي.
• التطبيقات المالية: عرض أسعار الأسهم في الوقت الفعلي أو ملخصات المحافظ الاستثمارية بجانب الأخبار أو مقالات التحليل. تخيل موقعًا إخباريًا ماليًا يستخدم المسارات المتوازية لعرض بيانات السوق الحية بجانب الأخبار العاجلة، مما يوفر للمستخدمين رؤية شاملة للمشهد المالي.
• أدوات التعاون العالمية: السماح بالتحرير المتزامن للمستندات أو الكود مع لوحات مؤتمرات الفيديو أو الدردشة الدائمة. يمكن لفريق هندسي موزع في سان فرانسيسكو ولندن وطوكيو استخدام المسارات المتوازية للعمل على نفس مستند التصميم في الوقت الفعلي، مع عرض مكالمة فيديو بشكل دائم في شريط جانبي، مما يعزز التعاون السلس عبر المناطق الزمنية.

الخاتمة

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

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