جدیدترین ویژگی های Next.js 14

Next.js، چارچوب محبوب React برای ساخت برنامه‌های وب سریع و مقیاس‌پذیر، به تازگی نسخه 14 را منتشر کرده است. این نسخه جدید شامل تعدادی ویژگی‌ها و بهبودهای جدید برای توسعه‌دهندگان است که استفاده از آن را حتی راحت‌تر و قدرتمندتر می‌کند.

• Turbopack: 5000 تست گذراندن برای App & Pages Router
• راه اندازی سرور محلی 53٪ سریعتر
• 94٪ سریعتر کد به روز رسانی با Fast Refresh
• اقدامات سرور (پایدار): جهش های به تدریج افزایش یافته است
• یکپارچه با ذخیره و اعتبار سنجی مجدد
• تابع ساده را فراخوانی می کند یا به صورت بومی با فرم ها کار می کند
• پیش اجرا جزئی (پیش نمایش): پاسخ استاتیک اولیه سریع + پخش محتوای پویا
• Next.js Learn (جدید): دوره رایگان آموزش App Router، احراز هویت، پایگاه داده و موارد دیگر

همین امروز ارتقا دهید یا با:

npx create-next-app@latest

ویژگی های کلیدی جدید Next.js 14

در اینجا برخی از ویژگی های کلیدی جدید در Next.js 14 آمده است:

بازسازی استاتیک افزایشی (ISR) برای صفحات پویا: ISR به شما امکان می دهد فایل های HTML ایستا را برای صفحات پویا در زمان ساخت تولید کنید، در حالی که همچنان آنها را با داده های تازه در زمان اجرا به روز نگه می دارید. این امکان دستیابی به مزایای عملکرد تولید سایت ایستا (SSG) برای صفحات پویا را نیز ممکن می سازد.

روتر برنامه جدید: روتر برنامه جدید در Next.js 14 قدرتمندتر و انعطاف پذیرتر است و از ویژگی هایی مانند مسیریابی تودرتو، مسیریابی پویا و مسیریابی با پارامترها پشتیبانی می کند.

تجربه توسعه‌دهنده بهبودیافته: Next.js 14 شامل تعدادی بهبود در تجربه توسعه‌دهنده است، مانند زمان‌های ساخت سریع‌تر، مدیریت بهتر خطاها، و ثبت اطلاعات بیشتر.

ویژگی‌ها و پیشرفت‌های جدید برای توابع بدون سرور Next.js: توابع بدون سرور Next.js راهی عالی برای افزودن قابلیت‌های Backend به برنامه Next.js بدون نیاز به مدیریت سرور جداگانه است. Next.js 14 شامل تعدادی ویژگی و بهبودهای جدید برای توابع بدون سرور است، مانند پشتیبانی از async/wait، مدیریت بهتر خطا و موارد دیگر.

علاوه بر این ویژگی‌های جدید، Next.js 14 شامل تعدادی رفع اشکال و بهبود عملکرد نیز می‌شود.

به طور کلی، Next.js 14 یک نسخه قابل توجه است که شامل تعدادی ویژگی جدید و بهبود برای توسعه دهندگان است. اگر برنامه های تحت وب را با Next.js می سازید، قطعاً باید در اسرع وقت به نسخه 14 ارتقا دهید.

Turbopack: یک موتور جدید برای سرعت

بیایید به موتور جدید نکست برویم.

Next.js 14 Turbopack را معرفی می‌کند، موتوری مبتنی بر Rust که توسعه محلی شما را مانند قبل افزایش می‌دهد.

next dev --turbo

این فقط تبلیغات نیست؛ داده ها آن را ثابت می کند. می‌توانید با Fast Refresh منتظر راه‌اندازی سرور محلی 53 درصد سریع‌تر و به‌روزرسانی کد 94 درصد سریع‌تر باشید.

تصور کنید تمام این مزایای عملکرد را بدون تغییر یک خط کد در پروژه Next.js موجود خود دریافت کنید!

چه چیزی در Turbopack جدید است؟

Turbopack با استفاده از "next dev" 5000 تست ادغام را با موفقیت پشت سر گذاشته است.

راه اندازی سرور محلی تا 53.3٪ سریعتر
با Fast Refresh تا 94.7% سریعتر کد به روز می شود

Vercel مشتاق است که با دستور "next dev — turbo" عملکرد سریع‌تر و مطمئن‌تری را به توسعه دهندگان ارائه دهد. این شرکت یک هدف بلندپروازانه را تعیین کرده است: هنگامی که Turbopack 100٪ از تست ها را پشت سر بگذارد (در حال حاضر 90٪)، به یک نسخه پایدار ارتقا می یابد و تجربه توسعه یکپارچه و قابل اعتماد را برای همه کاربران تضمین می کند.

فرم ها و Mutations

