Next.js که یک فریم‌ورک متن باز برای توسعه نرم‌افزارهای تحت وب است به تازگی نسخه جدید خود را معرفی کرده است. در این مقاله قصد داریم تا به‌روزرسانی‌های این نسخه یعنی ۱۴٫۱ Next.js را با هم بررسی کنیم.

این نسخه شامل بهبودهایی در تجربه توسعه‌دهنده از جمله موارد زیر است:

• بهبودهای Self-Hosting
• بهبودهای Turbopack
• بهبودهای DX
• Routeهای Parallel و Intercept
• توسعه next/image

برای به‌روزرسانی Next.js به نسخه ۱۴٫۱ از دستور زیر استفاده می‌کنیم:

npx create-next-app@latest

توسعه Self-Hosting

تیم توسعه next.js براساس بازخوردهایی که برای شفافیت بیشتر درمورد self-host مربوط به Next.js با سرور Node.js، همینطور Docker container یا export استاتیک از کاربران دریافت نموده‌اند، مستندات مربوط به self-hosting را بازنگری کرده‌اند که عبارتند از:

• متغیرهای محیط زمان اجرا
• پیکربندی cache سفارشی برای ISR
• بهینه‌سازی تصویر سفارشی
• Middleware

همچنین cache handlerهای سفارشی برای Incremental Static Regeneration (ISR) و ذخیره داده‌های granular برای App Router در نسخه Next.js 14.1 تثبیت شده است:

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // disable default in-memory caching
};

استفاده از این پیکربندی در هنگام self-host هنگام استفاده از پلتفرم‌های container orchestration مانند Kubernetes، جایی که هر pod یک کپی از cache دارد مهم است. استفاده از یک cache handler سفارشی به ما این امکان را می‌دهد که از سازگاری در همه podهای hosting برنامه Next.js خود اطمینان حاصل کنیم.

به عنوان مثال، می‌توانیم مقادیری که cache شده‌اند را در هر جایی مانند Redis یا Memcached ذخیره کنیم.

بهبودهای Turbopack

تیم توسعه همچنان بر روی قابلیت اطمینان و عملکرد توسعه لوکال Next.js تمرکز دارد:

• قابلیت اطمینان: Turbopack کل مجموعه تست توسعه Next.js را پشت سر گذاشته و اپلیکیشن‌های Vercel را آزمایش می‌کند.
• عملکرد: زمان‌های کامپایل اولیه Turbopack و زمان‌های Fast Refresh بهبود پیدا کرده و سریع‌تر شده است.
• مصرف حافظه: میزان مصرف حافظه در Turbopack کاهش یافته است.

تیم توسعه قصد دارد تا next dev --turboرا در نسخه‌های آتی تثبیت نماید.

قابلیت اطمینان

Next.js اکنون با Turbopack تعداد ۵۶۰۰ تست توسعه (۹۴ درصد) را پشت سر گذاشته است، که ۶۰۰ مورد آن، از آخرین به‌روزرسانی تا به اکنون می‌باشد. می‌توانیم این پیشرفت را در areweturboyet.com دنبال کنیم.

تیم توسعه، استفاده از next dev --turbo را در همه برنامه‌های Vercel Next.js از جمله vercel.com و v0.dev ادامه داده است. همه مهندس‌هایی که روی این برنامه‌ها کار می‌کنند روزانه از Turbopack استفاده می‌نمایند.

در نتیجه این کار، تیم توسعه تعدادی از مشکلاتی که برای برنامه‌های بسیار بزرگ Next.js با استفاده از Turbopack وجود داشت را پیدا کرده و برطرف نموده است. آن‌ها برای انجام این اصلاحات، آزمایش‌های جدیدی را به مجموعه‌های تست توسعه موجود در Next.js اضافه کرده‌اند.

عملکرد

با توجه به تغییرات نسخه جدید، بهبودهایی که برای vercel.comکه یک برنامه بزرگ Next.js است اتفاق افتاده است عبارتند از:

• راه‌اندازی سریع‌تر سرور لوکال تا ۷۶٫۷ درصد
• به‌روزرسانی سریع‌تر کد با Fast Refresh تا ۹۶٫۳ درصد
• کامپایل سریع‌تر مسیر اولیه بدون caching تا ۴۵٫۸ درصد (Turbopack هنوز disk caching ندارد)

توسعه‌دهندگان در v0.dev، فرصتی را برای بهینه‌سازی روشی که React Client Components در Turbopack کشف و بسته‌بندی می‌شوند شناسایی کرده‌اند که منجر به سریع‌تر شدن زمان کامپایل اولیه به اندازه ۶۱٫۵ درصد می‌شود. این بهبود عملکرد در vercel.com نیز مشاهده شد.

برنامه آینده برای توسعه‌ و بهبود بیشتر

Turbopack در حال حاضر دارای حافظه caching داخلی است که زمان‌های incremental compilation را برای Fast Refresh بهبود می‌بخشد.

با این حال، در حال حاضر cache هنگام راه‌اندازی مجدد سرور توسعه Next.js حفظ نمی‌شود. قدم بزرگ بعدی برای بهبود عملکرد Turbopack بحث disk caching است، که اجازه می‌دهد حافظه cache هنگام راه‌اندازی مجدد سرور توسعه حفظ گردد.

