كيفية استخدام ووردبريس مع Next.js لإنشاء موقع ويب بدون واجهة أمامية؟

تتطلب المواقع الإلكترونية الحديثة السرعة والمرونة وتحسين محركات البحث القوي. نظام ووردبريس بدون واجهة أمامية مع Next.js هذه الميزات الثلاث. بفصل نظام إدارة المحتوى عن واجهة المستخدم، تستفيد من أفضل ما في كلا النظامين: تجربة التحرير المألوفة في ووردبريس وقدرات العرض فائقة السرعة في Next.js.

يرشدك هذا الدليل خلال كل شيء، بدءًا من فهم بنية الموقع وحتى نشر موقع ويب جاهز للإنتاج بدون واجهة مستخدم.

سواء كنت مطورًا تستكشف إعدادات أنظمة إدارة المحتوى المنفصلة أو فريقًا يتطلع إلى تحديث موقع ووردبريس قديم، فإن هذا المورد خطوة بخطوة يغطي احتياجاتك.

باختصار: أنشئ موقع ويب سريع وقابل للتوسع بدون واجهة مستخدم

• استخدم إعدادًا منفصلاً لفصل إدارة المحتوى عن الواجهة الأمامية لتحقيق مرونة أفضل.
• استرجاع المحتوى من خلال واجهة برمجة تطبيقات REST أو GraphQL لتسليم البيانات بكفاءة.
• تحسين الأداء من خلال التوليد الثابت، والعرض من جانب الخادم، والتخزين المؤقت الذكي.
• انشر على منصات استضافة حديثة وواجهات برمجة تطبيقات آمنة لتحقيق السرعةوقابلية التوسع والحماية.

ما هو نظام ووردبريس بدون واجهة رسومية (Headless WordPress) ولماذا يُستخدم مع Next.js؟

لفهم قوة هذه المجموعة، تحتاج أولاً إلى فهم مفهوم بنية "بدون واجهة مستخدم" ولماذا تشكل هاتان التقنيتان المحددتان زوجًا مثاليًا.

تحديد بنية نظام إدارة المحتوى ووردبريس بدون واجهة مستخدم

ووردبريس التقليدي نظام متكامل. فهو يتولى تخزين المحتوى، ومنطق العمل، وعرض الصفحات في مكان واحد. عندما يزور أحد المستخدمين موقعك، يستعلم ووردبريس من قاعدة البيانات، ويعالج قوالب PHP، ويعرض صفحة HTML كاملة.

يُفكك نظام ووردبريس بدون واجهة رسومية هذا النموذج. في بنية بدون واجهة رسومية:

• يعمل ووردبريس كخادم خلفي فقط. فهو يدير المحتوى، ومصادقة المستخدم، وتخزين البيانات.

• الواجهة الأمامية منفصلة تمامًا. يتولى إطار عمل جافا سكريبت مثل Next.js جميع عمليات العرض وتفاعل المستخدم.

• تربط واجهة برمجة التطبيقات (API) بين الاثنين. يعرض ووردبريس المحتوى من خلال واجهة برمجة تطبيقات REST أو نقطة نهاية GraphQL، ويقوم Next.js بجلب تلك البيانات لبناء الصفحات.

مصطلح "بدون رأس" يأتي من إزالة "الرأس"، طبقة العرض الأمامية، من ووردبريس.

الخاص بك تثبيت ووردبريس موجودًا، ولا يزال المحررون يسجلون الدخول إلى /wp-admin، ولا تزال المنشورات تُنشأ بالطريقة نفسها. لكن الزوار لا يتفاعلون مع ووردبريس مباشرةً، بل يتفاعلون مع واجهة Next.js الأمامية.

فوائد فصل الواجهة الخلفية عن الواجهة الأمامية

يوفر فصل الواجهة الخلفية لموقع ووردبريس عن بنية الواجهة الأمامية العديد من المزايا الهائلة:

• تحسينات الأداء: يقوم Next.js بعرض الصفحات مسبقًا كصفحات HTML ثابتة أثناء عملية البناء. لا توجد معالجة PHP لكل طلب، مما يقلل بشكل كبير من وقت استجابة الخادم (TTFB).

• حرية تصميم الواجهة الأمامية: يمكنك إعادة بناء أو تصميم واجهة موقعك الأمامية دون الحاجة إلى تعديل ووردبريس. يمكنك تبديل الأطر البرمجية، أو إعادة تصميم التخطيطات، أو إجراء اختبارات A/B دون الحاجة إلى نقل بيانات نظام إدارة المحتوى.

