draftMode

draftMode هي وظيفة غير متزامنة تتيح لك تمكين وتعطيل وضع المسودة (Draft Mode)، بالإضافة إلى التحقق مما إذا كان وضع المسودة مفعلاً في مكون الخادم (Server Component).

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
}

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
}

المرجع

الطرق والخصائص التالية متاحة:

الطريقة	الوصف
`isEnabled`	قيمة منطقية تشير إلى ما إذا كان وضع المسودة مفعلاً.
`enable()`	يُفعّل وضع المسودة في معالج المسار (Route Handler) عن طريق تعيين ملف تعريف الارتباط (`__prerender_bypass`).
`disable()`	يُعطّل وضع المسودة في معالج المسار عن طريق حذف ملف تعريف الارتباط.

معلومات مفيدة

draftMode هي وظيفة غير متزامنة تُرجع وعداً (promise). يجب عليك استخدام async/await أو وظيفة use في React.
- في الإصدار 14 وما قبله، كانت draftMode وظيفة متزامنة. لضمان التوافق مع الإصدارات السابقة، لا يزال بإمكانك الوصول إليها بشكل متزامن في Next.js 15، ولكن هذا السلوك سيتم إهماله في المستقبل.
سيتم إنشاء قيمة جديدة لملف تعريف الارتباط الالتفافي (bypass cookie) في كل مرة تقوم فيها بتشغيل next build. وهذا يضمن عدم إمكانية تخمين ملف تعريف الارتباط الالتفافي.
لاختبار وضع المسودة محلياً عبر HTTP، يجب أن يسمح متصفحك بملفات تعريف الارتباط من طرف ثالث والوصول إلى التخزين المحلي.

أمثلة

تفعيل وضع المسودة

لتفعيل وضع المسودة، أنشئ معالج مسار (Route Handler) جديد واستدعِ طريقة enable():

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('تم تفعيل وضع المسودة')
}

import { draftMode } from 'next/headers'

export async function GET(request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('تم تفعيل وضع المسودة')
}

تعطيل وضع المسودة

افتراضياً، تنتهي جلسة وضع المسودة عند إغلاق المتصفح.

لتعطيل وضع المسودة يدوياً، استدعِ طريقة disable() في معالج المسار:

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.disable()
  return new Response('تم تعطيل وضع المسودة')
}

import { draftMode } from 'next/headers'

export async function GET(request) {
  const draft = await draftMode()
  draft.disable()
  return new Response('تم تعطيل وضع المسودة')
}

ثم أرسل طلباً لاستدعاء معالج المسار. إذا كنت تستدعي المسار باستخدام مكون <Link>، يجب عليك تمرير prefetch={false} لمنع حذف ملف تعريف الارتباط عن طريق الخطأ أثناء الجلب المسبق (prefetch).

التحقق من تفعيل وضع المسودة

يمكنك التحقق مما إذا كان وضع المسودة مفعلاً في مكون الخادم باستخدام الخاصية isEnabled:

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  return (
    <main>
      <h1>مقالة المدونة الخاصة بي</h1>
      <p>وضع المسودة حالياً {isEnabled ? 'مفعّل' : 'معطّل'}</p>
    </main>
  )
}

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  return (
    <main>
      <h1>مقالة المدونة الخاصة بي</h1>
      <p>وضع المسودة حالياً {isEnabled ? 'مفعّل' : 'معطّل'}</p>
    </main>
  )
}

سجل الإصدارات

الإصدار	التغييرات
`v15.0.0-RC`	أصبحت `draftMode` وظيفة غير متزامنة. يتوفر أداة تحويل الشيفرة (codemod).
`v13.4.0`	تم تقديم `draftMode`.

وضع المسودة

يوفر Next.js وضع المسودة للتبديل بين الصفحات الثابتة والديناميكية. يمكنك هنا تعلم كيفية عمله مع App Router.