إن إرفاق لوحة تحكم المشرف بموقعك خطوة سهلة

لماذا يُطلب ذلك

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

الخطوات المطلوبة

إعداد الوكيل (توجد بعض الاستثناءات)

الوكيل هو ملف proxy.ts في مشروعك (في Next.js 16؛ أما في الإصدارات الأقدم من Next.js فهو middleware.ts). ويعمل مثل إعادة كتابة عنوان URL، إذ يوجّه نقاط النهاية /admin و/api و/auth في موقعك إلى نظام إدارة المحتوى.

• بالنسبة إلى localhost: يجب استخدام نفق (لأن نظام إدارة المحتوى لا يستطيع الوصول إلى localhost مباشرةً)
• يعمل بسلاسة على المواقع المنشورة

إعداد الوكيل

// proxy.ts  (Next.js 16 — استخدم middleware.ts في الإصدارات الأقدم من Next.js)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // مصدر لوحة تحكم نظام إدارة المحتوى الذي سيتم التوجيه إليه.
  upstream: process.env.ADMIN_UPSTREAM_ORIGIN ?? 'https://cms.dev.tryprofound.com',
});

export default async function proxy(request: NextRequest) {
  return cmsProxy(request);
}

export const config = {
  matcher: cmsProxyMatcher,
};

تعيد createCmsProxy معالجًا تستدعيه باستخدام الطلب الوارد. أما cmsProxyMatcher فهو مُطابق جاهز يغطي /admin و/api و/auth وطلبات /_next وطلبات الأصول الثابتة الصادرة من لوحة التحكم، لذلك لن تضطر إلى كتابة مصفوفة المطابقة يدويًا.

في إصدارات Next.js الأقدم، سمِّ الملف middleware.ts وصدّر المعالج باسم middleware بدلًا من التصدير الافتراضي:

export async function middleware(request: NextRequest) { return cmsProxy(request); } export const config = { matcher: cmsProxyMatcher };

هل تحتاج إلى توجيه مسارات إضافية؟ مرّر additionalPaths: ['/my-path'] إلى createCmsProxy.

يمكنك الآن الانتقال إلى /admin على موقعك للوصول إلى لوحة تحكم المشرف. يتيح هذا المعاينة المباشرة.

تحرير التراكبات ومسار المعاينة

تُعرض التراكبات ووضع التحرير بواسطة مسار المعاينة، وليس مسار الإنتاج الثابت. تحمّل لوحة التحكم موقعك في وضع التحرير (?edit_mode=true)، ويُخدَم هذا الطلب بواسطة ParametricRoutePreviewPage على مسار force-dynamic، الذي يمرّر searchParams نيابةً عنك:

// app/cms-preview_/[...slug]/page.tsx
import { ParametricRoutePreviewPage } from 'cms-renderer/lib/renderer';
import { registry } from '@/lib/registry';
import { cmsConfig } from '@/lib/cms-config';

// العرض الديناميكي — يتيح استخدام searchParams مع edit_mode
export const dynamic = 'force-dynamic';

interface PageProps {
  params: Promise<{ slug: string[] }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function PreviewPage({ params, searchParams }: PageProps) {
  const { slug } = await params;

  return (
    <ParametricRoutePreviewPage
      registry={registry}
      apiKey={cmsConfig.apiKey}
      websiteId={cmsConfig.websiteId}
      cmsUrl={cmsConfig.cmsUrl}
      params={Promise.resolve({ slug })}
      searchParams={searchParams}
    />
  );
}

لا تحتاج إلى توصيل التراكبات يدويًا — يكفي تمرير searchParams إلى مُصيّر المعاينة. يظل مسار الإنتاج لديك (`app/[...slug]/page.tsx) ثابتًا باستخدام  ParametricRoutePage ولا يحتاج إلى searchParams`. راجع إعداد مشروع CMS هجين للاطلاع على إعداد المسارين الكامل.

كيفية التحقق

1. انتقل إلى /admin على موقعك
2. من المفترض أن يُطلب منك تسجيل الدخول ثم تُفتح لوحة تحكم نظام إدارة المحتوى مباشرةً
3. افتح موقعك من لوحة التحكم وتحقق من عمل التراكبات/المعاينة المباشرة تلقائيًا

من المفترض أن تعمل التراكبات والمعاينات المباشرة تلقائيًا.

الخطوات التالية

أعدّ مساري الإنتاج والمعاينة الكاملين في إعداد مشروع CMS هجين.