تغییرات نسخه جدید Next.js 14.1
![next js](https://reactapp.ir/wp-content/uploads/next-js-14.1.webp)
![next js](https://reactapp.ir/wp-content/uploads/next-js-14.1.webp)
Next.js، فریمورک معروف React برای توسعه برنامههای وب، نسخه جدید خود یعنی Next.js 14.1 را معرفی کرده است. این نسخه به بهبود تجربه توسعهدهنده، بهینهسازی گزینههای Hosting، و اصلاح ویژگیهای مختلف تمرکز دارد. در ادامه به بررسی بهروزرسانیها و پیشرفتهای کلیدی Next.js 14.1 میپردازیم.
بهبودهای Self-host
Next.js 14.1 با ارائه داکیومنت های بهتر و یک Cache Controller سفارشی، وضوح در Self-host را افزایش میدهد. برنامه نویسان در بحث آموزش جاوا اسکریپت اکنون میتوانند از راهنماییهای پیشرفته مرتبط با متغیرهای Runtime environment، تنظیمات Cache سفارشی برای Incremental Static Regeneration (ISR)، بهینهسازی تصاویر سفارشی، و استفاده از Middlewareها بهرهمند شوند.
علاوه بر این، Cache Controllerهای سفارشی برای ISR و حافظه پنهان داده نیز تثبیت شدهاند. این امکان را به برنامه نویسان جاوا اسکریپت میدهد که بهصورت استاندارد از این ویژگیها در محیطهای مختلف Hosting برنامههای Next.js استفاده کنند.
بهبودهای در Turbopack
Next.js 14.1 ادامه تمرکز بر قابلیت اطمینان و عملکرد توسعه محلی با Turbopack را دارد. این بهبودها شامل افزایش قابلیت اطمینان و عملکرد، و کاهش مصرف حافظه در Turbopack میشود. علاوه بر این، نقشه راه برای Turbopack حاوی معرفی حافظه پنهان دیسک است که گام مهمی به سوی حفظ حافظه پنهان هنگام راهاندازی مجدد سرور توسعه Next.js میباشد.
بهبودهای در تجربه توسعه دهندگان
Next.js 14.1 تعدادی پیشرفت را در تجربه کلی توسعهدهنده ارائه میدهد، شامل بهبود پیامهای خطای بهتر و پشتیبانی از روشهای pushState و replaceState.
پیامهای خطا بهبود یافته و بازخوانی سریع
پیامهای خطا با stack trace و پیامهای خطای واضحتر هنگام اجرا بهبود یافتهاند. این امکان را به برنامه نویسان جاوا اسکریپت میدهد تا با مشکلات بهتر برخورد کنند و خطاهای bundler که برای نمایش پیامهای مبهم استفاده میشد، اکنون اطلاعات دقیقتری ارائه میدهند.
![](https://reactapp.ir/wp-content/uploads/nextjs-code-300x300.jpg)
![](https://reactapp.ir/wp-content/uploads/nextjs-code-300x300.jpg)
استفاده از pushState و replaceState
برنامه نویسان جاوا اسکریپت در طراحی سایت اکنون میتوانند از روشهای اصلی pushState و replaceState برای بهروزرسانی پشته سابقه مرورگر بدون بارگیری مجدد صفحه استفاده کنند. این امکان ایجاد همگامسازی با روتر برنامه Next.js و مدیریت بهروزرسانیهای URL را آسانتر میکند.
مثال استفاده از pushState
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
'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> </> ); } |
ثبت اطلاعات حافظه پنهان
Next.js 14.1 بهبودهایی را در logging گزینه پیکربندی برای افزایش قابلیت مشاهده دادههای حافظه پنهان در طول next dev ارائه میدهد.
پیکربندی ورود به سیستم
1 2 3 4 5 6 7 8 9 10 11 12 13 |
module.exports = { logging: { fetches: { fullUrl: true, }, }, }; |
پشتیبانی از picture و هدایت هنری در next/image
Next.js 14.1 با معرفی کامپوننت getImageProps()، موارد استفاده پیشرفتهتری را بدون استفاده مستقیم از <Image> ارائه میدهد. این امکان به توسعهدهندگان کمک میکند تا بدون مشکلات از ویژگیهای مانند background-image، image-set، canvas context.drawImage() و دیگر موارد استفاده کنند.
مثال استفاده از <picture>
و getImageProps()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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> ); } |
![](https://reactapp.ir/wp-content/uploads/4905784-300x200.png)
![](https://reactapp.ir/wp-content/uploads/4905784-300x200.png)
بهبودهای در Parallel & Intercepted Routes
Next.js 14.1 حدود 20 پیشرفت در Parallel & Intercepted Routes به ارمغان میآورد. این امکانات شامل ارائه سرور موازی برای SSG، مرزهای خطا برای تعلیق، Global Fetch برای SSR، Webpack HMR برای ESM ماژولها، نکات منابع برای Parallel Routs، و Realtime Fetch برای مسیرهای موازی میشود.
نظارت بر عملکرد با Vercel
Vercel نظارت بر عملکرد بهبود یافته را برای برنامههای Next.js 14.1 مستقر در این پلتفرم معرفی میکند. با افزایش دقت و قابلیت اطمینان، برنامه نویسان جاوا اسکریپت میتوانند بینشهایی را در مورد معیارهای کلیدی به دست آورند و عملکرد برنامههای خود را بهبود بخشند.
نتیجه
Next.js 14.1 با تمرکز بر تقویت تجربه توسعهدهنده، بهبود Hosting، و افزایش عملکرد، به عنوان یکی از چارچوبهای پیشرو React ادامه میدهد. برنامه نویسان جاوا اسکریپت تشویق میشوند تا به آخرین نسخه نگاهی بیندازند و از ویژگیها و بهینهسازیهای جدید برای ساخت برنامههای وب قویتر و کارآمدتر بهرهمند شوند.
دیدگاهتان را بنویسید