Instellen Beheerderspaneel Proxy

Het koppelen van het beheerderspaneel aan je website is een eenvoudige stap

Waarom is dit nodig

Dit zorgt ervoor dat je bewerkingservaring naadloos verloopt. Wanneer het beheerderspaneel via een proxy aan je website is gekoppeld, kun je je website bewerken op dezelfde URL en heb je een visuele preview van de wijzigingen in realtime. Het maakt ook overlay-bewerking mogelijk, wat zorgt voor een betere gebruikerservaring bij het bewerken van de webpagina.

Vereiste stappen

Proxyconfiguratie (er zijn enkele kanttekeningen)

De proxyconfiguratie is simpelweg een proxy.ts-bestand in je project dat zich gedraagt als een URL-overschrijving, zodat het /admin-endpoint van je website naar het CMS wordt geleid.

• Voor localhost: je moet een tunnel gebruiken (omdat het CMS niet rechtstreeks toegang heeft tot localhost)
• Werkt naadloos op geïmplementeerde websites

Proxyconfiguratie

// proxy.ts
import { createCmsProxy } from 'cms-renderer/lib/proxy';

export const proxy = createCmsProxy({
  upstream: "https://cms.dev.tryprofound.com", // cms-beheerderspaneel
});

export const config = {
  matcher: [
    '/admin',
    '/admin/:path*',
    '/api/:path*',
    '/auth/:path*',
    '/_next/:path*',
    '/((?:.*\\.(?:css|js|map|png|jpg|jpeg|gif|svg|ico|webp|avif|woff|woff2|ttf|eot|txt|xml))$)',
  ],
};

Je kunt nu naar /admin gaan om het beheerderspaneel vanaf je website te openen. Dit schakelt de livepreview in.

Resolutie van zoekparameters voor de renderer

De overlays worden automatisch afgehandeld. Je hoeft alleen searchParams aan je renderer door te geven.

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

Hoe te controleren

1. Ga naar /admin op je website
2. Je zou moeten worden gevraagd om in te loggen en het CMS-beheerderspaneel opent vervolgens onmiddellijk

Overlays en livepreviews zouden automatisch moeten werken.