• أمان مُحسّن: يُمكن تشغيل نسخة ووردبريس الخاصة بك على خادم خاص أو نطاق فرعي، بعيدًا عن الإنترنت العام. لا يستطيع المهاجمون استهداف ملف wp-login.phpإذا لم يتمكنوا من العثور عليه.

• قابلية التوسع: تتعامل الصفحات الثابتة التي يتم تقديمها من (CDN) مع ذروة حركة المرور بسلاسة. لا يتلقى خادم ووردبريس الخاص بك سوى طلبات واجهة برمجة التطبيقات (API)، وليس عمليات تحميل الصفحات.

• توصيل المحتوى متعدد القنوات: يمكن لواجهة برمجة تطبيقات محتوى WordPress نفسها أن تخدم موقع ويب وتطبيق جوال ومساعد صوتي وكشك في وقت واحد.

• تجربة مطور أفضل: تعمل فرق الواجهة الأمامية باستخدام أدوات React و JavaScript التي يعرفونها بالفعل، دون الحاجة إلى تعلم PHP أو تطوير قوالب WordPress.

لماذا يُعد Next.js مثاليًا لتحسين أداء ووردبريس بدون واجهة أمامية وتحسين محركات البحث؟

يتميز Next.js عن غيره من أطر عمل JavaScript لمشاريع أنظمة إدارة المحتوى غير الرأسية لعدة أسباب.

• تقنيتا العرض من جانب الخادم (SSR) وإنشاء المواقع الثابتة (SSG) التحكم في وقت وكيفية عرض الصفحات. يمكنك إنشاء مدونتك بشكل ثابت أثناء عملية البناء، أو عرض صفحات المنتجات التي تتغير باستمرار من جانب الخادم، أو الجمع بين الاستراتيجيتين في موقعك.

• خاصية تحسين الصور المدمجة عبر next/image على عرض الصور ذات الحجم المناسب والمنسقة بصيغة WebP تلقائيًا مع التحميل الكسول. وهذا يُحسّن بشكل مباشر نتائج مؤشرات الأداء الرئيسية للويب.

• التوجيه القائم على الملفات يُسهّل [slug].js في دليل صفحاتك يُعالج تلقائيًا جميع عناوين URL لمنشورات المدونة.

• مسارات API إضافة منطق من جانب الخادم، مثل معالجة النماذج أو معالجة webhook، مباشرة في مشروع Next.js الخاص بك دون الحاجة إلى واجهة خلفية منفصلة.

• إمكانيات تحسين محركات البحث (SEO) مُدمجة في الموقع. يقوم Next.js بعرض صفحات HTML كاملة على الخادم، ما يُمكّن برامج زحف محركات البحث من استلام محتوى الصفحة كاملاً دون انتظار تنفيذ جافا سكريبت. وبالإضافة إلى ذلك، next/head A على تنافسية موقعك في تحسين محركات البحث.

مقارنة بين واجهة برمجة تطبيقات REST و GraphQL مع جلب المحتوى في ووردبريس

يوفر ووردبريس نهجين لواجهة برمجة التطبيقات (API) لإعدادات بدون واجهة رسومية:

واجهة برمجة تطبيقات REST الخاصة بـ WordPress مُدمجة مع نواة WordPress، ولا تتطلب أي إضافات. تُتيح هذه الواجهة الوصول إلى نقاط النهاية التالية: /wp-json/wp/v2/posts للمنشورات و /wp-json/wp/v2/pages للصفحات. استخدام دالة fetch() ، وهي مناسبة تمامًا لاحتياجات المحتوى البسيطة.

WPGraphQL هي إضافة تُضيف نقطة نهاية GraphQL إلى ووردبريس. بدلاً من استلام JSON يحتوي على عشرات الحقول التي لا تحتاجها، يمكنك كتابة استعلام يطلب فقط الحقول المطلوبة تحديدًا لواجهة المستخدم الخاصة بك.

يؤدي هذا إلى تقليل حجم الحمولة، وتبسيط جلب البيانات المتداخلة (على سبيل المثال، المنشورات مع فئاتها وتفاصيل المؤلف في طلب واحد)، ويمنح فريق الواجهة الأمامية مخططًا قويًا للعمل معه.

