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

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

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

npx create-next-app@latest

توسعه Self-Hosting

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

همچنین 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 تمرکز دارد:

تیم توسعه قصد دارد تا 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 است اتفاق افتاده است عبارتند از:

توسعه‌دهندگان در 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مشاهده می‌کنیم، راه‌حل‌هایی را ارائه کرده است.

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>ندارد. شامل:

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 را هم اضافه کرده‌اند.