حالت پیش‌نویس یا Draft Mode در Next.js یکی از ویژگی‌های مهم و جذاب این چارچوب فریم‌ورک محبوب است که به توسعه‌دهندگان اجازه می‌دهد تا محتوای سایت را بدون انتشارات مستقیم ببینند و بررسی کنند. به زبان ساده، این قابلیت مانند داشتن یک نسخه دستکاری نشده از برنامه است که می‌توان آن را بررسی و بهبود بخشید بدون اینکه کاربران نهایی تغییراتی را که هنوز آماده انتشار نیستند مشاهده کنند.
برای فعال‌سازی حالت پیش‌نویس، باید از فانکشن draftMode استفاده کنید که در نسخه‌های جدید Next.js به api-reference آدرس بار اضافه شده است. این حالت خصوصاً زمانی مفید است که شما با apiهای سمت سرور کار می‌کنید و می‌خواهید محتوای داده شده را در مرورگر بدون ذخیره مستقیم در تاریخچه مرورگر ببینید.
فعال‌سازی حالت پیش‌نویس کمک می‌کند تا توسعه‌دهنده بتواند محتوای سایت را در حالت پیش‌نمایش بررسی کند و تغییرات لازم را قبل از انتشار نهایی اعمال نماید. این قابلیت به کاهش خطاها و بهبود تجربه کاربری نهایی بسیار کمک کننده است، چرا که توسعه‌دهنده می‌تواند مطمئن شود که تغییرات آن‌ها به طور صحیح اعمال می‌شود و هیچ گونه مشکلی در فرآیند انتشار نهایی وجود ندارد.
در اینجا نگاهی به چگونگی استفاده از حالت پیش‌نویس در Next.js می‌اندازیم و قدم به قدم نحوه پیاده‌سازی آن را بررسی می‌کنیم. باید به این نکته توجه کنید که برای استفاده از این ویژگی باید از نسخه‌های جدید این چارچوب استفاده کرده و با مستندات ارائه شده پیش بروید.
// Import the required function
import { draftMode } from 'next/headers';
// Function to enable draft mode
export async function GET(request) {
draftMode().enable();
return new Response('Draft mode enabled');
}
توضیح خط به خط کد
// Import the required function
در این قسمت از کد، فانکشن draftMode از کتابخانه next/headers وارد شده است تا بتوانیم از آن برای مدیریت حالت پیش‌نویس استفاده کنیم.
import { draftMode } from 'next/headers';
توسط این دستور فانکشن draftMode به طور خاص از کتابخانه مورد نیاز وارد می‌شود تا از آن در کد استفاده کنیم.
// Function to enable draft mode
این خط به تعریف فانکشنی می‌پردازد که حالت پیش‌نویس را فعال می‌کند.
export async function GET(request) {
این بخش، فانکشن سمت سرور را تعریف می‌کند تا به درخواست‌های GET پاسخ دهد.
draftMode().enable();
با این دستور، حالت پیش‌نویس فعال می‌شود تا شما بتوانید تغییرات را به صورت پیش‌نمایش مشاهده کنید.
return new Response('Draft mode enabled');
این خط پاسخی را بازمی‌گرداند که نشان می‌دهد حالت پیش‌نویس فعال شده است.