Menghubungkan panel admin ke situs web Anda adalah langkah yang mudah

Mengapa ini diperlukan

Ini memastikan pengalaman pengeditan Anda berjalan lancar. Dengan menghubungkan panel admin ke situs web Anda melalui proksi, Anda dapat mengedit situs web pada URL yang sama dan melihat pratinjau visual perubahan secara real time. Ini juga mengaktifkan pengeditan overlay, yang memberikan pengalaman pengguna yang lebih baik saat mengedit halaman web.

Langkah-langkah yang Diperlukan

Penyiapan proksi (ada beberapa hal yang perlu diperhatikan)

Proksi adalah file proxy.ts dalam proyek Anda (di Next.js 16; pada Next.js versi lama, gunakan middleware.ts). Proksi ini berfungsi seperti penulisan ulang URL, yang mengarahkan endpoint /admin, /api, dan /auth di situs web Anda ke CMS.

• Untuk localhost: Anda harus menggunakan tunnel (karena CMS tidak dapat mengakses localhost secara langsung)
• Berfungsi dengan lancar pada situs web yang telah di-deploy

Penyiapan Proksi

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

const cmsProxy = createCmsProxy({
  // Origin admin CMS yang akan dijadikan tujuan proksi.
  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 mengembalikan handler yang Anda panggil dengan request masuk. cmsProxyMatcher adalah matcher siap pakai yang mencakup /admin, /api, /auth, serta request /_next dan aset statis yang berasal dari admin — sehingga Anda tidak perlu menulis array matcher secara manual.

Pada versi Next.js yang lebih lama, beri nama file tersebut middleware.ts dan ekspor handler sebagai middleware, bukan sebagai ekspor default:

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

Perlu memproksikan path tambahan? Teruskan additionalPaths: ['/my-path'] ke createCmsProxy.

Sekarang Anda dapat membuka /admin di situs untuk mengakses panel admin. Ini mengaktifkan pratinjau langsung.

Pengeditan Overlay & Rute Pratinjau

Overlay dan mode pengeditan dirender oleh rute pratinjau Anda, bukan rute produksi statis. Admin memuat situs Anda dalam mode pengeditan (?edit_mode=true), dan request tersebut dilayani oleh ParametricRoutePreviewPage pada rute force-dynamic, yang meneruskan searchParams untuk Anda:

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

// Rendering dinamis — memungkinkan penggunaan searchParams untuk 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}
    />
  );
}

Anda tidak perlu menghubungkan overlay secara manual — cukup teruskan searchParams ke renderer pratinjau. Rute produksi Anda (`app/[...slug]/page.tsx`) tetap statis dengan ParametricRoutePage dan tidak memerlukan searchParams\. Lihat Menyiapkan Proyek CMS Hybrid untuk penyiapan lengkap dua rute.

Cara Memverifikasi

1. Buka /admin di situs web Anda
2. Anda akan diminta untuk login dan panel admin CMS akan langsung terbuka
3. Buka situs Anda dari admin dan pastikan overlay/pratinjau langsung berfungsi secara otomatis

Overlay dan pratinjau langsung seharusnya berfungsi secara otomatis.

Langkah Berikutnya

Siapkan rute produksi + pratinjau lengkap di Menyiapkan Proyek CMS Hybrid.