Ajouter le panneau d’administration à votre site est une étape simple

Pourquoi est-ce nécessaire ?

Cela garantit une expérience d’édition fluide. Lorsque le panneau d’administration est relié à votre site via un proxy, vous pouvez modifier votre site à partir de la même URL et obtenir un aperçu visuel des changements en temps réel. Cela permet également la modification par superposition, qui offre une meilleure expérience utilisateur lors de l’édition de la page web.

Étapes requises

Configuration du proxy (quelques points importants)

Le proxy est un fichier proxy.ts dans votre projet (avec Next.js 16 ; dans les versions antérieures de Next.js, il s’agit de middleware.ts). Il fonctionne comme une réécriture d’URL et redirige les points de terminaison /admin, /api et /auth de votre site vers le CMS.

• Pour localhost : vous devez utiliser un tunnel (le CMS ne pouvant pas accéder directement à localhost)
• Fonctionne parfaitement sur les sites déployés

Configuration du proxy

// proxy.ts  (Next.js 16 — use middleware.ts on older Next.js)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // The CMS admin origin to proxy to.
  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 renvoie un gestionnaire que vous appelez avec la requête entrante. cmsProxyMatcher est le sélecteur prêt à l’emploi qui couvre /admin, /api, /auth, ainsi que les requêtes /_next et de ressources statiques provenant de l’administration : vous n’avez donc pas besoin d’écrire manuellement le tableau des sélecteurs.

Dans les anciennes versions de Next.js, nommez le fichier middleware.ts et exportez le gestionnaire sous le nom middleware au lieu d’utiliser l’export par défaut :

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

Vous devez rediriger des chemins supplémentaires ? Passez additionalPaths: ['/my-path'] à createCmsProxy.

Vous pouvez maintenant accéder à /admin sur votre site pour ouvrir le panneau d’administration. Cela active l’aperçu en direct.

Modification par superposition et route d’aperçu

Les superpositions et le mode édition sont rendus par votre route d’aperçu, et non par la route de production statique. L’administration charge votre site en mode édition (?edit_mode=true) et cette requête est traitée par ParametricRoutePreviewPage sur une route force-dynamic, qui transmet searchParams pour vous :

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

// Dynamic rendering — allows searchParams for 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}
    />
  );
}

Vous n’avez pas besoin de connecter les superpositions manuellement : il suffit de transmettre searchParams au moteur de rendu de l’aperçu. Votre route de production (`app/[...slug]/page.tsx) reste statique avec ParametricRoutePage et n’a pas besoin de searchParams`. Consultez Configurer un projet CMS hybride pour découvrir la configuration complète avec deux routes.

Comment vérifier

1. Accédez à /admin sur votre site
2. Le système doit vous demander de vous connecter, puis ouvrir immédiatement le panneau d’administration du CMS
3. Ouvrez votre site depuis l’administration et vérifiez que les superpositions et l’aperçu en direct fonctionnent automatiquement

Les superpositions et les aperçus en direct devraient fonctionner automatiquement.

Étapes suivantes

Configurez les routes complètes de production et d’aperçu dans Configurer un projet CMS hybride.