Next.js 9 API Routes را معرفی کرد - راهی برای ساخت سریع نقاط پایانی در کنار کد ظاهری شما.

به عنوان مثال، شما می توانید یک فایل جدید در پوشه /api ایجاد کنید:

import type { NextApiRequest, NextApiResponse } from 'next';
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const data = req.body;
  const id = await createItem(data);
  res.status(200).json({ id });
}

سپس، در سمت کلاینت، می‌توانید از React و مدیریت رویداد مانند onSubmit برای fetch کردن در مسیر API خود استفاده کنید.

import { FormEvent } from 'react';
 
export default function Page() {
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
 
    const formData = new FormData(event.currentTarget);
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    });
 
    // Handle response if necessary
    const data = await response.json();
    // ...
  }
 
  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

اکنون با Next.js 14 ، تجربه توسعه‌دهنده ها در ایجاد Mutations داده‌ها ساده شده است. علاوه بر این، وقتی کاربر اتصال شبکه کندی دارد یا هنگام ارسال فرم از یک دستگاه کم مصرف، تجربه کاربر بهبود یافته است.

اقدامات سرور (پایدار)

اگر نیازی به ایجاد یک مسیر API به صورت دستی نداشته باشید چه؟ در عوض، می‌توانید تابعی را تعریف کنید که به طور ایمن روی سرور اجرا شود و مستقیماً از کامپوننت های React فراخوانی شود.

App Router بر روی کانال React ساخته شده است که برای فریمورک ها برای پذیرش ویژگی های جدید پایدار است. از نسخه 14، Next.js به جدیدترین canary ری اکت، که شامل اکشن های سرور پایدار است، ارتقا یافته است.

مثال قبلی از مسیریاب صفحات را می توان به یک فایل ساده تبدیل کرد:

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Server Actions باید برای توسعه‌دهندگانی که قبلاً از چارچوب‌های سرور محور در گذشته استفاده کرده‌اند، آشنا باشد. این بر اساس اصول وب مانند فرم ها و FormData Web API ساخته شده است.

در حالی که استفاده از Server Actions از طریق یک فرم برای بهبود تدریجی مفید است، اما الزامی نیست. همچنین می توانید آنها را مستقیماً به عنوان تابع و بدون فرم فراخوانی کنید. هنگام استفاده از TypeScript، این به شما ایمنی کامل از نوع سرتاسر بین کلاینت و سرور را می دهد.

تغییر داده‌ها، رندر مجدد صفحه یا تغییر مسیر می‌تواند در یک رفت و برگشت شبکه اتفاق بیفتد و اطمینان حاصل شود که داده‌های صحیح در مشتری نمایش داده می‌شوند، حتی اگر ارائه‌دهنده بالادستی کند باشد. علاوه بر این، می‌توانید اکشن‌های مختلف، از جمله بسیاری از کنش‌های مختلف در یک مسیر را بنویسید و دوباره استفاده کنید.

ذخیره سازی، اعتبارسنجی مجدد، هدایت مجدد و موارد دیگر
Server Actions عمیقاً در کل مدل App Router ادغام شده است. تو می توانی:

اعتبار مجدد داده های کش شده با ()revalidatePath یا ()revalidateTag
تغییر مسیر به مسیرهای مختلف از طریق ()redirect
تنظیم و خواندن کوکی ها از طریق ()cookies
مدیریت به‌روزرسانی‌های خوش‌بینانه رابط کاربری با ()useOptimistic
گرفتن و نمایش خطاها از سرور با ()useFormState
نمایش حالت های بارگذاری روی کلاینت با ()useFormStatus

پیش اجرا جزئی (Preview)

پیش نمایشی از Prerendering جزئی - یک بهینه سازی کامپایلر برای محتوای پویا با یک پاسخ سریع اولیه استاتیک - که در حال کار روی Next.js هست.

پیش‌اجرای جزئی مبتنی بر یک دهه تحقیق و توسعه در رندر سمت سرور (SSR)، تولید سایت استاتیک (SSG) و اعتبار مجدد استاتیک افزایشی (ISR) است.

ما نظرات شما را شنیده ایم. در حال حاضر زمان اجرا، گزینه های پیکربندی و روش های رندر بسیار زیادی وجود دارد که باید در نظر گرفته شود. شما سرعت و قابلیت اطمینان استاتیک را می خواهید، در حالی که از پاسخ های کاملاً پویا و شخصی نیز پشتیبانی می کنید.

داشتن عملکرد عالی در سطح جهانی و شخصی سازی نباید به قیمت پیچیدگی تمام شود.

این با ایجاد یک تجربه توسعه‌دهنده بهتر، ساده‌سازی مدل موجود بدون معرفی APIهای جدید برای یادگیری توسعه‌دهندگان می باشد. در حالی که حافظه پنهان جزئی محتوای سمت سرور وجود داشته است، این رویکردها هنوز باید با تجربه توسعه‌دهنده و اهداف ترکیب‌پذیری مورد نظر تیم نکست مطابقت داشته باشند.