بهبود تجربه توسعه‌دهندگان

بهبود پیام‌های خطا و Fast Refresh

همه ما می‌دانیم که پیام‌های خطای واضح چقدر برای تجربه توسعه لوکال مهم هستند. تیم توسعه Next.js برای بهبود کیفیت stack trace و پیام‌های خطایی که هنگام اجرای next devمشاهده می‌کنیم، راه‌حل‌هایی را ارائه کرده است.

• خطاهایی که قبلاً خطاهای باندلر مانند webpack-internalرا نشان می‌دادند، اکنون سورس کد خطا و فایلی که خطا در آن رخ داده است را به درستی نشان می‌دهند.
• پس از مشاهده خطا در یک کلاینت کامپوننت و رفع آن خطا در ادیتور خود، Fast Refresh صفحه خطا را پاک نمی‌کند. این کار قبلا نیاز به hard reload داشت. توسعه‌دهندگان در نسخه جدید تعدادی از این موارد را برطرف کرده‌اند. به عنوان مثال، تلاش برای export کردن metadata از یک کلاینت کامپوننت.

window.history.pushState و window.history.replaceState

App Router اکنون به استفاده از متدهای pushStateو replaceStatenative اجازه می‌دهد تا history stack مرورگر را بدون لود مجدد صفحه به‌روزرسانی کند.

فراخوانی‌های pushStateو placeStateدر App Router ادغام می‌شوند و به ما این امکان را می‌دهند که با usePathnameو useSearchParamsهمگام‌سازی کنیم.

این موضوع زمانی که نیاز به به‌روزرسانی فوری URL هنگام ذخیره state مانند فیلترها، ترتیب مرتب‌سازی یا سایر اطلاعاتی که می‌خواهیم در لودهای مجدد وجود داشته باشند، مفید است:

'use client';
 
import { useSearchParams } from 'next/navigation';
 
export default function SortProducts() {
  const searchParams = useSearchParams();
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  );
}

Data Cache Logging

برای مشاهده بهتر داده‌های ذخیره شده در حافظه cache در برنامه Next.js هنگام اجرای next dev، تعدادی بهبود در گزینه پیکربندی loggingانجام گرفته است.

اکنون می‌توانیم نشان دهیم که آیا حافظه پنهان HITیا SKIPوجود دارد و URL کامل درخواست شده است:

GET / 200 in 48ms
 ✓ Compiled /fetch-cache in 117ms
 GET /fetch-cache 200 in 165ms
  │ GET https://api.vercel.app/products/1 200 in 14ms (cache: HIT)
 ✓ Compiled /fetch-no-store in 150ms
 GET /fetch-no-store 200 in 548ms
  │ GET https://api.vercel.app/products/1 200 in 345ms (cache: SKIP)
  │  │  Cache missed reason: (cache: no-store)

این کار را می‌توانیم از طریق next.config.jsفعال کنیم:

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

پشتیبانی next/image برای <picture> و Art Direction

کامپوننت Image درNext.js  اکنون از موارد استفاده پیشرفته‌تر از طریق getImageProps()(پایدار) پشتیبانی می‌کند که نیازی به استفاده مستقیم از<Image>ندارد. شامل:

• کار با background-imageیا image-set
• کار با canvas context.drawImage()یا new Image()
• کار با درخواست‌های مدیا <picture>برای پیاده‌سازی تصاویر Art Direction یا Light/Dark Mode

import { getImageProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

Routeهای Parallel و Intercept

در نسخه Next.js 14.1، توسعه‌دهندگان ۲۰ پیشرفت در routeهای Parallel و Intercept کسب کرده‌اند.

در دو نسخه گذشته، تمرکز تیم توسعه بر روی بهبود عملکرد و قابلیت اطمینان بود. اکنون بر اساس بازخوردهایی که از کاربران دریافت کرده‌اند، پیشرفت‌های زیادی را درمورد routeهای Parallel و Intercept ایجاد کرده‌اند. باید به این نکته اشاره کنیم که تیم توسعه در این به‌روزرسانی، پشتیبانی از routeهای catch-all و Server Actions را هم اضافه کرده‌اند.

• routeهای Parallel به ما این امکان را می‌دهند که به طور همزمان یا شرطی یک یا چند صفحه را در یک layout رندر کنیم. به این ترتیب، می‌توانیم برای بخش‌های داینامیک برنامه، مانند داشبورد و feed در سایت‌های اجتماعی، از routeهای Parallel برای پیاده‌سازی الگوهای مسیریابی پیچیده استفاده کنیم.
• routeهای Intercept به ما این امکان را می‌دهند که مسیری را از یک قسمت دیگر از برنامه خود در layout فعلی لود کنید. به عنوان مثال، هنگام کلیک کردن بر روی یک عکس در feed، می‌توانیم عکس را به صورت modal نمایش دهیم و feed را روی آن به نمایش بگذاریم. در این حالت، Next.js مسیر /photo/123را قطع می‌کند، URL را ماسک کرده و آن را روی /feedقرار می‌دهد.