پیش‌نمایش محتوای پیش‌نویس در Next.js – فعال‌سازی Draft Mode و اتصال امن به CMS

مقدمه

Draft Mode در Next.js به شما اجازه می‌دهد محتوای پیش‌نویس را از CMS بدون build مجدد سایت مشاهده کنید. این قابلیت برای صفحاتی که به‌صورت استاتیک در زمان build تولید می‌شوند بسیار مفید است.

مرحله ۱: ایجاد Route Handler

در مسیر app/api/draft/route.ts یک Route Handler بسازید:

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('Draft mode is enabled')
}

با فراخوانی این مسیر، کوکی __prerender_bypass تنظیم می‌شود و صفحات استاتیک به‌صورت پویا رندر می‌شوند.

مرحله ۲: اتصال امن از CMS

برای اتصال امن CMS به Draft Mode:

1. یک توکن مخفی تولید کنید
2. در CMS آدرس پیش‌نمایش را تنظیم کنید:

https://your-site.com/api/draft?secret=YOUR_TOKEN&slug=/posts/one

در Route Handler، توکن و slug را اعتبارسنجی کنید و سپس به مسیر مربوطه ریدایرکت شوید:

import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const secret = searchParams.get('secret')
  const slug = searchParams.get('slug')

  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
    return new Response('Invalid token', { status: 401 })
  }

  const post = await getPostBySlug(slug)
  if (!post) {
    return new Response('Invalid slug', { status: 401 })
  }

  const draft = await draftMode()
  draft.enable()

  redirect(post.slug)
}

مرحله ۳: نمایش محتوای پیش‌نویس

در صفحهٔ مربوطه، بررسی کنید که آیا Draft Mode فعال است یا خیر:

import { draftMode } from 'next/headers'

async function getData() {
  const { isEnabled } = await draftMode()

  const url = isEnabled
    ? 'https://draft.example.com'
    : 'https://production.example.com'

  const res = await fetch(url)
  return res.json()
}

export default async function Page() {
  const { title, desc } = await getData()

  return (
    <main>
      <h1>{title}</h1>
      <p>{desc}</p>
    </main>
  )
}

اگر کوکی فعال باشد، داده‌ها به‌صورت پویا دریافت می‌شوند و محتوای پیش‌نویس نمایش داده می‌شود.

جمع‌بندی

با استفاده از Draft Mode در Next.js می‌توانید محتوای پیش‌نویس را از CMS مشاهده کنید بدون اینکه نیاز به build مجدد داشته باشید. این روش با اعتبارسنجی توکن و slug، و ریدایرکت امن به مسیر موردنظر، تجربهٔ پیش‌نمایش حرفه‌ای و امنی را فراهم می‌کند.