مسارات الاعتراض في Next.js: إتقان أنماط النوافذ المنبثقة والتراكبات

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

ما هي مسارات الاعتراض؟

تسمح لك مسارات الاعتراض باعتراض مسار وعرض واجهة مستخدم مختلفة دون تغيير عنوان URL في المتصفح. فكر في الأمر كأنه تحويل مؤقت يثري تجربة المستخدم. وهذا مفيد بشكل خاص في الحالات التالية:

• النوافذ المنبثقة (Modals): عرض المحتوى في نافذة منبثقة دون الانتقال إلى صفحة جديدة.
• التراكبات (Overlays): إظهار معلومات أو عناصر تحكم إضافية فوق المحتوى الحالي.
• معارض الصور: إنشاء تجربة تنقل سلسة تشبه الصفحة داخل معرض الصور.
• مسارات الإعداد الأولي (Onboarding Flows): توجيه المستخدمين خلال عملية متعددة الخطوات دون إعادة تحميل الصفحة بالكامل.

لماذا نستخدم مسارات الاعتراض للنوافذ المنبثقة والتراكبات؟

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

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

إعداد مسارات الاعتراض في Next.js

دعنا نوضح كيفية تنفيذ مسارات الاعتراض بمثال عملي: إنشاء نافذة منبثقة لعرض تفاصيل المنتج في تطبيق للتجارة الإلكترونية.

هيكل المشروع

أولاً، دعنا نحدد بنية المجلد. افترض أن لدينا مجلدًا باسم `products` حيث يكون لكل منتج معرّف فريد.

app/
  products/
    [id]/
      page.js       // صفحة تفاصيل المنتج
    @modal/
      [id]/
        page.js   // محتوى النافذة المنبثقة لتفاصيل المنتج
    default.js  // التخطيط لمجلد المنتجات
  page.js           // الصفحة الرئيسية

الشرح

• `app/products/[id]/page.js`: هذه هي صفحة تفاصيل المنتج الرئيسية.
• `app/products/@modal/[id]/page.js`: هذا يحدد مسار الاعتراض الذي سيعرض محتوى النافذة المنبثقة. لاحظ اصطلاح `@modal` - هذا أمر حاسم لكي يتعرف Next.js على مسار الاعتراض.
• `app/products/default.js`: هذا هو التخطيط لمجلد `products`. من الضروري تغليف مسار `@modal` داخل هذا التخطيط.
• `app/page.js`: الصفحة الرئيسية، والتي ستحتوي على روابط لمنتجاتنا.

تنفيذ الكود

1. الصفحة الرئيسية (app/page.js)

تعرض هذه الصفحة قائمة بالمنتجات، لكل منها رابط يفتح تفاصيل المنتج في نافذة منبثقة.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'حاسوب محمول' },
 { id: '2', name: 'هاتف ذكي' },
 { id: '3', name: 'جهاز لوحي' },
];

export default function Home() {
 return (
 

 
قائمة المنتجات
 

 {products.map((product) => (
 

 
 {product.name}
 
 
 ))}
 
 
 );
}

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

تعرض هذه الصفحة تفاصيل المنتج الكاملة. في تطبيق حقيقي، سيتم جلب البيانات من واجهة برمجة تطبيقات (API) أو قاعدة بيانات. والأهم من ذلك، أنها توفر رابطًا للعودة إلى قائمة المنتجات الأصلية.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
تفاصيل المنتج
 
معرّف المنتج: {id}
 
هذه هي صفحة تفاصيل المنتج الكاملة.
 العودة إلى قائمة المنتجات
 
 );
}

3. محتوى النافذة المنبثقة (app/products/@modal/[id]/page.js)

هذا هو الجزء الحاسم - مسار الاعتراض. إنه يعرض محتوى النافذة المنبثقة باستخدام نفس معرّف المنتج. لاحظ استخدام `useParams` للوصول إلى المعرّف.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
نافذة المنتج المنبثقة
 
معرّف المنتج: {id}
 
يتم عرض هذا المحتوى داخل نافذة منبثقة!
  history.back()}>إغلاق النافذة
 
 
 );
}

ملاحظة: توجيه `'use client';` ضروري للتفاعلية من جانب العميل، خاصة عند استخدام `useParams`.

التنسيق (modal.module.css): يتم استخدام وحدة CSS بسيطة لتنسيق النافذة المنبثقة الأساسي. هذا أمر حاسم لوضع النافذة المنبثقة بشكل صحيح.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* تأكد من أنها في الأعلى */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. التخطيط (app/products/default.js)

يغلف هذا التخطيط مسار `@modal`، مما يضمن عرضه ضمن سياق المنتجات.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 
 );
}

كيف يعمل

1. عندما ينقر المستخدم على رابط منتج في الصفحة الرئيسية (على سبيل المثال، `/products/1`)، يتعرف Next.js على هذا كمسار داخل مجلد `products`.
2. بسبب مسار الاعتراض `@modal`، يتحقق Next.js مما إذا كان هناك مسار مطابق تحت `@modal`.
3. إذا تم العثور على تطابق (على سبيل المثال، `/products/@modal/1`)، يقوم Next.js بعرض المحتوى من `app/products/@modal/[id]/page.js` داخل الصفحة الحالية. يظل عنوان URL في المتصفح هو `/products/1`.
4. تقوم تنسيقات `modalOverlay` بوضع النافذة المنبثقة فوق المحتوى الأساسي.
5. النقر على "إغلاق النافذة" يستخدم `history.back()` للعودة للخلف، مما يؤدي فعليًا إلى إغلاق النافذة المنبثقة والعودة إلى الحالة السابقة.

تقنيات متقدمة لمسارات الاعتراض

1. التعامل مع زر الرجوع

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

تحقق طريقة `history.back()` المستخدمة في المثال هذا التأثير عن طريق التنقل خطوة واحدة إلى الوراء في سجل المتصفح. ومع ذلك، في السيناريوهات الأكثر تعقيدًا، قد تحتاج إلى تنفيذ معالج مخصص لزر الرجوع يأخذ في الاعتبار حالة التوجيه الحالية.

2. محتوى النافذة المنبثقة الديناميكي

في التطبيقات الحقيقية، من المرجح أن يكون محتوى النافذة المنبثقة ديناميكيًا، يتم جلبه من واجهة برمجة تطبيقات (API) أو قاعدة بيانات بناءً على معرّف المنتج. يمكنك استخدام واجهة `fetch` API أو مكتبة لجلب البيانات مثل SWR أو React Query داخل مكون النافذة المنبثقة لاسترداد البيانات اللازمة.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // استبدل بنقطة نهاية API الخاصة بك
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
جاري التحميل...
;
 }

 return (
 

 
{product.name}
 
{product.description}
 {/* ... تفاصيل المنتج الأخرى ... */}
  history.back()}>إغلاق النافذة
 
 );
}

3. النوافذ المنبثقة المتداخلة

يمكن تداخل مسارات الاعتراض لإنشاء مسارات عمل معقدة للنوافذ المنبثقة. على سبيل المثال، قد يفتح المستخدم نافذة منبثقة لتفاصيل المنتج ثم ينقر على زر لفتح نافذة منبثقة لمنتج ذي صلة. يمكن تحقيق ذلك عن طريق إنشاء مسارات اعتراض إضافية داخل مجلد `@modal`.

4. التعامل مع أخطاء 404

خذ في الاعتبار السيناريو الذي ينتقل فيه المستخدم إلى عنوان URL لنافذة منبثقة بمعرّف منتج غير صالح (على سبيل المثال، `/products/@modal/nonexistent`). يجب عليك تنفيذ معالجة أخطاء مناسبة لعرض صفحة 404 سهلة الاستخدام أو إعادة توجيه المستخدم إلى صفحة منتج صالحة.

// app/products/@modal/[id]/page.js

// ... (بقية المكون)

 if (!product) {
 return 
المنتج غير موجود.
; // أو إعادة التوجيه إلى صفحة 404
 }

// ... (بقية المكون)

5. أنماط التراكب

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

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

• التجارة الإلكترونية: عرض تفاصيل المنتج، أو ملخصات عربة التسوق، أو مسارات الدفع في نافذة منبثقة أو تراكب.
• وسائل التواصل الاجتماعي: إظهار معاينات الصور، أو أقسام التعليقات، أو ملفات تعريف المستخدمين في نافذة منبثقة.
• إدارة المستندات: عرض معاينات المستندات، أو أدوات التحرير، أو سجل الإصدارات في تراكب.
• تطبيقات الخرائط: إظهار تفاصيل الموقع، أو نقاط الاهتمام، أو معلومات المسار في تراكب.
• أنظمة إدارة علاقات العملاء (CRM): عرض تفاصيل جهات الاتصال، أو سجلات النشاط، أو فرص المبيعات في نافذة منبثقة.

مثال: منصة تجارة إلكترونية دولية تخيل موقعًا عالميًا للتجارة الإلكترونية. عندما ينقر المستخدم على منتج، تفتح التفاصيل في نافذة منبثقة. يتغير عنوان URL إلى `/products/[product_id]`، مما يسمح بالربط المباشر وفوائد تحسين محركات البحث. إذا قام المستخدم بتبديل اللغات في صفحة النافذة المنبثقة (على سبيل المثال، من الإنجليزية إلى الإسبانية)، يتم جلب تفاصيل المنتج باللغة المحددة، ويتم تحديث محتوى النافذة بسلاسة. علاوة على ذلك، يمكن للموقع اكتشاف موقع المستخدم (بموافقته) وعرض معلومات الشحن ذات الصلة بمنطقته داخل النافذة المنبثقة.

أفضل الممارسات لاستخدام مسارات الاعتراض

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

بدائل مسارات الاعتراض

بينما توفر مسارات الاعتراض حلاً قويًا لأنماط النوافذ المنبثقة والتراكبات، يمكن النظر في طرق أخرى:

• إدارة الحالة التقليدية: استخدام `useState` hook في React أو مكتبة لإدارة الحالة مثل Redux أو Zustand للتحكم في رؤية النافذة المنبثقة. هذا أبسط لتطبيقات النوافذ المنبثقة الأساسية جدًا، ولكنه يصبح أصعب في الإدارة على نطاق واسع.
• مكتبات النوافذ المنبثقة من جهات خارجية: استخدام مكونات نوافذ منبثقة جاهزة من مكتبات مثل React Modal أو Material UI. يمكن أن توفر هذه حلاً سريعًا ولكنها قد تحد من خيارات التخصيص.
• مكتبات التوجيه من جانب العميل: يمكن استخدام مكتبات مثل React Router لإدارة التوجيه من جانب العميل ورؤية النوافذ المنبثقة.

الخاتمة

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

موارد إضافية

• توثيق مسارات الاعتراض في Next.js
• توثيق React