Next js 13 مسیریابی، طرح‌بندی، رندر را بهبود می‌بخشد

تیم توسعه بر اساس بازخوردها، یک گزینه آزمایشی به نام staleTimes اضافه کرده است تا توسعه‌دهندگان بتوانند برای ابطال اعتبار داده‌ها، یک دوره زمانی را در client-side router cache پیکربندی کنند. Next.js 14.1 تعدادی پیشرفت را در تجربه کلی توسعه‌دهنده ارائه می‌دهد، شامل بهبود پیام‌های خطای بهتر و پشتیبانی از روش‌های pushState و replaceState. برای برنامه‌نویس‌هایی که از TypeScript استفاده می‌کنن، نسخه 15 پشتیبانی بیشتری فراهم کرده.از جمله امکان استفاده از next.config.ts که کانفیگ پروژه رو type safe تر می‌کنه. همچنین بهبودهای امنیتی در این نسخه شامل حذف کدهای غیرضروری و ایمنی بالاتر در اجرای Server Actions با شناسه‌های ایمن تر شده، که از دسترسی های ناخواسته جلوگیری میکنه. تیم توسعه به کار بر روی مسیرهای Parallel و Intercept ادامه می‌دهد و اکنون در نسخه ۱۴٫۲ Next.js این دو مورد با Client-side Router Cache سازگار می‌باشند. هدف staleTimes بهبود تجربه فعلی کاربرانی است که خواهان کنترل بیشتر بر روی مباحث caching هستند، اما این راه حل کامل نیست.

Webpack یک ابزار پرکاربرد برای بسته‌بندی ماژول‌های جاوا اسکریپت به بسته‌هایی است که می‌توانند به مرورگر ارائه شوند. با این حال، Webpack به دلیل پیاده سازی مبتنی بر جاوا اسکریپت، محدودیت هایی از نظر عملکرد و مقیاس پذیری دارد. تیم توسعه دهنده در نسخه 14.1 شروع به کار برروی بهبود ارور ها کرد و این کار تا به امروز و در نسخه 14.2 ادامه داشت و در نتیجه ما در این نسخه ارورهایی واضح تر و پر جزئیات تر، با طراحی ظاهری بهتری را میبینیم. Next.js 14.1 ادامه تمرکز بر قابلیت اطمینان و عملکرد توسعه محلی با Turbopack را دارد. این بهبودها شامل افزایش قابلیت اطمینان و عملکرد، و کاهش مصرف حافظه در Turbopack می‌شود.

ورژن next.js 15 یکی از بزرگ‌ترین بروزرسانی ها در سالهای اخیر بوده که با تغییرات قابل توجهی در زمینه عملکرد، تجربه Developer و امکانات جدید همراه بوده! توی این مقاله با جزئیات بیشتر این تغییرات رو بررسی میکنیم تا بدونیم دقیقاً چه امکاناتی رو می‌تونیم به پروژه هامون اضافه کنیم. این بهینه سازی را برروی پکیجی مثل react-aria-components تست کردند و نتیجه تست هم کاهش 51.3 درصدی سایز بوده. قبل تر این اتفاق ممکن بود بیوفته اما حالا در ورژن جدید nextjs شاهد این اتفاق نخواهیم بود و export های بلا استفاده از bundle ما حذف خواهند شد. با تست این بهینه‌سازی بر روی یک کتابخانه محبوب مانند react-aria-components، اندازه bundle نهایی تا ۵۱٫۳ درصد کاهش پیدا کرد.

بنابراین، تیم Next.js برای این که آماده React 19 باشد، در حال کار بر روی آخرین ویژگی‌ها و بهبودها در Next.js است و قصد دارد تا یک نسخه اصلی و هماهنگ با آخریت تغییرات React منتشر کند. تیم توسعه Next.js علاوه بر بهبودهای مربوط با Turbopack، بر روی بهبود عملکرد کلی build و production برای همه برنامه‌های Next.js (هم Pages Router و هم App Router) کار کرده است. تیم توسعه اکنون بر روی بهبود استفاده از memory، پیاده‌سازی caching دائمی و next build --turbo تمرکز خواهد کرد. Next.js 14.1 با معرفی کامپوننت getImageProps()، موارد استفاده پیشرفته‌تری را بدون استفاده مستقیم از ارائه می‌دهد. این امکان به توسعه‌دهندگان کمک می‌کند تا بدون مشکلات از ویژگی‌های مانند background-image، image-set، canvas context.drawImage() و دیگر موارد استفاده کنند.

