style پشتیبانی کنیدlayout، objectFit، و objectPosition به نفع style یا classNameIntersectionObserver پیاده سازی به نفع بارگذاری تنبل خودloader پیکربندی به نفع loader پشتیبانی کنیدfill حالت (هنوز) بنابراین width & height پشتیبانی مورد نیاز استاین عملکرد را بهبود می بخشد زیرا به صورت بومی loading="lazy" نیازی به انتظار برای هیدراتاسیون React و JavaScript سمت کلاینت نیست.
برای اطلاعات بیشتر، به مستندات مراجعه کنید.
لینک را به عنوان کپی کنیدمدل های از راه دور (تجربی)
next/image اکنون از گزینه پیکربندی آزمایشی پشتیبانی می کند remotePatterns که به شما امکان می دهد هنگام استفاده از API بهینه سازی تصویر داخلی، حروف عام را برای تصاویر راه دور مشخص کنید. این امکان تطبیق قدرتمندتر فراتر از موجود را فراهم می کند images.domains پیکربندی که فقط مطابقت دقیق نام دامنه را انجام می دهد.
module.exports = {
experimental: {
images: {
remotePatterns: [
{
// The `src` property hostname must end with `.example.com`,
// otherwise this will respond with 400 Bad Request.
protocol: 'https',
hostname: '**.example.com',
},
],
},
},
};برای اطلاعات بیشتر، به مستندات مراجعه کنید.
لینک را به عنوان کپی کنیدبهینه سازی تصویر را غیرفعال کنید
API بهینه‌سازی تصویر با پیکربندی صفر از استفاده از آن جلوگیری می‌کند next export از آنجایی که نیاز به یک سرور برای بهینه سازی تصاویر در صورت درخواست دارد. تا امروز هدف گذاری کاربر next export برای پیکربندی مورد نیاز است loader برای استفاده از یک ارائه دهنده بهینه سازی تصویر شخص ثالث، اما اگر ارائه دهنده ای در دسترس نبود، راه حل روشنی وجود نداشت. از امروز، next export کاربران می توانند بهینه سازی تصویر را برای همه موارد غیرفعال کنند next/image با یک ویژگی پیکربندی جدید:
module.exports = {
experimental: {
images: {
unoptimized: true,
},
},
};کامپایلر Next.js از SWC برای تبدیل و کوچک کردن کد جاوا اسکریپت شما برای تولید استفاده می کند. SWC در Next.js 12.0 برای بهبود توسعه محلی و عملکرد ساخت معرفی شد.
اکنون می توانید افزونه هایی (نوشته شده در WebAssembly) برای سفارشی کردن رفتار تبدیل SWC در زمان کامپایل اضافه کنید:
module.exports = {
experimental: {
swcPlugins: [
['css-variable/swc', { displayName: true, basePath: __dirname }],
],
},
};برای اطلاعات بیشتر، به مستندات مراجعه کنید.
- پشتیبانی بهبود یافته برای کتابخانه های CSS-in-JS مانند
styled-componentsوemotionبا تجربه ارتقای نرم‌تر و بدون تغییرات مخرب. - AMP و HTML پس بهینه سازی (CSS، بهینه سازی فونت) اکنون به درستی پشتیبانی می شوند.
next/headاکنون از React 18 پشتیبانی می کند.- اعلام‌کننده مسیر Next.js که برای اعلام صحیح انتقال صفحه به صفحه‌خوان‌ها و سایر فناوری‌های کمکی استفاده می‌شود، اکنون از React 18 پشتیبانی می‌کند.
- پشتیبانی از تبدیل Emotion در کامپایلر Next.js. اکثر توابع از
@emotion/babel-pluginقبلاً پشتیبانی می شوند و مگر اینکه استفاده کنیدimportMap، قابل حذف است. برای اطلاعات بیشتر، به مستندات مراجعه کنید. - پشتیبانی بهتر برای
styled-componentsتبدیل به کامپایلر Next.js می شود و امکان سفارشی سازی گزینه های پیش فرض از جملهcssPropگزینه برای اطلاعات بیشتر، به مستندات مراجعه کنید. - پشتیبانی بهتر از ماژول های جاوا اسکریپت ES، بنابراین اجزای مانند
next/imageوnext/linkممکن است به درستی باشدimportویرایش next/linkدیگر نیازی به افزودن دستی نداردمثل یک بچه اکنون می توانید این رفتار را به روشی سازگار با عقب انتخاب کنید.- ما پشتیبانی آزمایشی را برای ارسال فقط جاوا اسکریپت مدرن از طریق مودینگ اضافه کرده‌ایم
browsersList. شما می توانید این رفتار را با تنظیم انتخاب کنیدbrowsersListForSwc: trueوlegacyBrowsers: falseجexperimentalنوع ازnext.config.js. - جدید
@swc/helpersبهینه‌سازی‌ها از تکرار در بسته‌ها جلوگیری می‌کنند و اندازه بسته را تقریباً کاهش می‌دهند2KBدر پیکربندی حداقل و بیشتر در برنامه های بزرگتر - ما اندازه نصب Next.js را به میزان قابل توجهی کاهش داده ایم. ما این کار را با انتقال monorepo خود به
pnpm، که به ما امکان می دهد بسته های تکراری را در حین ساختن نسخه های از پیش کامپایل شده ای که استفاده می کنیم حذف کنیم. این حجم نصب را 14 مگابایت کاهش می دهد. - در تلاش مداوم خود برای بهبود میزبانی خود Next.js، در حال تثبیت آزمایشی خود هستیم
outputStandalone: trueپیکربندی بهoutput: 'standalone'. این پیکربندی با گنجاندن تنها فایل‌ها/دارایی‌های مورد نیاز، از جمله حذف نیاز به نصب همه، اندازه‌های استقرار را به‌طور چشمگیری کاهش می‌دهد.node_modulesدر بسته استقرار داخلی. این پیکربندی را می توان در عمل در ما مشاهده کردwith-dockerمثال
اگر آن را از دست دادید، ماه گذشته ما Layouts RFC را معرفی کردیم – بزرگترین به روز رسانی Next.js از زمان معرفی آن در سال 2016، از جمله:
- چیدمان های تو در تو: برنامه های پیچیده با مسیرهای تودرتو ایجاد کنید.
- طراحی شده برای اجزای سرور: بهینه شده برای ناوبری زیر درخت.
- استخراج داده های بهبود یافته: استخراج طرح ها در حالی که از آبشار جلوگیری می کند.
- استفاده از ویژگی های React 18: جریان، انتقال و ولتاژ.
- مسیریابی مشتری و سرور: مسیریابی سرور محور با آبگرم مانند رفتار
- پذیرش 100% افزایشی: بدون تغییرات مخرب، بنابراین می توانید به تدریج اتخاذ کنید.
- کنوانسیون های مسیریابی پیشرفته: مخفی کردن خارج از صفحه، انتقال فوری، و موارد دیگر.
برای اطلاعات بیشتر، RFC را ببینید یا بازخورد ارائه دهید.
Next.js نتیجه کار ترکیبی است بیش از 2000 توسعه دهنده فردی، شرکای صنعتی مانند Google Chrome و Meta و تیم اصلی ما در Vercel.
این نسخه توسط مشارکت‌های زیر برای شما آورده شده است: @huozhi، @ijjk، @kwonoj، @ViolanteCodes، @akrabdev، @timneutkens، @jpveilleux، @stigkj، @jgoping، @oof2win2، @Brooooklyn، @CGamesPlay، @lfades، @Fades، @Stemo @Kikobeats، @balazsorban44، @erikbrinkman، @therealmarzouq، @remcohaszing، @perkinsjr، @shuding، @hanneslund، @housseindjirdeh، @RobertKeyser، @styfle، @htunnicliff، @Jukeshuas, @lukeshumard، @lukeshumard @rishabhpoddar، @nguyenyou، @kdy1، @sidwebworks، @gnoff، @gaspar09، @feugy، @mfix-stripe، @javivelasco، @Chastrlove، @goncharov-vlad، @NaveenDA، @Firfi، @idkwhojamesis، @idkwhojamesis، @idkwhojamesis @Phwhojamesis @elskwid، @irvile، @Munawwar، @ykolbin، @hulufei، @baruchadi، @imadatyatalah، @await-ovo، @menosprezzi، @gazs، @Exortions، @rubens-lopes، @woochul2، @stefee، @stmtk1، @Maedjaolme@jlarm. @fabienheureux، @TxHawks، @mattbrandlysonos، @iggyzap، @src200، @AkifumiSato، @hermanskurichin، @kamilogorek، @ben-xD، @dawsonbooth، @Josehower، @crutchcorn، @ericmatthys، @Charlesmatthys، @Charlespothest @naingaungphyo، @alexandrutasica، @stefanprobst، @dc7290، @DilwoarH، @tommarshall، @stanhong، @leerob، @appsbytom، @sshyam-gupta، @saulloalmeida، @indicozy، @ArianHamdi، @baiq، @Clarity @Schniz، @dgagn، @sokra، @okbel، @tbvjaos510، @dmvjs، @PepijnSenders، @JohnPhamous، @kyliau، @eric-burel، @alabhyajindal، @jsjoeio، @vorcigernix، @clearlyTHUYMANXT, @clearlyTHUYDOKESAN، @nvh95،@frankievalentine، @nuta، @bagpyp، @dfelsie، @qqpann، @atcastle، @jsimonrichard، @mass2527، @ekamkohli، @Yuddomack، @tonyspiro، @saurabhmehta1601، @banner4422، @fallsepopontsky, @jantimonrichard، @falsepopsky, @falsepopsky, @. @matteobruni، @ryscheng، @hoonoh، @ForsakenHarmony، @william-keller، @AleksaC، @Miikis، @zakiego، @radunemerenco، @AliYusuf95 و @dominiksipowicz.
