การเชื่อมต่อแผงผู้ดูแลระบบเข้ากับเว็บไซต์ของคุณเป็นขั้นตอนที่ทำได้ง่าย

เหตุใดจึงจำเป็น

การดำเนินการนี้ช่วยให้ประสบการณ์การแก้ไขของคุณเป็นไปอย่างราบรื่น เมื่อเชื่อมต่อแผงผู้ดูแลระบบเข้ากับเว็บไซต์ของคุณผ่านพร็อกซีแล้ว คุณจะสามารถแก้ไขเว็บไซต์ได้บน URL เดิม และดูตัวอย่างการเปลี่ยนแปลงแบบภาพได้แบบเรียลไทม์ นอกจากนี้ยังเปิดใช้การแก้ไขแบบโอเวอร์เลย์ ซึ่งมอบประสบการณ์การแก้ไขหน้าเว็บที่ดียิ่งขึ้น

ขั้นตอนที่จำเป็น

การตั้งค่าพร็อกซี (มีข้อควรระวังบางประการ)

พร็อกซีคือไฟล์ proxy.ts ในโปรเจกต์ของคุณ (ใน Next.js 16; สำหรับ Next.js รุ่นเก่าจะใช้ middleware.ts) โดยทำงานคล้ายกับการเขียน URL ใหม่ และเปลี่ยนเส้นทาง endpoint /admin, /api และ /auth ของเว็บไซต์คุณไปยัง CMS

• สำหรับ localhost: คุณต้องใช้อุโมงค์ (เนื่องจาก CMS ไม่สามารถเข้าถึง localhost ได้โดยตรง)
• ทำงานได้อย่างราบรื่นบนเว็บไซต์ที่นำไปใช้งานจริง

การตั้งค่าพร็อกซี

// proxy.ts  (Next.js 16 — ใช้ middleware.ts สำหรับ Next.js รุ่นเก่า)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // ต้นทางของผู้ดูแลระบบ CMS ที่จะทำพร็อกซีไปยัง
  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 จะส่งคืนตัวจัดการที่คุณเรียกใช้พร้อมกับคำขอขาเข้า cmsProxyMatcher คือตัวจับคู่ที่พร้อมใช้งาน ซึ่งครอบคลุม /admin, /api, /auth รวมถึงคำขอ /_next และคำขอแอสเซ็ตแบบคงที่ที่มาจากต้นทางผู้ดูแลระบบ ดังนั้นคุณจึงไม่ต้องเขียนอาร์เรย์ตัวจับคู่เอง

ใน Next.js รุ่นเก่า ให้ตั้งชื่อไฟล์เป็น middleware.ts และส่งออกตัวจัดการเป็น middleware แทนการส่งออกแบบค่าเริ่มต้น:

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

ต้องการทำพร็อกซีให้กับพาธเพิ่มเติมหรือไม่ ให้ส่ง additionalPaths: ['/my-path'] ไปยัง createCmsProxy

ตอนนี้คุณสามารถไปที่ /admin บนเว็บไซต์ของคุณเพื่อเข้าถึงแผงผู้ดูแลระบบได้ ซึ่งจะเปิดใช้การดูตัวอย่างแบบสด

การแก้ไขแบบโอเวอร์เลย์และเส้นทางดูตัวอย่าง

โอเวอร์เลย์และโหมดแก้ไขจะถูกเรนเดอร์โดยเส้นทางดูตัวอย่างของคุณ ไม่ใช่เส้นทางการผลิตแบบคงที่ แผงผู้ดูแลระบบจะโหลดเว็บไซต์ของคุณในโหมดแก้ไข (?edit_mode=true) และคำขอดังกล่าวจะถูกให้บริการโดย ParametricRoutePreviewPage บนเส้นทาง force-dynamic ซึ่งจะส่งต่อ searchParams ให้คุณโดยอัตโนมัติ:

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

// การเรนเดอร์แบบไดนามิก — อนุญาตให้ใช้ searchParams สำหรับ 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}
    />
  );
}

คุณไม่จำเป็นต้องเชื่อมต่อโอเวอร์เลย์ด้วยตนเอง — เพียงส่ง searchParams ไปยังตัวเรนเดอร์ตัวอย่างก็เพียงพอแล้ว เส้นทางการผลิตของคุณ (`app/[...slug]/page.tsx) ยังคงเป็นแบบคงที่ด้วย ParametricRoutePage และไม่จำเป็นต้องใช้ searchParams` ดู ตั้งค่าโปรเจกต์ Hybrid CMS สำหรับการตั้งค่าเส้นทางทั้งสองแบบอย่างครบถ้วน

วิธีตรวจสอบ

1. ไปที่ /admin บนเว็บไซต์ของคุณ
2. ระบบควรขอให้คุณเข้าสู่ระบบและเปิดแผงผู้ดูแลระบบ CMS ทันที
3. เปิดเว็บไซต์ของคุณจากแผงผู้ดูแลระบบ และยืนยันว่าโอเวอร์เลย์/การดูตัวอย่างแบบสดทำงานโดยอัตโนมัติ

โอเวอร์เลย์และการดูตัวอย่างแบบสดควรทำงานโดยอัตโนมัติ

ขั้นตอนถัดไป

ตั้งค่าเส้นทางการผลิต + เส้นทางดูตัวอย่างให้ครบถ้วนใน ตั้งค่าโปรเจกต์ Hybrid CMS