Next.js 14.1 با تمرکز بر تقویت تجربه توسعه‌دهنده، بهبود Hosting، و افزایش عملکرد، به عنوان یکی از چارچوب‌های پیشرو React ادامه می‌دهد. برنامه نویسان جاوا اسکریپت تشویق می‌شوند تا به آخرین نسخه نگاهی بیندازند و از ویژگی‌ها و بهینه‌سازی‌های جدید برای ساخت برنامه‌های وب قوی‌تر و کارآمدتر بهره‌مند شوند. همچنین اهداف بعدی تیم توسعه دهنده nextjs طبق گفته وبسایت رسمیشون، برروی بهبود مصرف Memory، پیاده سازی یک حافظه cache دائمی و کار برروی next build --turbo خواهد بود. یکی از جذاب ترین ویژگی‌های Next.js 15 که پیش بینی هم میشد، پشتیبانی از ری اکت 19 و کامپایلر جدید ری اکت هست که باعث میشه نیاز به استفاده از useMemo و useCallback به حداقل برسه.این بهینه سازی ها به طور خودکار توسط کامپایلر انجام میشه و عملکرد اپلیکیشن رو بهبود میده. این تغییرات باعث میشه کامپوننتت هایی که نیاز به رندر مجدد دارن به درستی شناسایی و رندر بشن و در عین حال برنامه بهینه تر و سریع تر اجرا بشه. ویژگی هایی مانند رندر سمت سرور، تولید سایت ایستا، بهینه سازی تصویر، تقسیم کد و موارد دیگر را ارائه می دهد.

تیم توسعه از نسخه ۱۴٫۱، کار خود را در رابطه با بهبود پیام‌های خطا هنگام اجرای next dev شروع کرده است. این کار تا نسخه ۱۴٫۲ Next.js ادامه یافته و اکنون شامل پیام‌های خطای واضح‌تر، بهبود طراحی برای App Router و Pages Router، پشتیبانی از دارک مود و لایت مود و گزارش‌های dev و build واضح‌تر می‌باشد. با Next.js 13 که در ۲۵ اکتبر معرفی شد، باندلر Turbopack که به زبان Rust نوشته شده و هنوز در مرحله آلفای توسعه است، به عنوان جانشین Webpack قرار می گیرد. با ارائه سرعت بهبود یافته و معماری بهتر، Turbopack یک سیستم ساخت برای جاوا اسکریپت و تایپ اسکریپت است که برای ساخت های افزایشی طراحی شده است. Vercel گفت که Turbopack هنگام کار با برنامه های بزرگ ۷۰۰ برابر سریعتر از Webpack است. یکی دیگر از ویژگی های اصلی Nextjs 13 Turbopack (alpha) است که یک باندلر جدید مبتنی بر Rust است که جایگزین Webpack به عنوان باندلر پیش فرض برای پروژه های Nextjs می شود.

Vercel نظارت بر عملکرد بهبود یافته را برای برنامه‌های Next.js 14.1 مستقر در این پلتفرم معرفی می‌کند. با افزایش دقت و قابلیت اطمینان، برنامه نویسان جاوا اسکریپت می‌توانند بینش‌هایی را در مورد معیارهای کلیدی به دست آورند و عملکرد برنامه‌های خود را بهبود بخشند. این امکان را به برنامه نویسان جاوا اسکریپت می‌دهد تا با مشکلات بهتر برخورد کنند و خطاهای bundler که برای نمایش پیام‌های مبهم استفاده می‌شد، اکنون اطلاعات دقیق‌تری ارائه می‌دهند. علاوه بر این، Cache Controllerهای سفارشی برای ISR و حافظه پنهان داده نیز تثبیت شده‌اند. این امکان را به برنامه نویسان جاوا اسکریپت می‌دهد که به‌صورت استاندارد از این ویژگی‌ها در محیط‌های مختلف Hosting برنامه‌های Next.js استفاده کنند. تیم توسعه، در طول build برنامه‌های Next.js در مقیاس بسیار بزرگ، متوجه خرابی‌های OOMs شد.

در اکتبر 2021، Nextjs آخرین نسخه خود، Nextjs 13 را منتشر کرد که برخی از ویژگی‌ها و پیشرفت‌های جدید هیجان‌انگیز را معرفی می‌کند. در این مقاله، برخی از نکات برجسته Nextjs 13 و اینکه چگونه آنها می توانند برای توسعه وب شما مفید باشند را بررسی خواهیم کرد. برنامه نویسان جاوا اسکریپت در طراحی سایت اکنون می‌توانند از روش‌های اصلی pushState و replaceState برای به‌روزرسانی پشته سابقه مرورگر بدون بارگیری مجدد صفحه استفاده کنند. این امکان ایجاد همگام‌سازی با روتر برنامه Next.js و مدیریت به‌روزرسانی‌های URL را آسان‌تر می‌کند. تیم توسعه دهنده میگه که انتظار میره که این تغییرات برروی عملکرد عادی اپلیکیشن ها تاثیر نزاره، اما اگر دیدید جایی اتفاق غیر منتظره ای افتاد، حتما نگاهی به ترتیب اصولی پیاده سازی css که در داکیومنت رسمی نوشته شده بندازید.

