Configurer Proxy Panneau Admin

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

Pourquoi est-ce nécessaire

Cela garantit que votre expérience d'édition est fluide. Avec le panneau d'administration relié à votre site web via un proxy, vous pouvez modifier votre site web sur la même URL et disposer d'un aperçu visuel des changements en temps réel. Cela permet également l'édition en superposition, ce qui améliore l'expérience utilisateur lors de la modification de la page web.

Étapes requises

Configuration du proxy (il existe quelques mises en garde)

La configuration du proxy se résume à un fichier proxy.ts dans votre projet qui se comporte comme une réécriture d'URL afin de permettre au point de terminaison /admin de votre site web de se résoudre vers le CMS.

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

Configuration du proxy

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

export const proxy = createCmsProxy({
  upstream: "https://cms.dev.tryprofound.com", // panneau d'administration du 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))$)',
  ],
};

Vous pouvez désormais vous rendre sur /admin pour accéder au panneau d'administration depuis votre site web. Cela active l'aperçu en direct.

Résolution des paramètres de recherche du moteur de rendu

Les superpositions sont gérées automatiquement. Il vous suffit de transmettre searchParams à votre moteur de rendu.

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

Comment vérifier

1. Accédez à /admin sur votre site web
2. Vous devriez être invité à vous connecter et le panneau d'administration du CMS devrait s'ouvrir immédiatement

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