بالنسبة للمشاريع الصغيرة أو الفرق الجديدة على GraphQL، فإن واجهة برمجة تطبيقات REST كافية تمامًا. أما بالنسبة للمواقع الأكبر ذات العلاقات المعقدة بين المحتوى، فإن WPGraphQL يوفر عادةً أداءً أفضل وتجربة تطوير .

المتطلبات الأساسية لإنشاء بيئة ووردبريس و Next.js بدون واجهة رسومية

قبل كتابة أي كود، تحتاج إلى إنشاء أساس متين وإعداد بيئتك.

الأدوات المطلوبة وإعداد البيئة

لإتمام عملية إعداد ووردبريس بدون واجهة رسومية، ستحتاج إلى تثبيت الأدوات التالية على جهازك:

• Node.js (الإصدار 18 أو أحدث): قم بتنزيله من nodejs.org. شغّل الأمر node -v في سطر الأوامر لتأكيد التثبيت.

• npm أو Yarn: يأتي npm مع Node.js. أما Yarn فهو اختياري ولكنه مفضل لدى بعض الفرق.

• تثبيت ووردبريس قيد التشغيل: محلي (باستخدام LocalWP أو MAMP أو Docker) أو نسخة مستضافة. الشرط الوحيد هو إمكانية الوصول إليه عبر بروتوكول HTTP.

• محرر أكواد: VS Code مع امتدادات ESLint و Prettier أفضل تجربة تطوير Next.js.

• Git: للتحكم في الإصدارات وسير عمل النشر.

بالنسبة لتطوير مواقع ووردبريس محليًا، يعتبر LocalWP أسرع طريقة لإنشاء موقع ووردبريس على جهازك بدون أي إعدادات.

تثبيت إضافات ووردبريس الضرورية (WPGraphQL، REST API)

يتم تفعيل واجهة برمجة تطبيقات REST الخاصة بـ WordPress افتراضيًا في جميع عمليات تثبيت WordPress الحديثة. يمكنك التأكد من عملها عن طريق زيارة https://yoursite.com/wp-json/wp/v2/posts الرابط التالي في متصفحك:

لـ WPGraphQL:

• قم بتسجيل الدخول إلى لوحة تحكم ووردبريس الخاصة بك.

• انتقل إلى الإضافات → إضافة جديد.

• ابحث عن WPGraphQL وقم بتثبيت الإضافة من تطوير جيسون باهل.

• قم بتفعيله.

• يظهر عنصر قائمة GraphQL جديد في لوحة التحكم. انتقل إلى GraphQL ← الإعدادات لضبط نقطة النهاية.

يمكنك أيضًا تثبيت WPGraphQL لـ ACF إذا كنت تستخدم Advanced Custom Fields، والذي يعرض بيانات الحقول المخصصة من خلال مخطط GraphQL الخاص بك.

لاختبار نقطة نهاية GraphQL الخاصة بك، انتقل إلى GraphQL ← GraphiQL IDE في لوحة التحكم. تتيح لك هذه البيئة التفاعلية كتابة الاستعلامات واختبارها قبل استخدامها في مشروع Next.js الخاص بك.

تهيئة واجهة برمجة تطبيقات ووردبريس للتسليم بدون واجهة مستخدم

تؤثر العديد من إعدادات ووردبريس على تسليم واجهة برمجة التطبيقات بدون واجهة رسومية:

• الروابط الدائمة: انتقل إلى الإعدادات ← الروابط الدائمة، واختر أي خيار آخر غير "عادي". لا تعمل واجهة برمجة تطبيقات REST بشكل صحيح مع الروابط الدائمة العادية. يُعد "اسم المنشور" (/%postname%/) الخيار الأكثر شيوعًا.

• رؤوس CORS: بشكل افتراضي، قد تحظر استجابات واجهة برمجة تطبيقات REST الخاصة بـ WordPress طلبات الوصول من مصادر مختلفة من خادم تطوير Next.js الخاص بك. أضف رؤوس CORS إلى ملف functions.php ، أو استخدم إضافة مثل WP CORS للسماح بالطلبات من نطاق Next.js الخاص بك.

• كلمات مرور التطبيقات: بالنسبة للمحتوى الخاص أو المسودات، يدعم ووردبريس كلمات مرور التطبيقات (التي تم تقديمها في ووردبريس 5.6). أنشئ واحدة في ملف تعريف المستخدم الخاص بك وأضفها إلى طلبات واجهة برمجة التطبيقات (API) كعنوان مصادقة أساسية.

