ووردبريس + Next.js — أفضل مزيج لأسرع المواقع الديناميكية

أوفّر 90% من وقت تطوير الخلفية...

Next.js الآن الأكثر شعبية بفضل ميزات مثل SSR. لكن عند بناء موقع، اختيار الخلفية أو نظام إدارة المحتوى دائماً تحدٍّ بسيط. رأيت أناساً يستخدمون headless CMS مثل Strapi — لا مشكلة في ذلك، لكن وجدت فوائد كثيرة عند استخدام ووردبريس كـ headless.

• لا تحتاج مهارة برمجة للإعداد والإدارة

• عادة رخيص جداً لاستضافة ووردبريس

• كثير من الإضافات المجانية لتحليل SEO وإنشاء المحتوى

• رفع وإدارة وسائط مدمجة

• REST API جاهز مع خيارات تصفية متعددة

• لوحة تحكم CMS سهلة الاستخدام

• إدارة مستخدمين مدمجة

• أكبر مجتمع للحصول على المساعدة

• يمكن إنشاء حقول إدخال (نص، قائمة منسدلة، حقول مكررة والمزيد) للصفحات/الأقسام من CMS دون لمس الكود أو قاعدة البيانات باستخدام إضافة ACF

جرّب بنفسك على WordPress REST API

إذا لم تكن مألوفاً بووردبريس وتريد معرفة كيف يعمل REST API، يمكنك إنشاء نسخ ووردبريس مؤقتة من https://wp.new أو https://tastewp.com

بعد إنشاء النسخة افتح الـ API التالي:

https://<host_name>/wp-json/v2/posts

سترى جميع المنشورات المتاحة كـ JSON

تعرّف أكثر على WordPress REST API

جرّب إنشاء منشورات جديدة في لوحة الإدارة وتحقق من استجابة الـ API.

جهّز ووردبريس لـ Next.js

• ثبّت القالب الذي يحتوي دوالاً لـ Next

• اضبط رابط الموقع: في إعدادات الإدارة ← عام. ستجد home URL و site URL — استخدم home URL كرابط الواجهة الأمامية

SEO

SEO مهم لكل موقع. أوصي بإضافة Yoast SEO. بعد تثبيتها ستظهر خاصية «yoast_seo» في استجابة الـ API للمنشورات أو الصفحات، وتحتوي كل معلومات الميتا للصفحة أو المقال.

فتات الخبز (Breadcrumbs)

يوفر Yoast SEO أيضاً فتات الخبز لصفحتك.

المخطط (Schema)

إضافة مخطط JSON ممارسة جيدة لـ SEO أفضل. توفر إضافة Yoast ذلك أيضاً عبر الـ API. تحتاج فقط لإضافته لصفحتك كـ HTML.

خريطة الموقع

يمكنك إنشاء خريطة موقع ديناميكية باستخدام WordPress API. عيّنة الكود التالية:

// لجعل التاريخ مناسباً لخريطة الموقع
function getSitemapDate(dateString: string): string {
  if(!dateString) return null;
  const date = new Date(dateString);
  const isoDate = date.toISOString();
  return isoDate.split(".")[0] + "+00:00";
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  let pages = await fetch(
    process.env.WORDPRESS_API_URL +
      "pages/?_fields=slug,link,modified,yoast_head_json"
  ).then((res) => res.json());

 return pages.map((page: any) => {
    return {
      url: `${process.env.SITE_URL}/${getPath(page.link)}`,
      lastModified: getSitemapDate(page.modified),
      images: page.yoast_head_json?.og_image?.map((og: any) =>  og.url.replaceAll("&","")),
    };
  });
}