חיבור לוח הניהול לאתר שלך הוא שלב פשוט

מדוע הדבר נדרש

כך מובטחת חוויית עריכה חלקה. כאשר לוח הניהול מחובר לאתר שלך באמצעות פרוקסי, ניתן לערוך את האתר באותה כתובת URL ולראות תצוגה מקדימה חזותית של השינויים בזמן אמת. הדבר מאפשר גם עריכה באמצעות שכבות־על, שמספקת חוויית משתמש טובה יותר בעת עריכת דף האינטרנט.

שלבים נדרשים

הגדרת פרוקסי (יש כמה דברים שכדאי לשים לב אליהם)

הפרוקסי הוא קובץ proxy.ts בפרויקט שלך (ב־Next.js 16; בגרסאות ישנות יותר של Next.js זהו middleware.ts). הוא פועל כמו שכתוב URL, ומנתב את נקודות הקצה /admin, /api ו־/auth של האתר שלך אל ה־CMS.

• עבור localhost: חובה להשתמש במנהרה (מכיוון שה־CMS אינו יכול לגשת ישירות אל localhost)
• פועל בצורה חלקה באתרים שנפרסו

הגדרת פרוקסי

// proxy.ts  (Next.js 16 — use middleware.ts on older Next.js)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // The CMS admin origin to proxy to.
  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 הוא matcher מוכן לשימוש המכסה את /admin, /api, /auth, וכן בקשות /_next ונכסים סטטיים שמקורן באזור הניהול — כך שאין צורך לכתוב ידנית מערך matcher.

בגרסאות ישנות יותר של 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';

// Dynamic rendering — allows searchParams for 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. אמורה להופיע בקשה להתחברות, ולאחר מכן לוח הניהול של ה־CMS ייפתח מיד
3. פתחו את האתר מתוך לוח הניהול ואשרו ששכבות־העל והתצוגה המקדימה החיה פועלות באופן אוטומטי

שכבות־העל והתצוגות המקדימות החיות אמורות לפעול באופן אוטומטי.

השלבים הבאים

הגדירו את נתיבי הייצור והתצוגה המקדימה המלאים במדריך הגדרת פרויקט CMS היברידי.