Next.js که یک فریمورک متن باز برای توسعه نرمافزارهای تحت وب است به تازگی نسخه جدید خود را معرفی کرده است. در این مقاله قصد داریم تا بهروزرسانیهای این نسخه یعنی ۱۴٫۱ Next.js را با هم بررسی کنیم.
این نسخه شامل بهبودهایی در تجربه توسعهدهنده از جمله موارد زیر است:
next/image
برای بهروزرسانی Next.js به نسخه ۱۴٫۱ از دستور زیر استفاده میکنیم:
npx create-next-app@latest
تیم توسعه 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 ذخیره کنیم.
تیم توسعه همچنان بر روی قابلیت اطمینان و عملکرد توسعه لوکال 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 هنگام راهاندازی مجدد سرور توسعه حفظ گردد.
همه ما میدانیم که پیامهای خطای واضح چقدر برای تجربه توسعه لوکال مهم هستند. تیم توسعه Next.js برای بهبود کیفیت stack trace و پیامهای خطایی که هنگام اجرای next dev
مشاهده میکنیم، راهحلهایی را ارائه کرده است.
webpack-internal
را نشان میدادند، اکنون سورس کد خطا و فایلی که خطا در آن رخ داده است را به درستی نشان میدهند.App Router اکنون به استفاده از متدهای pushState
و replaceState
native اجازه میدهد تا 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> </> ); }
برای مشاهده بهتر دادههای ذخیره شده در حافظه 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, }, }, };
کامپوننت Image درNext.js اکنون از موارد استفاده پیشرفتهتر از طریق getImageProps()
(پایدار) پشتیبانی میکند که نیازی به استفاده مستقیم از<Image>
ندارد. شامل:
background-image
یا image-set
context.drawImage()
یا new Image()
<picture>
برای پیادهسازی تصاویر Art Direction یا Light/Dark Modeimport { 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> ); }
در نسخه Next.js 14.1، توسعهدهندگان ۲۰ پیشرفت در routeهای Parallel و Intercept کسب کردهاند.
در دو نسخه گذشته، تمرکز تیم توسعه بر روی بهبود عملکرد و قابلیت اطمینان بود. اکنون بر اساس بازخوردهایی که از کاربران دریافت کردهاند، پیشرفتهای زیادی را درمورد routeهای Parallel و Intercept ایجاد کردهاند. باید به این نکته اشاره کنیم که تیم توسعه در این بهروزرسانی، پشتیبانی از routeهای catch-all و Server Actions را هم اضافه کردهاند.
/photo/123
را قطع میکند، URL را ماسک کرده و آن را روی /feed
قرار میدهد.
دیدگاهها: