مسیرهای رهگیری در Next.js: تسلط بر الگوهای مودال و روکش (Overlay)

Next.js، یک فریمورک محبوب ری‌اکت، ویژگی‌های قدرتمندی برای ساخت اپلیکیشن‌های وب پرفورمنس و مقیاس‌پذیر ارائه می‌دهد. یکی از این ویژگی‌ها، مسیرهای رهگیری (Interception Routes)، روشی پیشرفته برای مدیریت سناریوهای مسیریابی پیچیده، به ویژه هنگام پیاده‌سازی الگوهای مودال و روکش (overlay)، فراهم می‌کند. این راهنمای جامع به بررسی چگونگی استفاده از مسیرهای رهگیری برای ایجاد تجارب کاربری یکپارچه و جذاب می‌پردازد.

مسیرهای رهگیری چه هستند؟

مسیرهای رهگیری به شما این امکان را می‌دهند که یک مسیر را رهگیری کرده و یک رابط کاربری متفاوت را بدون تغییر URL در مرورگر رندر کنید. به آن به عنوان یک انحراف موقت فکر کنید که تجربه کاربری را غنی‌تر می‌کند. این ویژگی به خصوص برای موارد زیر مفید است:

• مودال‌ها: نمایش محتوا در یک پنجره مودال بدون پیمایش به یک صفحه جدید.
• روکش‌ها (Overlays): نمایش اطلاعات یا کنترل‌های اضافی بر روی محتوای موجود.
• گالری‌های تصاویر: ایجاد یک تجربه ناوبری روان و شبیه به صفحه در داخل یک گالری تصویر.
• جریان‌های آشناسازی (Onboarding): راهنمایی کاربران در یک فرآیند چند مرحله‌ای بدون بارگذاری مجدد کامل صفحه.

چرا از مسیرهای رهگیری برای مودال‌ها و روکش‌ها استفاده کنیم؟

روش‌های سنتی مدیریت مودال‌ها و روکش‌ها اغلب شامل مدیریت حالت (state) در یک کامپوننت است که می‌تواند پیچیده شده و منجر به مشکلات عملکردی شود. مسیرهای رهگیری چندین مزیت ارائه می‌دهند:

• بهبود سئو: محتوای نمایش داده شده در مودال یا روکش همچنان برای موتورهای جستجو قابل دسترس است زیرا با یک مسیر خاص مرتبط است.
• 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`: صفحه اصلی که شامل لینک‌هایی به محصولات ما خواهد بود.

پیاده‌سازی کد

۱. صفحه اصلی (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}
 
 
 ))}
 
 
 );
}

۲. صفحه جزئیات محصول (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}
 
این صفحه کامل جزئیات محصول است.
 بازگشت به لیست محصولات
 
 );
}

۳. محتوای مودال (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;
}

۴. لایه (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()` برای بازگشت استفاده می‌کند، که به طور موثر مودال را می‌بندد و به حالت قبلی بازمی‌گردد.

تکنیک‌های پیشرفته مسیرهای رهگیری

۱. مدیریت دکمه بازگشت

یک جنبه حیاتی در پیاده‌سازی مودال، اطمینان از رفتار صحیح دکمه بازگشت مرورگر است. وقتی کاربر یک مودال را باز می‌کند و سپس دکمه بازگشت را کلیک می‌کند، در حالت ایده‌آل باید مودال بسته شده و به زمینه قبلی بازگردد، نه اینکه از اپلیکیشن خارج شود.

متد `history.back()` که در مثال استفاده شد، این اثر را با بازگشت یک مرحله در تاریخچه مرورگر ایجاد می‌کند. با این حال، برای سناریوهای پیچیده‌تر، ممکن است نیاز به پیاده‌سازی یک کنترل‌کننده سفارشی برای دکمه بازگشت داشته باشید که وضعیت مسیریابی فعلی را در نظر بگیرد.

۲. محتوای مودال پویا

در اپلیکیشن‌های واقعی، محتوای مودال به احتمال زیاد پویا خواهد بود و بر اساس شناسه محصول از یک 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}
 {/* ... other product details ... */}
  history.back()}>بستن مودال
 
 );
}

۳. مودال‌های تودرتو

مسیرهای رهگیری می‌توانند برای ایجاد جریان‌های کاری مودال پیچیده، تودرتو شوند. به عنوان مثال، یک کاربر ممکن است مودال جزئیات محصول را باز کند و سپس روی دکمه‌ای کلیک کند تا مودال یک محصول مرتبط باز شود. این کار با ایجاد مسیرهای رهگیری اضافی در دایرکتوری `@modal` قابل دستیابی است.

۴. مدیریت خطاهای 404

سناریویی را در نظر بگیرید که کاربر به URL یک مودال با شناسه محصول نامعتبر (مثلاً `/products/@modal/nonexistent`) می‌رود. شما باید مدیریت خطای مناسبی را برای نمایش یک صفحه 404 کاربرپسند یا هدایت کاربر به یک صفحه محصول معتبر پیاده‌سازی کنید.

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

// ... (بقیه کامپوننت)

 if (!product) {
 return 
محصول یافت نشد.
; // یا هدایت به صفحه 404
 }

// ... (بقیه کامپوننت)

۵. الگوهای روکش (Overlay)

