كيفية إضافة ملف sitemap.xml في Nextjs

يمكنك أن تستخدم حزمة next-sitemap والتي تسمح لك بتوليد ملف sitemap.xml وكذلك ملف robots.txt، كما أنها تقوم بإنشاء ملف sitemap.xml بناءًا على الملفات من نوع Static وكذلك pre-rendered وصفحات SSR بشكل تلقائي.

لتثبيت الحزمة نفذ الأمر التالي:

# إن كنت تستخدم yarn كمدير للحزم
yarn add next-sitemap -D

# أو من خلال NPM
npm i next-sitemap

لتعمل هذه الحزمة تحتاج إلى ملف يحتوي على الإعدادات الرئيسية وهو ملف next-sitemap.js، لذلك قم بإنشاء هذا الملف في مجلد المشروع الرئيسي الخاص بك وأكتب محتواه كالتالي:

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // سطر إختيار لتوليد ملف robots.txt تلقائيًا
  
  // ...
}

لاحظ أننا قمنا بالحصول على عنوان الموقع من خلال ملف .env مباشرة، حيث تدعم الحزمة على الحصول على المتغيرات من ملف .env بشكل تلقائي.

الآن لتشغيل الحزمة ولتوليد ملف sitemap.xml (و ملف robots.txt) قم بإضافة أمر next-sitemap إلى ملف package.json، على النحو التالي:

{
  "build": "next build",
  "postbuild": "next-sitemap --config next-sitemap.js"
}

إن كان لديك عدد كبير من المسارات والملفات في المشروع يمكنك أن تقوم بتقسيم ملف sitemap.xml لعمل ملفات sitemap فرعية، وذلك من خلال تعديل ملف next-sitemap.js وإضافة الخاصية sitemapSize، كالتالي:

module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  sitemapSize: 1000,
}

من خلال عمل التعديل السابق على ملف الإعدادات، ستقوم الحزمة بتخزين المسارات والملفات وعندما يزيد هذه المسارات عن 1000 سوف يتم تقسيهم إلى ملفات فرعية مثل sitemap-1.xml و sitemap-2.xml بالإضافة إلى عمل ملف sitemap.xml رئيسي كفهرس للملفات الأخرى (وهذا الأمر تدعمه كل محركات البحث المعروفة وتنصح به أيضًا).

يمكنك الإطلاع على مزيد من الخيارات والإعدادات التي تقدمها هذه الحزمة من خلال صفحتها على GitHub.