• إمكانية رؤية المحتوى العام: تأكد من أن المنشورات التي تريد عرضها منشورة وليست محمية بكلمة مرور أو خاصة.

فهم أساسيات React و Next.js قبل البدء

تطوير تطبيقات ووردبريس بدون واجهة مستخدم باستخدام Next.js الإلمام بما يلي:

• أساسيات React: المكونات، والخصائص، والحالة، وخطافات useEffect و useState .

• طرق عرض صفحات Next.js: إن فهم الفرق بين getStaticPropsو getServerSidePropsو getStaticPaths أمر ضروري.

• جافا سكريبت غير المتزامنة: ستكتب كود جلب البيانات غير المتزامن باستخدام async/await و Fetch API.

• بناء جملة JSX: كيفية كتابة بناء جملة يشبه HTML داخل جافا سكريبت.

إذا كنت جديدًا على Next.js، فإن قضاء بضع ساعات مع البرنامج التعليمي الرسمي لـ Next.js على nextjs.org/learn قبل البدء في هذا المشروع سيؤتي ثماره.

دليل خطوة بخطوة لربط ووردبريس و Next.js

بعد وضع الأساس، لنقم بربط الواجهة الخلفية بالواجهة الأمامية. يستخدم هذا الدليل نموذج Next.js Pages Router، وهو نموذج شائع الاستخدام في بنى المدونات الثابتة.

الخطوة 1: إنشاء وتكوين مشروع Next.js جديد

افتح الطرفية الخاصة بك وقم بإنشاء تطبيق Next.js جديد باستخدام أداة create-next-app.

npx create-next-app@latest my-headless-site cd my-headless-site

يسألك معالج الإعداد عما إذا كنت ترغب في استخدام TypeScript وESLint وTailwind CSS وApp Router. في هذا الدليل، اختر Pages Router لتحقيق أقصى قدر من التوافق مع الدروس التعليمية والإضافات الموجودة. يُنصح باستخدام TypeScript للمشاريع الكبيرة.

بعد ذلك، قم بإنشاء .env.local في جذر مشروعك لتخزين عنوان URL الخاص بموقع WordPress:

NEXT_PUBLIC_WORDPRESS_API_URL=https://your-wordpress-site.com/wp-json/wp/v2 WORDPRESS_GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql

لا تقم أبدًا بإضافة هذا الملف إلى نظام التحكم في الإصدارات. أضف .env.local إلى ملف .gitignore.

الخطوة الثانية: جلب بيانات ووردبريس باستخدام واجهة برمجة تطبيقات REST و getStaticProps

أنشئ ملفًا في المسار pages/blog/index.js. ستعرض هذه الصفحة جميع منشورات المدونة التي تم جلبها من واجهة برمجة تطبيقات REST الخاصة بـ WordPress.

