اذهب إلى المحتوى
  • 0

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

عبد النور محمد

السؤال

سؤالي هو كيفية إنشاء ملف sitemap وإضافته بشكل ديناميكي إلى مشروع nextjs. لقد أنشأت مدونة باستخدام nextjs و mongodb و express js. هذه هي الواجهة الأمامية لهيكل مشروعي (nextjs)

--.next
-- components
-- node_modules
-- pages
-- public
-- config.js
-- next.config.js
-- package.json
-- package-lock.json

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 2

يمكنك أن تستخدم حزمة 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.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...