Conectar el panel de administración a tu sitio web es un paso sencillo

Por qué es necesario

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 superposición, lo que ofrece una mejor experiencia de usuario al editar la página web.

Pasos necesarios

Configuración del proxy (hay algunas consideraciones)

El proxy es un archivo proxy.ts en tu proyecto (en Next.js 16; en versiones anteriores de Next.js es middleware.ts). Funciona como una reescritura de URL, resolviendo los endpoints /admin, /api y /auth de tu sitio web hacia el CMS.

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

Configuración del proxy

// proxy.ts  (Next.js 16 — usa middleware.ts en versiones anteriores de Next.js)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // El origen de administración del CMS al que se reenviarán las solicitudes.
  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 devuelve un controlador al que llamas con la solicitud entrante. cmsProxyMatcher es el matcher listo para usar que cubre /admin, /api, /auth y las solicitudes de /_next y de recursos estáticos originadas por el administrador, por lo que no tienes que escribir manualmente el arreglo del matcher.

En versiones anteriores de Next.js, asigna al archivo el nombre middleware.ts y exporta el controlador como middleware en lugar de usar la exportación predeterminada:

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

¿Necesitas redirigir rutas adicionales mediante el proxy? Pasa additionalPaths: ['/my-path'] a createCmsProxy.

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

Edición mediante superposición y la ruta de vista previa

Las superposiciones y el modo de edición se renderizan mediante tu ruta de vista previa, no mediante la ruta de producción estática. El administrador carga tu sitio en modo de edición (?edit_mode=true) y esa solicitud es atendida por ParametricRoutePreviewPage en una ruta force-dynamic, que reenvía searchParams automáticamente:

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

// Renderizado dinámico: permite usar searchParams para 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}
    />
  );
}

No tienes que conectar las superposiciones manualmente: basta con pasar searchParams al renderizador de vista previa. Tu ruta de producción (`app/[...slug]/page.tsx`) permanece estática con ParametricRoutePage y no necesita searchParams\. Consulta Configurar un proyecto CMS híbrido para ver la configuración completa de las dos rutas.

Cómo verificarlo

1. Ve a /admin en tu sitio web
2. Debería pedirte que inicies sesión y abrir inmediatamente el panel de administración del CMS
3. Abre tu sitio desde el administrador y confirma que las superposiciones y la vista previa en vivo funcionan automáticamente

Las superposiciones y las vistas previas en vivo deberían funcionar automáticamente.

Próximos pasos

Configura las rutas completas de producción y vista previa en Configurar un proyecto CMS híbrido.