अपनी वेबसाइट पर एडमिन पैनल जोड़ना एक आसान चरण है

इसकी आवश्यकता क्यों है

यह सुनिश्चित करता है कि आपका संपादन अनुभव सहज हो। प्रॉक्सी के माध्यम से एडमिन पैनल को अपनी वेबसाइट से जोड़ने पर, आप उसी URL पर अपनी वेबसाइट संपादित कर सकते हैं और बदलावों का रियल-टाइम में दृश्य पूर्वावलोकन देख सकते हैं। यह ओवरले संपादन को भी सक्षम बनाता है, जो वेबपेज संपादित करने के लिए बेहतर उपयोगकर्ता अनुभव प्रदान करता है।

आवश्यक चरण

प्रॉक्सी सेटअप (कुछ सावधानियाँ हैं)

प्रॉक्सी आपके प्रोजेक्ट में मौजूद proxy.ts फ़ाइल है (Next.js 16 में; पुराने Next.js में यह middleware.ts होती है)। यह URL rewrite की तरह काम करती है और आपकी वेबसाइट के /admin, /api, और /auth एंडपॉइंट को CMS पर रीडायरेक्ट करती है।

• localhost के लिए: आपको टनल का उपयोग करना होगा (क्योंकि CMS सीधे localhost तक पहुँच नहीं सकता)
• डिप्लॉय की गई वेबसाइटों पर सहज रूप से काम करता है

प्रॉक्सी सेटअप

// proxy.ts  (Next.js 16 — पुराने Next.js पर middleware.ts का उपयोग करें)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // वह CMS एडमिन origin जिस पर प्रॉक्सी करना है।
  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 पहले से तैयार matcher है, जो /admin, /api, /auth, तथा एडमिन से शुरू होने वाले /_next और स्थिर एसेट अनुरोधों को कवर करता है — इसलिए आपको matcher array स्वयं लिखने की आवश्यकता नहीं होती।

पुराने Next.js संस्करणों में फ़ाइल का नाम middleware.ts रखें और default export के बजाय हैंडलर को middleware के रूप में export करें:

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

अतिरिक्त पाथ को प्रॉक्सी करने की आवश्यकता है? createCmsProxy में additionalPaths: ['/my-path'] पास करें।

अब आप एडमिन पैनल तक पहुँचने के लिए अपनी साइट पर /admin पर जा सकते हैं। इससे लाइव पूर्वावलोकन सक्षम हो जाता है।

ओवरले संपादन और पूर्वावलोकन रूट

ओवरले और edit-mode आपके स्थिर प्रोडक्शन रूट पर नहीं, बल्कि आपके पूर्वावलोकन रूट द्वारा रेंडर किए जाते हैं। एडमिन आपकी साइट को edit mode (?edit_mode=true) में लोड करता है और यह अनुरोध force-dynamic रूट पर ParametricRoutePreviewPage द्वारा सर्व किया जाता है, जो आपके लिए 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';

// डायनेमिक रेंडरिंग — edit_mode के लिए searchParams की अनुमति देता है
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\ की आवश्यकता नहीं होती। पूर्ण दो-रूट सेटअप के लिए हाइब्रिड CMS प्रोजेक्ट सेटअप करें देखें।

सत्यापन कैसे करें

1. अपनी वेबसाइट पर /admin पर जाएँ
2. आपसे लॉगिन करने के लिए पूछा जाना चाहिए और CMS एडमिन पैनल तुरंत खुल जाना चाहिए
3. एडमिन से अपनी साइट खोलें और पुष्टि करें कि ओवरले/लाइव पूर्वावलोकन अपने-आप काम कर रहे हैं

ओवरले और लाइव पूर्वावलोकन अपने-आप काम करने चाहिए।

अगले चरण

हाइब्रिड CMS प्रोजेक्ट सेटअप करें में पूरा प्रोडक्शन + पूर्वावलोकन रूट सेट अप करें।