export default function BlogIndex({ posts }) { return (<ul style=";text-align:right;direction:rtl"> {posts.map((post) => (<li key={post.id} style=";text-align:right;direction:rtl"> <a href={`/blog/${post.slug}`}>{post.title.rendered}</a></li> ))}</ul> ); } export async function getStaticProps() { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?_embed&per_page=100` ); const posts = await res.json(); return { props: { posts }, revalidate: 60, }; }

دالة getStaticProps أثناء عملية البناء على الخادم. تقوم هذه الدالة بجلب المنشورات من ووردبريس وتمريرها كخصائص إلى مكونك. الأمر revalidate: 60 خاصية إعادة التوليد الثابت التدريجي، والتي تم شرحها في القسم المتقدم.

الخطوة 3: استخدام WPGraphQL مع Apollo أو عميل GraphQL

للحصول على نهج أكثر قابلية للتوسع، استخدم WPGraphQL. أولاً، قم بتثبيت عميل GraphQL خفيف الوزن في مشروع Next.js الخاص بك.

npm install @apollo/client graphql

أنشئ ملفًا مساعدًا في lib/apolloClient.js:

import { ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT, cache: new InMemoryCache(), }); export default client;

ثم استعلم عن منشورات ووردبريس باستخدام GraphQL في getStaticProps:

import client from "../../lib/apolloClient"; import { gql } from "@apollo/client"; const GET_POSTS = gql` query GetPosts { posts { nodes { id title slug date excerpt featuredImage { node { sourceUrl altText } } } } } `; export async function getStaticProps() { const { data } = await client.query({ query: GET_POSTS }); return { props: { posts: data.posts.nodes }, revalidate: 60, }; }

هذا الأسلوب يجلب فقط الحقول التي يستخدمها الواجهة الأمامية الخاصة بك، مما يحافظ على استجابات واجهة برمجة التطبيقات (API) بسيطة.

الخطوة الرابعة: المسارات الديناميكية والتوليد الثابت لصفحات المدونة

لإنشاء صفحات منفصلة لكل منشور في المدونة، ستحتاج إلى استخدام التوجيه الديناميكي. في Next.js، أنشئ ملفًا باسم [slug].js داخل pages/posts/ .

ستستخدم getStaticPaths لإخبار Next.js بعناوين URL التي يجب إنشاؤها، و getStaticProps لجلب المحتوى المحدد لكل عنوان URL.

export async function getStaticPaths() { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?per_page=100` ); const posts = await res.json(); const paths = posts.map((post) => ({ params: { slug: post.slug }, })); return { paths, fallback: "blocking" }; } export async function getStaticProps({ params }) { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&_embed` ); const posts = await res.json(); if (!posts.length) { return { notFound: true }; } return { props: { post: posts[0] }, revalidate: 60, }; }

getStaticPaths لـ Next.js أي الروابط التي يجب عرضها مسبقًا. ويعني ضبط fallback على "blocking" أن أي رابط غير موجود في الإصدار الأولي سيتم عرضه من جانب الخادم عند أول طلب، ثم يتم تخزينه مؤقتًا كصفحة ثابتة.

الخطوة 5: معالجة محتوى المنشور والصور والحقول المخصصة

يخزن ووردبريس محتوى المنشورات كنص HTML خام. يمكنك عرضه بأمان باستخدام دالة dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} / style=";text-align:right;direction:rtl">

لعرض الصور المميزة، استخدم _embed في طلبات REST API. يمكنك الوصول إلى عنوان URL للصورة عبر post._embedded['wp:featuredmedia'][0].source_url.

قم بتغليفه الصورة لتحسينه تلقائيًا:

استورد الصورة من "next/image"؛ <Image src={post._embedded["wp:featuredmedia"][0].source_url} alt={post.title.rendered} width={1200} height={630} />

لتفعيل ميزة الحقول المخصصة المتقدمة، قم بتفعيل إضافة WPGraphQL for ACF. ستظهر بيانات الحقول المخصصة حينها في مخطط GraphQL الخاص بك، ويمكن الاستعلام عنها جنبًا إلى جنب مع بيانات المنشورات القياسية.

تقنيات متقدمة لـ WordPress بدون واجهة رسومية و Next.js

بمجرد أن تعمل الأساسيات، يمكنك تطبيق ميزات متقدمة لجعل موقعك يبدو وكأنه تطبيق على مستوى المؤسسات.

التحسين باستخدام التجديد الثابت التدريجي (ISR)

تتيح لك ميزة ISR تحديث الصفحات المُنشأة بشكل ثابت بعد النشر دون الحاجة إلى إعادة بناء موقعك بالكامل. وتعتمد طريقة تهيئتها على مُوجِّه Next.js الذي تستخدمه، ويُعدّ الخلط بينهما سببًا شائعًا للأخطاء.

صفحات موجه ISR (معتمد على الوقت)

أضف إعادة التحقق (بالثواني) إلى قيمة الإرجاع الخاصة بـ getStaticProps :

return { props: { post }, revalidate: 300, // إعادة الإنشاء كل 5 دقائق };

عندما يزور المستخدم صفحةً ما بعد انتهاء فترة إعادة التحقق، يقوم Next.js بعرض الصفحة المخزنة مؤقتًا على الفور مع إعادة إنشائها في الخلفية. ويحصل الزائر التالي على النسخة الجديدة.

صفحات جهاز التوجيه ISR (عند الطلب)

لإعادة التحقق عند الطلب عند حدوث عملية نشر أو تحديث في ووردبريس، أنشئ مسار API في pages/api/revalidate.js. يستدعي ووردبريس هذا المسار عبر webhook.

export default async function handler(req, res) { if (req.query.secret !== process.env.REVALIDATION_SECRET) { return res.status(401).json({ message: "رمز مميز غير صالح" }); } const slug = req.query.slug; try { await res.revalidate(`/blog/${slug}`); return res.json({ revalidated: true }); } catch (err) { return res.status(500).send("خطأ في إعادة التحقق"); } }

تُعدّ الدالة res.revalidate() هي الطريقة الصحيحة في Pages Router. فهي تُفعّل عملية إعادة إنشاء فورية في الخلفية لهذا المسار المحدد دون انتظار انتهاء صلاحية النافذة الزمنية.

موجه التطبيقات ISR

إذا كنت تستخدم موجه التطبيقات (app/ ) بدلاً من موجه الصفحات، فإن الصيغة تختلف. يتم ضبط إعادة التحقق الزمني كتصدير لتكوين جزء المسار.

// app/blog/[slug]/page.js export const revalidate = 300;

تستخدم عملية إعادة التحقق عند الطلب في App Router الدالة revalidatePath() أو revalidateTag()، المستوردة من next/cache، داخل إجراء الخادم أو معالج المسار، وليس داخل مسار API:

// app/api/revalidate/route.js (معالج مسار تطبيق التوجيه) import { revalidatePath } from "next/cache"; import { NextResponse } from "next/server"; export async function POST(request) { const { slug, secret } = await request.json(); if (secret !== process.env.REVALIDATION_SECRET) { return NextResponse.json({ message: "رمز مميز غير صالح" }, { status: 401 }); } revalidatePath(`/blog/${slug}`); return NextResponse.json({ revalidated: true }); }

الفرق الأساسي: الدالة res.revalidate() تابعة لموجّه الصفحات (Pages Router). أما الدالتان revalidatePath() و revalidateTag() فهما تابعتان لموجّه التطبيق (App Router). استخدام دوال موجّه التطبيق داخل مشروع موجّه الصفحات، أو العكس، سيؤدي إلى أعطال صامتة أو أخطاء أثناء التشغيل. لذا، تأكد من مطابقة الدالة مع الموجّه الذي تستخدمه فعليًا.

يستخدم قسم الخطوات التفصيلية في هذا الدليل مُوجِّه الصفحات (Pages Router) بشكل كامل. إذا قمتَ بالترقية إلى مُوجِّه التطبيقات (App Router) في المستقبل، فقم بتحديث جميع منطق ISR لاستخدام revalidatePath() في معالجات المسارات وفقًا لذلك.

إضافة وضع المعاينة للمحتوى المسودة

تتيح لك خاصية المعاينة رؤية مسودة محتوى ووردبريس على واجهة Next.js الأمامية قبل النشر. قم بإعداد مسارين لواجهة برمجة التطبيقات (API):

• /api/preview: يُفعّل وضع المعاينة ويعيد التوجيه إلى المنشور.
• /api/exit-preview: يعطل وضع المعاينة.

في قالب ووردبريس الخاص بك أو الإضافة، قم بتكوين عنوان URL للمعاينة (إذا كنت تستخدم مصادقة WPGraphQL JWT) للإشارة إلى https://your-nextjs-site.com/api/preview?secret=YOUR_SECRET&slug={slug}.

في getStaticProps، تحقق من وضع المعاينة وقم بجلب محتوى المسودة:

export async function getStaticProps({ params, preview, previewData }) { const authHeader = preview ? { Authorization: `Bearer ${previewData.token}` } : {}; const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&status=draft`, { headers: authHeader } ); // ... }