CLI نسخه 15 هم ارتقا پیدا کرده و با اضافه شدن قابلیت هایی مثل @next/codemod، پروسه ی آپدیت و انتقال پروژه‌های قدیمی به نسخه جدید راحت تر شده.علاوه بر این، ابزارهای دیباگینگ هم بهبود پیدا کردن! مثلا ارورهای hydration با جزئیات بیشتری نمایش داده میشن که این باعث میشه مشکلات مربوط به تفاوت‌های رندرینگ سمت سرور و کلاینت سریع‌تر برطرف بشه. ویژگی Partial Pre-Rendering (PPR) در این نسخه معرفی شده که به توسعه‌دهنده ها امکان میده ترکیبی از رندر استاتیک و داینامیک رو در یک صفحه داشته باشن. این روش برای پروژه‌هایی مثل فروشگاه های اینترنتی که بعضی از اطلاعات (مثل قیمت) باید همیشه بروز باشه و بعضی دیگر ثابت بمونه، ایده‌آله.این ویژگی باعث میشه کاربرها با سرعت بیشتری محتوای استاتیک رو ببینن و همزمان، داده‌های داینامیک هم در لحظه بارگذاری بشن. امروزه مبحث cache یکی از مهم ترین مفاهیم برای داشتن یک اپلیکیشن سریع و قابل اعتماده و ضرورت وجودش در همه اپلیکیشن های تحت وب حس میشه.

پس از تحقیقات فراوان و بررسی گزارش‌های کاربران، متوجه شدند که مشکل مصرف زیاد memory به دلیل over-bundling و minification است. یعنی Next.js حین build برنامه، فایل‌های جاوااسکریپت را به شکل تکرار ایجاد می‌کند. به این ترتیب، تیم Next.js منطق bundling را refactor کرده و کامپایلر را برای این موارد بهینه کردند. کامپوننت جدید توی Next.js 15 اضافه شده که امکان Routing سمت کلاینت و Prefetching رو فراهم می‌کنه. مثلا در یک فرم جستجو که به صفحه نتایج هدایت میشه، این کامپوننت به‌طور خودکار Prefetching می‌کنه و اگه جاوا اسکریپت بارگذاری نشده باشه، فرم بطور کامل کار می‌کنه.این کار بدون نیاز به کد اضافه و پیاده‌سازی دستی انجام میشه که تجربه کاربری بهتری رو به ارمغان میاره.

Router Cache سمت کلاینت یک لایه ذخیره‌سازی است که برای ارائه یک تجربه navigation سریع، از طریق کش کردن مسیرهای بازدید شده و از پیش fetch شده روی کلاینت طراحی شده است. با این حال، اگر در هنگام ارتقا، درمورد استایل‌ها دچار مشکل شدیم مطالعه مستندات مربوط به ترتیب اصولی پیاده‌سازی css می‌تواند بسیار مفید باشد. همینطور برای آسان‌تر شدن دیباگ کردن عملکرد حافظه، یک flag به نام --experimental-debug-memory-usage در next build معرفی شده است که با مطالعه مستندات می‌توانیم اطلاعات بیشتری در این زمینه بدست بیاوریم. آخرین به‌روزرسانی به چارچوب React Vercel برای ساخت برنامه‌های وب نیز یک بسته‌بندی «بسیار سریع» مبتنی بر Rust به نام Turbopack را معرفی کرد. این تغییرات برای توسعه دهنده هایی که نیاز به کنترل بیشتری بر کش دارن خیلی مفیده.