در حالی که مثال‌ها بر روی مودال‌ها متمرکز بوده‌اند، مسیرهای رهگیری می‌توانند برای روکش‌ها نیز استفاده شوند. به جای مرکزیت دادن به محتوا، روکش ممکن است به صورت یک نوار کناری یا یک پنل که از کنار صفحه وارد می‌شود، ظاهر شود. استایل‌دهی CSS متفاوت خواهد بود، اما منطق مسیریابی همان باقی می‌ماند.

مثال‌های واقعی و موارد استفاده

• تجارت الکترونیک: نمایش جزئیات محصول، خلاصه سبد خرید، یا جریان‌های پرداخت در یک مودال یا روکش.
• رسانه‌های اجتماعی: نمایش پیش‌نمایش تصاویر، بخش نظرات، یا پروفایل‌های کاربری در یک مودال.
• مدیریت اسناد: نمایش پیش‌نمایش اسناد، ابزارهای ویرایش، یا تاریخچه نسخه‌ها در یک روکش.
• اپلیکیشن‌های نقشه: نمایش جزئیات مکان، نقاط مورد علاقه، یا اطلاعات مسیر در یک روکش.
• سیستم‌های CRM: نمایش جزئیات تماس، لاگ‌های فعالیت، یا فرصت‌های فروش در یک مودال.

مثال: پلتفرم تجارت الکترونیک بین‌المللی فرض کنید یک سایت تجارت الکترونیک جهانی دارید. وقتی کاربر روی یک محصول کلیک می‌کند، جزئیات در یک مودال باز می‌شود. URL به `/products/[product_id]` تغییر می‌کند که امکان لینک‌دهی مستقیم و مزایای سئو را فراهم می‌کند. اگر کاربر زبان را در صفحه مودال تغییر دهد (مثلاً از انگلیسی به اسپانیایی)، جزئیات محصول به زبان انتخاب شده دریافت می‌شود و محتوای مودال به طور یکپارچه به‌روزرسانی می‌شود. علاوه بر این، سایت می‌تواند مکان کاربر را (با رضایت) تشخیص داده و اطلاعات حمل و نقل مرتبط با منطقه آن‌ها را در مودال نمایش دهد.

بهترین شیوه‌ها برای استفاده از مسیرهای رهگیری

• محتوای مودال را مختصر نگه دارید: از بارگذاری بیش از حد اطلاعات در مودال خودداری کنید. بر روی ارائه جزئیات ضروری تمرکز کنید.
• ناوبری واضح فراهم کنید: اطمینان حاصل کنید که کاربران می‌توانند به راحتی مودال را ببندند و به زمینه قبلی بازگردند.
• برای موبایل بهینه‌سازی کنید: طرح‌بندی مودال را به گونه‌ای طراحی کنید که بر روی صفحه‌های کوچکتر واکنش‌گرا و کاربرپسند باشد.
• به طور کامل تست کنید: رفتار مودال را بر روی مرورگرها و دستگاه‌های مختلف تست کنید تا از یک تجربه یکنواخت اطمینان حاصل شود.
• دسترسی‌پذیری را در نظر بگیرید: ویژگی‌های ARIA مناسب و ناوبری با صفحه‌کلید را پیاده‌سازی کنید تا مودال برای کاربران دارای معلولیت قابل دسترس باشد.

جایگزین‌های مسیرهای رهگیری

در حالی که مسیرهای رهگیری یک راه‌حل قدرتمند برای الگوهای مودال و روکش ارائه می‌دهند، رویکردهای دیگری نیز می‌توانند در نظر گرفته شوند:

• مدیریت حالت سنتی: استفاده از هوک `useState` ری‌اکت یا یک کتابخانه مدیریت حالت مانند Redux یا Zustand برای کنترل نمایش مودال. این روش برای پیاده‌سازی‌های بسیار ساده مودال آسان‌تر است، اما در مقیاس بزرگ مدیریت آن دشوارتر می‌شود.
• کتابخانه‌های مودال شخص ثالث: استفاده از کامپوننت‌های مودال از پیش ساخته شده از کتابخانه‌هایی مانند React Modal یا Material UI. این‌ها می‌توانند یک راه‌حل سریع ارائه دهند اما ممکن است گزینه‌های سفارشی‌سازی را محدود کنند.
• کتابخانه‌های مسیریابی سمت کلاینت: کتابخانه‌هایی مانند React Router می‌توانند برای مدیریت مسیریابی سمت کلاینت و نمایش مودال استفاده شوند.

نتیجه‌گیری

مسیرهای رهگیری Next.js یک روش قوی و زیبا برای پیاده‌سازی الگوهای مودال و روکش در اپلیکیشن‌های وب شما فراهم می‌کنند. با بهره‌گیری از این ویژگی قدرتمند، می‌توانید تجارب یکپارچه، سازگار با سئو و کاربرپسند ایجاد کنید. در حالی که رویکردهای جایگزین وجود دارند، مسیرهای رهگیری ترکیبی منحصر به فرد از مزایا را ارائه می‌دهند که آن‌ها را به ابزاری ارزشمند در جعبه ابزار هر توسعه‌دهنده Next.js تبدیل می‌کند.

منابع بیشتر

• مستندات مسیرهای رهگیری Next.js
• مستندات ری‌اکت