Konfiguracja Proxy Panelu Administracyjnego

Dołączenie panelu administracyjnego do Twojej strony internetowej to prosty krok

Dlaczego jest to wymagane

Zapewnia to płynne środowisko edycji. Dzięki panelowi administracyjnemu dołączonemu do Twojej witryny za pośrednictwem proxy możesz edytować swoją stronę pod tym samym adresem URL i mieć podgląd zmian w czasie rzeczywistym. Umożliwia to również edycję z nakładką, co zapewnia lepsze wrażenia podczas edycji strony.

Wymagane kroki

Konfiguracja proxy (istnieje kilka zastrzeżeń)

Konfiguracja proxy to po prostu plik proxy.ts w Twoim projekcie, który zachowuje się jak przepisywanie adresu URL, aby umożliwić rozwiązanie końcówki /admin Twojej witryny do CMS.

• Dla localhost: musisz użyć tunelu (ponieważ CMS nie ma bezpośredniego dostępu do localhost)
• Działa bezproblemowo na wdrożonych stronach internetowych

Konfiguracja proxy

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

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

Teraz możesz przejść do /admin, aby uzyskać dostęp do panelu administracyjnego ze swojej strony. Umożliwia to podgląd na żywo.

Rozwiązywanie parametrów wyszukiwania renderera

Nakładki są obsługiwane automatycznie. Musisz tylko przekazać searchParams do swojego renderera.

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

Jak zweryfikować

1. Przejdź do /admin na swojej stronie internetowej
2. Powinno poprosić Cię o zalogowanie i natychmiast otworzyć panel administracyjny CMS

Nakładki i podglądy na żywo powinny działać automatycznie.