استفاده از exportPathMap در Next.js برای مدیریت مسیرها

nextjs export path map
05 آذر 1403

اگر به دنبال راهی برای کنترل بهتر بر روی مسیرهای صفحات در پروژه‌های Next.js خود هستید، سمبل شما exportPathMap است. این ویژگی به شما این امکان را می‌دهد تا مسیرهای تولیدی (static) خود را به صورت دستی مشخص کنید. با وجود این ویژگی، شما می‌توانید مسیرها و صفحات را پیش از زمان تولید بهینه‌سازی کنید.

فرض کنیم شما سایتی دارید که بر پایه داده‌های پویا ساخته شده است و می‌خواهید مجموعه محدودی از صفحات را به صورت استاتیک تولید کنید. این زمانی است که exportPathMap به یاری شما می‌آید.

از مزایای استفاده از exportPathMap این است که شما می‌توانید به طور کامل مسیرها و نحوه دسترسی به صفحات مختلف خود را مشخص و شخصی‌سازی کنید. همچنین با این کار شما می‌توانید کنترل بیشتری بر روی منابع سرور و کاهش زمان بارگذاری داشته باشید.

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

نمونه کد برای استفاده از exportPathMap


module.exports = {
  exportPathMap: async function (defaultPathMap) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/post/1': { page: '/post', query: { id: '1' } },
      '/post/2': { page: '/post', query: { id: '2' } }
    };
  }
};

توضیح کد خط به خط

module.exports: کد در حال انتشار یک تنظیمات خاص است برای استفاده در Next.js.
exportPathMap: این فانکشن برای تعیین مسیرهای استاتیک استفاده می‌شود که به صورت async تعریف شده است.
defaultPathMap: این پارامتر نگه‌دارنده مسیرهای پیش‌فرض است که توسط Next.js به طور خودکار تولید می‌شوند.
return: ما مسیرهای سفارشی خود را در حال بازگرداندن به Next.js هستیم.
'/': مسیر اصلی سایت که به صفحه اصلی ما مرتبط است.
'/about': مسیری که به صفحه درباره ما هدایت می‌کند.
'/post/1' و '/post/2': مسیرهای پویا برای صفحات پست با پارامترهای query خاص برای شناسایی شماره پست.

سوالات متداول

؟

چگونه می‌توانم مسیرهای خاصی را با exportPathMap تعیین کنم؟

؟

آیا استفاده از exportPathMap بر روی صفحات پویا تأثیری دارد؟