Anexar o painel administrativo ao seu site é uma etapa simples

Por que isso é necessário

Isso garante que sua experiência de edição seja perfeita. Com o painel administrativo anexado ao seu site por meio de um proxy, você pode editar seu site na mesma URL e visualizar as alterações em tempo real. Isso também permite a edição por sobreposição, o que proporciona uma melhor experiência de usuário ao editar a página da web.

Etapas necessárias

Configuração do proxy (há algumas ressalvas)

O proxy é um arquivo proxy.ts no seu projeto (no Next.js 16; em versões mais antigas do Next.js, é middleware.ts). Ele funciona como uma reescrita de URL, direcionando os endpoints /admin, /api e /auth do seu site para o CMS.

• Para localhost: você deve usar um túnel (pois o CMS não pode acessar localhost diretamente)
• Funciona perfeitamente em sites publicados

Configuração do proxy

// proxy.ts  (Next.js 16 — use middleware.ts em versões mais antigas do Next.js)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // A origem do administrador do CMS para a qual o proxy deve direcionar.
  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 retorna um manipulador que você chama com a solicitação recebida. cmsProxyMatcher é o matcher pronto que abrange /admin, /api, /auth e as solicitações de /_next e de ativos estáticos originadas pelo administrador — assim, você não precisa escrever manualmente o array do matcher.

Em versões mais antigas do Next.js, nomeie o arquivo como middleware.ts e exporte o manipulador como middleware, em vez de usar a exportação padrão:

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

Precisa direcionar caminhos adicionais pelo proxy? Passe additionalPaths: ['/my-path'] para createCmsProxy.

Agora você pode acessar /admin no seu site para abrir o painel administrativo. Isso habilita a visualização ao vivo.

Edição por sobreposição e a rota de visualização

As sobreposições e o modo de edição são renderizados pela sua rota de visualização, não pela rota estática de produção. O administrador carrega seu site no modo de edição (?edit_mode=true), e essa solicitação é atendida por ParametricRoutePreviewPage em uma rota force-dynamic, que encaminha searchParams para você:

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

// Renderização dinâmica — permite o uso de 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}
    />
  );
}

Você não precisa configurar as sobreposições manualmente — basta passar searchParams ao renderizador de visualização. Sua rota de produção (`app/[...slug]/page.tsx`) permanece estática com ParametricRoutePage e não precisa de searchParams\. Consulte Configurar projeto CMS híbrido para ver a configuração completa das duas rotas.

Como verificar

1. Acesse /admin no seu site
2. Deve ser solicitado que você faça login e, imediatamente, o painel administrativo do CMS deverá ser aberto
3. Abra seu site pelo administrador e confirme se as sobreposições e a visualização ao vivo funcionam automaticamente

As sobreposições e as visualizações ao vivo devem funcionar automaticamente.

Próximas etapas

Configure as rotas completas de produção + visualização em Configurar projeto CMS híbrido.