إنشاء خرائط المواقع وبيانات تعريف تحسين محركات البحث في Next.js

قم بتثبيت next-sitemap لإنشاء خريطة الموقع تلقائيًا:

npm install next-sitemap

أنشئ next-sitemap.config.js وقم بتهيئته ليشمل جميع روابط منشورات ووردبريس التي يتم جلبها أثناء عملية البناء. شغّل next-sitemap كبرنامج نصي بعد البناء في ملف package.json.

للحصول على بيانات تعريف تحسين محركات البحث لكل صفحة، استخدم next/head أو، إذا كنت تستخدم App Router، استخدم واجهة برمجة تطبيقات البيانات الوصفية المدمجة:

استورد Head من "next/head"؛<Head><title> {post.title.rendered} | مدونتي </title><meta name="description" content="{post.excerpt.rendered}" /><meta property="og:title" content="{post.title.rendered}" /><meta property="og:image" content={featuredImageUrl} /></Head>

استخدم إضافة RankMath في ووردبريس، واعرض بياناتها الوصفية عبر WPGraphQL باستخدام إضافة Add WPGraphQL SEO. يتيح هذا للمحررين التحكم في العناوين والأوصاف من ووردبريس، والتي يقوم Next.js بجلبها وعرضها.

اقرأ المزيد: استخدام ووردبريس كنظام إدارة محتوى بدون واجهة أمامية