Next.js 13، آخرین نسخه چارچوب React Vercel برای ساخت برنامه‌های کاربردی وب، یک نسخه پیش‌انتشاری از یک باندلر سریع‌تر و همچنین یک رویکرد بازطراحی شده برای رندر سرور، مسیریابی، طرح‌بندی اضافه می‌کند. Next.js 14.1 با ارائه داکیومنت های بهتر و یک Cache Controller سفارشی، وضوح در Self-host را افزایش می‌دهد. برنامه نویسان در بحث آموزش جاوا اسکریپت اکنون می‌توانند از راهنمایی‌های پیشرفته مرتبط با متغیرهای Runtime environment، تنظیمات Cache سفارشی برای Incremental Static Regeneration (ISR)، بهینه‌سازی تصاویر سفارشی، و استفاده از Middlewareها بهره‌مند شوند. Next.js، فریم‌ورک معروف React برای توسعه برنامه‌های وب، نسخه جدید خود یعنی Next.js 14.1 را معرفی کرده است. این نسخه به بهبود تجربه توسعه‌دهنده، بهینه‌سازی گزینه‌های Hosting، و اصلاح ویژگی‌های مختلف تمرکز دارد.

عمکرد cache در اپلیکیشن ها هم باید کاملا اصولی و قابل اعتماد باشه تا به عنوان مثال زمانی که یک mutation اتفاق میوفته و مثلا یک مقاله جدید به وبلاگ سایت شما اضافه میشه انتظار میره که این حافظه cache بروزرسانی بشه و آخرین و تازه ترین داده هارو به کاربران نمایش بده. تیم توسعه در نسخه ۱۴٫۲ Next.js، نحوه بهینه‌سازی CSS را در حین build با تقسیم کردن CSS به فایل‌های کوچک به نام CSS chunks به‌روزرسانی کرده است تا هنگام پیمایش بین صفحات از ایجاد تناقض بین استایل‌ها جلوگیری کند. هدف از staleTime اینه که کنترلی بیشتر از گذشته برروی مدت زمان موندگاری cache بده، اما همچنان یک راه حل کامل نیست و تیم توسعه دهنده میگه که در نسخه های بعدی آزادی عمل بیشتری را در اختیار ما خواهد گذاشت. همچنین بوسیله --experimental-debug-memory-usage که یک flag در زمان build هست میتونیم بهتر مصرف memory در زمان build را دیباگ کنیم. برای مطالعه بیشتر هم درباره این مورد میتونید به صفحه بهینه سازی مصرف memory که در وبسایت رسمی nextjs هست مراجعه کنید. یکی دیگر از بهبودهایی که تیم Next.js معرفی کرده است این است که دیگر exportها بلا استفاده در bundle قرار نخاوهند گرفت.

علاوه بر این، نقشه راه برای Turbopack حاوی معرفی حافظه پنهان دیسک است که گام مهمی به سوی حفظ حافظه پنهان هنگام راه‌اندازی مجدد سرور توسعه Next.js می‌باشد. طبق معیارهای تیم Nextjs، درواقع Turbopack می‌تواند تا ۷۰۰ برابر سریع‌تر از Webpack برای برخی کارها مانند کوچک‌سازی و تکان دادن درختان ارائه دهد. این بدان معناست که Turbopack می تواند زمان ساخت را به میزان قابل توجهی کاهش دهد و تجربه توسعه دهنده را برای پروژه های بزرگ مقیاس Nextjs بهبود بخشد. تیم توسعه دهنده نحوه بهینه سازی فایل های CSS در زمان Build را تغییر داده و با با تبدیل فایل های css به فایل های کوچکتر ( css chunks ) مطمئن میشه که هیچ تداخلی بین استایل های ما در هنگام جابجایی بین صفحات مختلف پیش نیاد. Next.js 13 همچنین دارای یک نسخه بتا از app/Directory است، که سیستم مسیریابی مبتنی بر سیستم فایل فریم ورک را بهبود می بخشد که به منظور سهولت در چیدمان رابط های پیچیده طراحی شده است. علاوه بر این، app/Directory راهی برای واکشی داده‌های ساخته شده در بالای React Suspense برای واکشی داده‌ها ارائه می‌کند و پشتیبانی از معماری React Server Component را ارائه می‌کند.

همچنین اگر علاقه مند به یادگیری مدرن و اصولی فرانت اند از جمله NextJS هستید، پیشنهاد میکنیم نگاهی هم به دوره آموزش فرانت اند ما بندازید. همینطور برای مشاهده لیستی از ویژگی‌های پشتیبانی شده و پشتیبانی نشده در Turbopack، مطالعه مستندات می‌تواند مفید باشد. در این مقاله قصد داریم تا بهبودهایی که در این نسخه صورت گرفته است را با هم بررسی کنیم. به طور پیشفرض درخواست های fetch، مسیر های Get و Routing سمت کلاینت دیگه کش نمیشن مگر اینکه خودت به صورت دستی این قابلیت رو فعال کنی. وسپار اومده تا دنیای وب پارسی را با نقشه های راه یادگیری و مقالاتش غنی تر از قبل کنه و چشم اندازی که ما داریم این هست تا تمامی roadmap های موجود در سایت roadmap.sh را برای شما قرار دهیم و چیزی حدود هزاران مقاله رایگان و حرفه ای را به دنیای وب پارسی هدیه کنیم.

