Η σύνδεση του πίνακα διαχείρισης στον ιστότοπό σας είναι ένα εύκολο βήμα

Γιατί απαιτείται αυτό

Αυτό διασφαλίζει ότι η εμπειρία επεξεργασίας σας είναι απρόσκοπτη. Με τον πίνακα διαχείρισης συνδεδεμένο στον ιστότοπό σας μέσω ενός διακομιστή μεσολάβησης, μπορείτε να επεξεργάζεστε τον ιστότοπό σας στην ίδια διεύθυνση URL και να έχετε οπτική προεπισκόπηση των αλλαγών σε πραγματικό χρόνο. Ενεργοποιεί επίσης την επεξεργασία μέσω επικάλυψης, η οποία προσφέρει καλύτερη εμπειρία χρήστη κατά την επεξεργασία της ιστοσελίδας.

Απαιτούμενα βήματα

Ρύθμιση διακομιστή μεσολάβησης (υπάρχουν ορισμένες ιδιαιτερότητες)

Ο διακομιστής μεσολάβησης είναι ένα αρχείο proxy.ts στο έργο σας (στο Next.js 16· σε παλαιότερες εκδόσεις του Next.js είναι middleware.ts). Λειτουργεί όπως μια επανεγγραφή URL, ανακατευθύνοντας τα endpoints /admin, /api και /auth του ιστότοπού σας στο CMS.

• Για το localhost: πρέπει να χρησιμοποιήσετε ένα tunnel (καθώς το CMS δεν μπορεί να έχει άμεση πρόσβαση στο 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({
  // Η προέλευση διαχειριστή του CMS στην οποία θα γίνεται η διαμεσολάβηση.
  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 επιστρέφει έναν handler που καλείτε με το εισερχόμενο request. Η cmsProxyMatcher είναι ο έτοιμος matcher που καλύπτει τα /admin, /api, /auth, καθώς και τα αιτήματα /_next και στατικών πόρων που προέρχονται από τον διαχειριστή — επομένως δεν χρειάζεται να γράψετε χειροκίνητα τον πίνακα matcher.

Σε παλαιότερες εκδόσεις του Next.js, ονομάστε το αρχείο middleware.ts και εξάγετε τον handler ως middleware αντί για default export:

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 στον renderer προεπισκόπησης. Η διαδρομή παραγωγής σας (`app/[...slug]/page.tsx) παραμένει στατική με το ParametricRoutePage και δεν χρειάζεται searchParams`. Ανατρέξτε στη σελίδα Ρύθμιση υβριδικού έργου CMS για την πλήρη ρύθμιση των δύο διαδρομών.

Τρόπος επαλήθευσης

1. Μεταβείτε στο /admin στον ιστότοπό σας
2. Θα πρέπει να σας ζητηθεί να συνδεθείτε και να ανοίξει αμέσως ο πίνακας διαχείρισης του CMS
3. Ανοίξτε τον ιστότοπό σας από τον πίνακα διαχείρισης και επιβεβαιώστε ότι οι επικαλύψεις/η ζωντανή προεπισκόπηση λειτουργούν αυτόματα

Οι επικαλύψεις και οι ζωντανές προεπισκοπήσεις θα πρέπει να λειτουργούν αυτόματα.

Επόμενα βήματα

Ρυθμίστε τις πλήρεις διαδρομές παραγωγής + προεπισκόπησης στη σελίδα Ρύθμιση υβριδικού έργου CMS.