استراتيجيات التخزين المؤقت و SWR لجلب البيانات من جانب العميل

لا يلزم إنشاء جميع المحتويات بشكل ثابت. تستفيد البيانات الخاصة بالمستخدمين، والتعليقات، أو المخزون المُحدّث لحظيًا من جلب البيانات من جانب العميل. استخدم swr من Vercel.

npm install swr

import useSWR from "swr"; const fetcher = (url) => fetch(url).then((r) => r.json()); function Comments({ postId }) { const { data, error } = useSWR( `/wp-json/wp/v2/comments?post=${postId}`, fetcher ); if (error) return<p style=";text-align:right;direction:rtl"> فشل تحميل التعليقات.</p> إذا لم تكن البيانات موجودة، فقم بالخروج.<p style=";text-align:right;direction:rtl"> تحميل...</p> ؛ يعود<ul style=";text-align:right;direction:rtl"> {data.map((c) =><li key={c.id} style=";text-align:right;direction:rtl"> {c.content.rendered}</li> )}</ul> }

يتولى SWR عمليات التخزين المؤقت وإعادة التحقق وإزالة البيانات المكررة تلقائيًا. ويستخدم استراتيجية "البيانات القديمة أثناء إعادة التحقق": حيث يعيد البيانات المخزنة مؤقتًا على الفور، ثم يجلب البيانات الجديدة في الخلفية دون أي تدخل.

أفضل الممارسات في النشر والأداء والأمان لـ WordPress باستخدام Next.js

انشر واجهة Next.js الأمامية وواجهة WordPress الخلفية كخدمتين منفصلتين. يُعد هذا الفصل أحد المزايا الأساسية لنموذج التشغيل بدون واجهة أمامية.

نشر Next.js بشكل أفضل على منصة Vercel، التي طورتها مجموعة Next.js. تتولى Vercel إدارة ISR، والتخزين المؤقت على الحافة، وتحسين الصور، وإدارة متغيرات البيئة بشكل تلقائي.

تُعدّ Netlify وAWS Amplify بدائل ممتازة. بالنسبة لعمليات النشر ذاتية الاستضافة، شغّل Next.js باستخدام الأمر npm run build && npm start خلف خادم وكيل عكسي Nginx.

ووردبريس على أي استضافة PHP قياسية (مثلWP Engineأو Kinstaأو SiteGround)، أو على خادم افتراضي خاص (VPS). وبما أن ووردبريس لا يقدم سوى استجابات واجهة برمجة التطبيقات (API) (وليس مشاهدات الصفحات)، فإن حتى الاستضافة المتواضعة تتعامل مع حجم كبير من الزيارات.

تعزيز أمان ووردبريس بدون واجهة رسومية:

• انقل تثبيت ووردبريس الخاص بك إلى نطاق فرعي غير عام مثل cms.yourdomain.com.
• تعطيل XML-RPC (add_filter('xmlrpc_enabled', '__return_false');).
• استخدم جدار حماية لتطبيقات الويب (WAF) مثل Cloudflare.
• قم بتقييد استخدام واجهة برمجة تطبيقات REST الخاصة بـ WordPress للطلبات التي تتطلب مصادقة للوصول إلى نقاط النهاية الحساسة.
• حافظ على تحديث نظام ووردبريس الأساسي، والقوالب، والإضافات.
• استخدم كلمات مرور قوية للتطبيقات لمصادقة واجهة برمجة التطبيقات (API).

لتحسين الأداء :

• قم بتمكين توصيل ملفات Next.js الثابتة عبر شبكة توصيل المحتوى (CDN).
• استخدم next/image لجميع الصور، فهو يُنشئ أحجامًا متجاوبة ويُقدّم صور WebP تلقائيًا.
• قلل من استخدام جافا سكريبت من جانب العميل عن طريق إبقاء المكونات معروضة من جانب الخادم كلما أمكن ذلك.
• قم بتعيين رؤوس ذاكرة التخزين المؤقت HTTP المناسبة على استجابات واجهة برمجة تطبيقات WordPress.
• استخدم ذاكرة تخزين مؤقتة لكائنات ووردبريس (Redis أو Memcached) لتسريع استعلامات قاعدة البيانات خلف واجهة برمجة التطبيقات الخاصة بك.

استكشاف الأخطاء الشائعة في ووردبريس مع إعداد Next.js بدون واجهة رسومية