پیش‌اجرای جزئی به هیچ API جدیدی برای یادگیری نیاز ندارد.

ساخته شده بر روی React Suspense

پیش اجرا جزئی با مرزهای تعلیق شما تعریف می شود. در اینجا نحوه عملکرد آن آمده است. صفحه ecommerce زیر را در نظر بگیرید:

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

با فعال کردن پیش‌اجرای جزئی، این صفحه یک پوسته ثابت بر اساس مرزهای </Suspense> شما ایجاد می‌کند. نسخه بازگشتی React Suspense از قبل اجرا شده است.

Suspense fallbacks در پوسته سپس با کامپوننت های پویا جایگزین می‌شوند، مانند خواندن کوکی‌ها برای تعیین سبد خرید، یا نشان دادن یک بنر بر اساس کاربر.

هنگامی که یک درخواست انجام می شود، پوسته HTML ایستا بلافاصله ارائه می شود:

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      <!-- Hole -->
    </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    <!-- Hole -->
  </div>
  <section class="new-products" />
</main>

از آنجایی که </ShoppingCart> از کوکی ها می خواند تا به جلسه کاربر نگاه کند، این کامپوننت سپس به عنوان بخشی از همان درخواست HTTP به عنوان پوسته استاتیک در جریان قرار می گیرد. نیازی به رفت و برگشت شبکه اضافی نیست.

import { cookies } from 'next/headers'
 
export default function ShoppingCart() {
  const cookieStore = cookies()
  const session = cookieStore.get('session')
  return ...
}

برای داشتن پوسته استاتیک دانه ای، ممکن است نیاز به اضافه کردن مرزهای Suspense اضافی داشته باشد. با این حال، اگر امروز از loading.js استفاده می کنید، این یک مرز ضمنی Suspense است، بنابراین برای ایجاد پوسته استاتیک نیازی به تغییر نیست.

به زودی
پیش اجرا جزئی در حال توسعه فعال است. در یک نسخه کوچک آتی به‌روزرسانی‌های بیشتری درباره آن از تیم نکست به اشتراک گداشته خواهد شد.

بهبودهای متا تگ ها

قبل از اینکه محتوای صفحه شما از سرور پخش شود، متادیتا های مهمی در مورد نمای، طرح رنگ و موضوع وجود دارد که باید ابتدا به مرورگر ارسال شود.

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

در Next.js 14، تگ‌های مسدود کننده و غیرمسدود کننده جدا شده اند. تنها زیرمجموعه کوچکی از گزینه‌های متا تگ‌های مسدود شده‌اند، و اطمینان حاصل شد که متا تگ‌های غیرمسدود مانع از ارائه یک صفحه از پیش اجرا شده جزئی به پوسته ثابت نمی‌شوند.

گزینه های متا تگ‌ها زیر اکنون منسوخ شده اند و در نسخه اصلی نکست از متا تگ‌ها حذف خواهند شد:

Viewport: بزرگنمایی اولیه و سایر خصوصیات viewport را تنظیم می کند
colorScheme: حالت های پشتیبانی (روشن/تاریک) را برای دید تنظیم می کند
themeColor: رنگی را که کروم در اطراف Viewport باید با آن نمایش دهد را تعیین می کند

با شروع Next.js 14، گزینه های جدید viewport و GenereViewport برای جایگزینی این گزینه ها وجود دارد. همه گزینه های دیگر متا تگ‌های یکسان باقی می مانند.

شما می توانید از امروز شروع به پذیرش این API های جدید کنید. گزینه های متا تگ‌های موجود به کار خود ادامه خواهند داد.

Next.js Learn

Next.js Learn یک دوره آموزشی پر از محتوای ارزشمند است، از جمله پوشش عمیق روتر برنامه Next.js، ادغام Tailwind CSS، استراتژی‌هایی برای بهینه‌سازی فونت‌ها و تصاویر، راهنمایی برای ایجاد طرح‌بندی و صفحات و بسیاری موارد دیگر.

این دوره با ساخت یک وب سایت آزمایشی کاملاً کاربردی که از آخرین ویژگی ها استفاده می کند آموزش می دهد.

سایر تغییرات

به عنوان یک تغییر اساسی، حداقل نسخه Node.js مورد نیاز برای Next.js اکنون 18.17 است و Next 14 از next/font@ به نفع next/font پشتیبانی نمی کند.

نتیجه

ما در این مقاله با گوشه ای از این آپدیت بزرگ Next.js آشنا شدیم و آن ها را مورد بررسی قرار دادیم، در این آپدیت بزرگ علاوه بر افزایش سرعت که مشکل اکثر توسعه دهندگان نکست بود بهبود یافته است، باگ های زیادی نیز بر طرف شده اند.

شما درباره این آپدیت چه نظری دارید؟