Web sitenize yönetim panelini eklemek kolay bir adımdır

Bu neden gerekli?

Bu, düzenleme deneyiminizin sorunsuz olmasını sağlar. Yönetim paneli bir proxy aracılığıyla web sitenize bağlandığında, web sitenizi aynı URL üzerinden düzenleyebilir ve değişikliklerin görsel önizlemesini gerçek zamanlı olarak görebilirsiniz. Ayrıca, web sayfasını düzenlerken daha iyi bir kullanıcı deneyimi sunan katmanlı düzenlemeyi etkinleştirir.

Gerekli Adımlar

Proxy kurulumu (bazı önemli noktalar vardır)

Proxy, projenizde bulunan bir proxy.ts dosyasıdır (Next.js 16'da; daha eski Next.js sürümlerinde middleware.ts). URL yeniden yazma işlemi gibi çalışır ve web sitenizin /admin, /api ve /auth uç noktalarını CMS'e yönlendirir.

• localhost için: bir tünel kullanmalısınız (CMS, localhost adresine doğrudan erişemez)
• Yayına alınmış web sitelerinde sorunsuz çalışır

Proxy Kurulumu

// proxy.ts  (Next.js 16 — daha eski Next.js sürümlerinde middleware.ts kullanın)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // Proxy ile yönlendirilecek CMS yönetim paneli origin'i.
  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, gelen istekle çağıracağınız bir işleyici döndürür. cmsProxyMatcher; /admin, /api, /auth ile yönetim paneli kaynaklı /_next ve statik varlık isteklerini kapsayan, kullanıma hazır bir eşleştiricidir. Böylece eşleştirici dizisini elle yazmanız gerekmez.

Daha eski Next.js sürümlerinde dosyayı middleware.ts olarak adlandırın ve işleyiciyi varsayılan dışa aktarma yerine middleware olarak dışa aktarın:

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

Ek yolları proxy üzerinden yönlendirmeniz mi gerekiyor? createCmsProxy işlevine additionalPaths: ['/my-path'] parametresini aktarın.

Artık yönetim paneline erişmek için sitenizde /admin adresine gidebilirsiniz. Bu, canlı önizlemeyi etkinleştirir.

Katmanlı Düzenleme ve Önizleme Rotası

Katmanlar ve düzenleme modu, statik üretim rotasında değil, önizleme rotanızda oluşturulur. Yönetim paneli sitenizi düzenleme modunda (?edit_mode=true) yükler ve bu istek, searchParams değerlerini sizin için ileten force-dynamic bir rotadaki ParametricRoutePreviewPage tarafından sunulur:

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

// Dinamik oluşturma — edit_mode için searchParams kullanımına izin verir
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}
    />
  );
}

Katmanları manuel olarak bağlamanız gerekmez — searchParams değerini önizleme oluşturucusuna aktarmanız yeterlidir. Üretim rotanız (app/[...slug]/page.tsx), ParametricRoutePage ile statik kalır ve searchParams gerektirmez. İki rotalı kurulumun tamamı için Hibrit CMS Projesini Kurma bölümüne bakın.

Nasıl Doğrulanır?

1. Web sitenizde /admin adresine gidin
2. Sizden giriş yapmanızı istemeli ve CMS yönetim panelini hemen açmalıdır
3. Yönetim panelinden sitenizi açın ve katmanların/canlı önizlemenin otomatik olarak çalıştığını doğrulayın

Katmanlar ve canlı önizlemeler otomatik olarak çalışmalıdır.

Sonraki Adımlar

Hibrit CMS Projesini Kurma bölümünde üretim ve önizleme rotalarının tamamını kurun.