LogoENEnglish

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

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

Draft ModePreview contentHeadless CMSNext.js API routes

~3 دقیقه مطالعه • بروزرسانی ۵ آبان ۱۴۰۴

مقدمه


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، و ریدایرکت امن به مسیر موردنظر، تجربهٔ پیش‌نمایش حرفه‌ای و امنی را فراهم می‌کند.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article