این مقدارهای پیشفرض هم اکنون در این نسخه جدید nextjs قابل تنظیمن و میتونیم این مدت زمان هارا با قرار دادن کانفیگ زیر در فایل next.config.ts تغییر بدیم. از nextjs 14.2 به بعد ترتیب css chunk ها بر اساس ترتیب import اونها هستش، به عنوان مثال base-button.module.css قبل از page.module.css قرار میگیرد. تست‌های اولیه نشان می‌دهد که در یک برنامه کوچک Next.js، میزان استفاده از memory و اندازه فایل کش از ۲٫۲ گیگابایت به کم‌تر از ۱۹۰ مگابایت کاهش یافته است. طی چند ماه گذشته، تیم Next.js در تلاش بوده تا Next.js را با اجزای سرور React و ویژگی‌های React 18 ادغام کند. دوره آموزش فرانت اند یک دوره متفاوت و مدرن به پشتوانه یک roadmap غنی و اصولی هست که از شما یک فرانت اند کار متخصص میسازه.

تمام تلاش ما در برند reactapp در کنار آموزش با کیفیت و استفاده از دانش روز، اضافه کردن چاشنی تجربه چندین ساله فعالیت در پروژه های داخلی و خارجی بوده. زمانی که شما به یادگیری اختصاص دادید برای ما اهمیت بسیار بالایی داره و به همین دلیل سعی میکنیم متحوای تولید شده، غنی، پر بار و در راستای نیاز های بازار کار باشه. Next.js 14.1 بهبودهایی را در logging گزینه پیکربندی برای افزایش قابلیت مشاهده داده‌های حافظه پنهان در طول next dev ارائه می‌دهد. نسخه Next.js 15 تحولی در توسعه فِرانت اِند ایجاد کرده و با ویژگی‌های جدیدش، به‌خصوص برای پروژه های مقیاس بزرگ و پیچیده، عملکرد بهتری رو فراهم می‌کنه. این بهبود هم برای App Router و هم Pages Router پیاده شده و در ظاهری بهتر، هم در نسخه dark و هم light ارورها و لاگ های بهتری را در اختیار ما قرار میده.

بطور پیشفرض صفحاتی که از طریق کامپوننت Link و بدون تعیین کردن پراپ prefetch بهشون لینک دادیم، بمدت 30 ثانیه cache میشن و اگر هم prefetch را تعیین و اونرو مساوی true قرار بدیم هم بمدت 5 دقیقه cache میشن. این امکانات شامل ارائه سرور موازی برای SSG، مرزهای خطا برای تعلیق، Global Fetch برای SSR، Webpack HMR برای ESM ماژول‌ها، نکات منابع برای Parallel Routs، و Realtime Fetch برای مسیرهای موازی می‌شود. همچنین برای Parallel Routes و Intercepting Routes هم در این نسخه بهبود هایی را داریم و این ۲ هم اکنون با Client-side Router Cache سازگار شدند. نسخه جدید NextJS یعنی NextJS 14.2 منتشر شد و در این نسخه ما شاهد عملکردی بهتر در Development, Production و Cache خواهیم داشت. در صورتی که از مطالب این سایت استفاده کردید و تمایل به حمایت از این سایت داشتید میتونید از طریق ارز دیجیتال ترون به ما کمک کنید.

به عنوان مثال، اگر ما یک کامپوننت Icon را از فایلی که دارای use Client است import کنیم، فقط شامل آیکنی می‌شود که مدنظر ما می‌باشد و سایرآیکون‌های پکیج دیگر در bundle قرار نمی‌گیرد. هنگام انجام mutationها، هم کاربران و هم توسعه‌دهندگان انتظار دارند که حافظه cache به‌روزرسانی شود تا آخرین تغییرات را منعکس کند. اما Turbopack قصد دارد با استفاده از Rust، یک زبان سطح پایین که عملکرد و همزمانی بالایی را ارائه می دهد، بر این محدودیت ها غلبه کند. Turbopack از پشتیبانی بومی Rust برای WebAssembly (Wasm) استفاده می کند، که یک فرمت باینری است که می تواند بر روی هر پلتفرمی که از جاوا اسکریپت پشتیبانی می کند اجرا شود. با کامپایل کد Rust در ماژول‌های Wasm، Turbopack می‌تواند سریع‌تر از Webpack در هر دستگاه یا محیطی اجرا شود.