draftMode، fetch و forbidden در Next.js — مدیریت حالت پیش‌نویس، کش داده‌ها و کنترل دسترسی

تابع draftMode در Next.js امکان فعال‌سازی یا غیرفعال‌سازی حالت پیش‌نویس را فراهم می‌کند و می‌توان بررسی کرد که آیا این حالت فعال است یا نه. API fetch در Next.js با تنظیمات cache، revalidate و tags برای کنترل دقیق کش داده‌ها گسترش یافته است. همچنین تابع forbidden برای نمایش خطای 403 در صورت عدم مجوز دسترسی استفاده می‌شود. این مقاله نحوه استفاده از هر سه قابلیت را با مثال‌های کاربردی توضیح می‌دهد.

revalidateforbiddendraftMode

~2 min read · Updated Oct 31, 2025

۱. draftMode چیست؟


draftMode() تابعی async در Next.js است که امکان فعال‌سازی، غیرفعال‌سازی و بررسی وضعیت حالت پیش‌نویس را فراهم می‌کند. این حالت برای نمایش محتوای داینامیک در زمان توسعه یا پیش‌نمایش مفید است.


فعال‌سازی:

// app/draft/route.ts
import { draftMode } from 'next/headers'

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

غیرفعال‌سازی:

// app/draft/route.ts
import { draftMode } from 'next/headers'

export async function GET() {
  const draft = await draftMode()
  draft.disable()
  return new Response('Draft mode is disabled')
}

بررسی وضعیت:

// app/page.ts
const { isEnabled } = await draftMode()
return <p>Draft Mode is {isEnabled ? 'Enabled' : 'Disabled'}</p>

۲. fetch با تنظیمات کش


تابع fetch() در Next.js گسترش یافته تا بتوانید کش داده‌ها را با گزینه‌های زیر کنترل کنید:


گزینه cache:

  • 'auto': رفتار پیش‌فرض
  • 'no-store': بدون کش
  • 'force-cache': استفاده از کش در صورت موجود بودن

گزینه revalidate:

  • false: کش دائمی
  • 0: بدون کش
  • عدد: مدت اعتبار کش بر حسب ثانیه

گزینه tags:

برای تعیین تگ‌های کش و استفاده از revalidateTag در آینده:

fetch('https://...', {
  next: { tags: ['collection'] }
})

۳. تابع forbidden برای کنترل دسترسی


forbidden() تابعی است که خطای 403 را در صورت عدم مجوز دسترسی نمایش می‌دهد. این تابع در Server Components، Server Actions و Route Handlers قابل استفاده است.


مثال در صفحه مدیریت:

// app/admin/page.tsx
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'

export default async function AdminPage() {
  const session = await verifySession()
  if (session.role !== 'admin') {
    forbidden()
  }
  return <main>Welcome, {session.user.name}!</main>
}

مثال در Server Action:

// app/actions/update-role.ts
'use server'
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'

export async function updateRole(formData) {
  const session = await verifySession()
  if (session.role !== 'admin') {
    forbidden()
  }
  // ادامه عملیات...
}

جمع‌بندی


با استفاده از draftMode می‌توانید حالت پیش‌نویس را مدیریت کنید، با fetch کش داده‌ها را کنترل کنید، و با forbidden دسترسی کاربران را محدود نمایید. این قابلیت‌ها به شما امکان می‌دهند تجربه‌ای امن، سریع و قابل شخصی‌سازی در Next.js بسازید.


Written & researched by Dr. Shahin Siami

Related Articles

مسیریابی پیشرفته و هوک‌های عملکرد در Next.js — راهنمای توسعه‌دهنده برای App Router

Next.js مجموعه‌ای غنی از هوک‌های کلاینت و ابزارهای کش و ناوبری را در اختیار توسعه‌دهندگان قرار می‌دهد. از خواندن پارامترهای مسیر تا گزارش Web Vitals و مدیریت کش، این مقاله مهم‌ترین ابزارهای App Router را با مثال‌های کاربردی معرفی می‌کند.

Continue

مدیریت احراز هویت و کش در Next.js — راهنمای توسعه‌دهنده برای امنیت و عملکرد پویا

Next.js با معرفی قابلیت‌های آزمایشی جدید، امکان کنترل دقیق‌تر دسترسی و کش داده‌ها را فراهم کرده است. تابع unauthorized برای مدیریت خطای 401 و هدایت کاربران به صفحه ورود، unstable_cache برای کش هوشمند عملیات سنگین، updateTag برای بازسازی آنی داده‌ها، و useLinkStatus برای نمایش وضعیت ناوبری استفاده می‌شوند. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات مهم بررسی می‌کند.

Continue

redirect و refresh در Next.js — ریدایرکت‌های هوشمند و تازه‌سازی مسیر در Server Actions

تابع redirect در Next.js برای هدایت کاربر به مسیر جدید استفاده می‌شود و بسته به نوع استفاده، پاسخ HTTP با وضعیت 307 یا 303 ارسال می‌کند. این تابع در Server Components، Client Components، Route Handlers و Server Actions قابل استفاده است. تابع refresh نیز برای تازه‌سازی مسیر کلاینت از درون Server Action استفاده می‌شود. این مقاله نحوه استفاده از هر دو تابع را با مثال‌های کاربردی و نکات مهم توضیح می‌دهد.

Continue

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

Continue

headers، ImageResponse، notFound و permanentRedirect در Next.js — مدیریت درخواست‌ها، تولید تصویر، خطا و ریدایرکت

Next.js ابزارهای قدرتمندی برای مدیریت درخواست‌ها و پاسخ‌ها در کامپوننت‌های سروری فراهم کرده است. تابع headers برای خواندن هدرهای HTTP ورودی، ImageResponse برای تولید تصاویر داینامیک، notFound برای نمایش صفحه خطای 404، و permanentRedirect برای ریدایرکت دائمی کاربران استفاده می‌شوند. این مقاله نحوه استفاده از هر یک را با مثال‌های کاربردی توضیح می‌دهد.

Continue

راهنمای کامل استفاده از metadata و generateMetadata در Next.js

در نسخه‌های مدرن Next.js، مدیریت metadata صفحات بسیار قدرتمندتر و ساده‌تر شده است. metadata به‌صورت خودکار در تگ <head> صفحات تزریق می‌شود و نقش مهمی در SEO، اشتراک‌گذاری اجتماعی و تجربه کاربری دارد. این مقاله دو روش اصلی تعریف metadata را بررسی می‌کند: استفاده از آبجکت ثابت metadata و تابع داینامیک generateMetadata.

Continue