يُعدّ الانتقال إلى نظام تشغيل بدون شاشة تجربةً مُجزية، لكنها تتطلب بعض الوقت للتعلم. إليك أبرز العقبات الشائعة وكيفية التغلب عليها:

• أخطاء CORS أثناء التطوير: يمنع متصفحك طلبات الوصول من مصادر مختلفة من localhost:3000 إلى نطاق ووردبريس الخاص بك. أضف رؤوس CORS إلى ووردبريس عبر functions.php أو استخدم إضافة WP CORS. اسمح بالوصول من مصادر مختلفة لكل من نطاقي Next.js الخاصين بالتطوير والإنتاج.

• الروابط الدائمة التي تُرجع رمز الخطأ 404: يتطلب REST API روابط دائمة غير عادية. انتقل إلى الإعدادات ← الروابط الدائمة واحفظ أي خيار غير عادي، حتى لو لم تُغير أي شيء. سيؤدي هذا إلى مسح قواعد إعادة الكتابة.

• حظر الصور من ووردبريس بواسطة Next.js: يقيّد Next.js الوصول إلى نطاقات الصور الخارجية لأسباب أمنية. أضف نطاق ووردبريس الخاص بك إلى ملف next.config.js:

module.exports = { images: { domains: ["your-wordpress-site.com"], }, };

• كيانات HTML في المحتوى المُعرَض: تُعيد واجهة برمجة تطبيقات REST الخاصة بـ WordPress عناوين تحتوي على كيانات HTML مثل <a> و <a>. استخدم أداة صغيرة لفك تشفيرها، أو ثبّت html-entities npm.

• فشل البناء بسبب كثرة طلبات واجهة برمجة التطبيقات: إذا كان لديك آلاف المنشورات، فقد يؤدي جلب جميع الروابط في getStaticPaths إلى انتهاء المهلة أو تجاوز حدود المعدل. قسّم طلباتك إلى صفحات باستخدام page و per_page معلمات الاستعلام fallback: "blocking" وقم بعرض أحدث منشوراتك فقط مسبقًا.

• أخطاء في مخطط GraphQL بعد تحديثات الإضافات: تتغير مخططات WPGraphQL عند إضافة أو إزالة الإضافات. أعد إنشاء ذاكرة التخزين المؤقت لعميل Apollo أو امسح نسخة المخطط المحلية بعد تغييرات إضافات WordPress.

• ظهور المسودات في بيئة الإنتاج: إذا كنت تستخدم خاصية status=any في استعلامات واجهة برمجة التطبيقات (API) أثناء التطوير، فتأكد من أن استعلامات بيئة الإنتاج تطلب خاصية status=publish. استخدم معلمات واجهة برمجة التطبيقات الخاصة بالبيئة لمنع ظهور المسودات بشكل علني.

خاتمة

يمنحك استخدام ووردبريس مع Next.js بنية قابلة للتطوير وصديقة لمحركات البحث بدون واجهة أمامية، تتفوق على ووردبريس التقليدي في كل مقياس تقريبًا.

يحتفظ فريق المحتوى الخاص بك بمحرر ووردبريس المألوف بينما يقوم فريق التطوير الخاص بك بالبناء باستخدام أدوات React الحديثة.

يعتمد الإعداد على ثلاثة مكونات: ووردبريس كنظام إدارة محتوى بدون واجهة أمامية، وواجهة برمجة تطبيقات REST أو WPGraphQL كطبقة بيانات، و Next.js الذي يتولى جميع عمليات عرض الواجهة الأمامية وتحسين الأداء.

ابدأ بواجهة برمجة تطبيقات REST، ثم اعتمد WPGraphQL مع ازدياد التعقيد، وأضف طبقات ISR ووضع المعاينة وإعادة التحقق عند الطلب مع تطور موقعك. انشر واجهة Next.js الأمامية على Vercel ووردبريس على خادم PHP مخصص لفصل سلس وجاهز للإنتاج.

لم يعد هذا المزيج تجريبياً، بل أصبح يدعم منصات النشر الكبرى، ومواقع التجارة الإلكترونية، وتطبيقات المؤسسات. الأدوات متطورة، والمجتمع نشط، والتحسينات في الأداء ملموسة. الآن هو الوقت الأمثل للبدء.

الأسئلة الشائعة حول استخدام ووردبريس مع Next.js لإنشاء موقع بدون واجهة أمامية