documentation

Adjuntar el panel de administración en tu sitio web es un paso sencillo

¿Por qué es necesario esto?

Esto garantiza que tu experiencia de edición sea fluida. Con el panel de administración conectado a tu sitio web mediante un proxy, puedes editar tu sitio web en la misma URL y obtener una vista previa visual de los cambios en tiempo real. También habilita la edición mediante superposiciones, lo que ofrece una mejor experiencia de usuario al editar la página web.

Pasos necesarios

Configuración del proxy (hay algunas advertencias)

La configuración del proxy es simplemente un archivo proxy.ts en tu proyecto que actúa como una reescritura de URL para permitir que el endpoint /admin de tu sitio web se resuelva hacia el CMS.

Para localhost: debes usar un túnel (ya que el CMS no puede acceder a localhost directamente)
Funciona sin problemas en los sitios web desplegados

Configuración del proxy

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

export const proxy = createCmsProxy({
  upstream: "https://cms.dev.tryprofound.com", // panel de administración del CMS
});

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))$)',
  ],
};

Ahora puedes ir a: /admin para acceder al panel de administración desde tu sitio web. Esto habilita la vista previa en vivo.

Resolución de parámetros de búsqueda del renderizador

Las superposiciones se gestionan de forma automática. Solo necesitas pasar searchParams a tu renderizador.

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

Cómo verificar

Ve a /admin en tu sitio web
Debería solicitarte iniciar sesión y abrir inmediatamente el panel de administración del CMS