Next.js 15.2 شامل به‌روزرسانی‌هایی برای خطاهای اشکال‌زدایی، ابرداده، Turbopack و موارد دیگر است:
همین امروز ارتقا دهید یا با:
# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
# ...or start a new project
npx create-next-app@latestلینک را به عنوان کپی کنیدUI خطا دوباره کار شده و ردیابی پشته بهبود یافته است
ما هم بهبودهای بصری و هم کیفیت را به خطاهایی که ممکن است در حین ساخت برنامه خود با آنها روبرو شوید اضافه کرده ایم. بیایید از طریق هر زمینه بهبود بگذریم:
لینک را به عنوان کپی کنیدهمپوشانی خطا
ما رابط کاربری و نمایش پیام‌های خطا را در Next.js اصلاح کردیم و آنها را ساختیم
راحت تر قابل درک طراحی جدید جزئیات اصلی خطا را برجسته می کند – مانند
پیام، قاب کد مربوطه، و پشته تماس، در حالی که نویز را کاهش می دهد
کد در کتابخانه ها یا وابستگی ها این بدان معنی است که شما می توانید به سرعت به ریشه آن برسید
چه اشتباهی رخ داد و سریعتر شروع به رفع آن کنید.
با استفاده از ویژگی تازه معرفی شده مالک پشته در React، اکنون می‌توانیم دقت بیشتری در مورد اینکه خطاهای شما از کجا می‌آیند ارائه دهیم. Next.js اکنون می‌تواند از زیرمجموعه‌ای که مسئول پرتاب خطا است، خروجی بگیرد، از عناصر میانی که مسئول ایجاد عنصری هستند که باعث خطا شده‌اند صرفنظر می‌کند.
ما همچنین سفارشی کردن تنظیمات برگزیده نشانگر شما را بدون نیاز به افزودن هیچ گونه پیکربندی اضافی آسان می کنیم.
ما یک بخش بازخورد در پایین همپوشانی های خطا اضافه کرده ایم که به شما امکان می دهد میزان مفید بودن پیام خطا را ارزیابی کنید. بازخورد شما به ما کمک می‌کند تا نکات رایج درد را درک کنیم و پیام‌های خطا را بهبود بخشیم تا اشکال‌زدایی را آسان‌تر کنیم.
لینک را به عنوان کپی کنیدشاخص توسعه
ما اطلاعات توسعه را در یک نشانگر جدید و کارآمد ادغام کرده‌ایم که جزئیاتی مانند حالت رندر و وضعیت ساخت را نشان می‌دهد.
در طول کامپایل، هنگام پیمایش بین مسیرها، متوجه لوگوی متحرک و کم نور Next.js خواهید شد. وقتی ساخت کامل شد و React شروع به رندر کرد، لوگو روشن‌تر می‌شود و یک سیگنال بصری از وضعیت برنامه شما ارائه می‌دهد.
باز کردن نشانگر توسعه اکنون نشان می دهد:
- حالت نمایش مسیر فعلی شما (ایستا/پویا)
- وضعیت ساخت توربوپک
- خطاهای فعال با دسترسی سریع به همپوشانی خطا
به روز رسانی های آینده این منو را گسترش می دهد تا شامل موارد زیر باشد:
- ابزارهای اشکال زدایی PPR (پیش رندر جزئی).
- توابع نظارت بر حافظه پنهان
- ابزارهای توسعه دهنده اضافی
این رویکرد یکپارچه همه اطلاعات مهم توسعه را در یک مکان قابل دسترس قرار می دهد. ما به بهبود و گسترش این ویژگی در نسخه های بعدی بر اساس بازخورد شما ادامه خواهیم داد.
اغلب ممکن است نیاز به بازیابی داده های پویا یا انجام برخی عملیات ناهمزمان در آن باشد generateMetadata. در نسخه‌های قبلی Next.js، باید تولید این ابرداده قبل از ارسال رابط کاربری اولیه به پایان می‌رسید تا در سند گنجانده شود. .
This meant that for many pages where a fast initial UI was available, the initial paint was still delayed by data requirements that did not affect what the user would see visually. We’ve improved this in 15.2 by allowing the initial UI to be sent to the browser even before generateMetadata فارغ التحصیل شده است.
با این حال، برای حفظ سازگاری با ربات‌ها و روبات‌هایی که انتظار دارند ابرداده در دسترس باشد of the document, we continue to delay sending HTML to certain bot user agents. If you need more fine-grained control over which bots receive this treatment, you can customize the regex used to serve them via the htmlLimitedBots گزینه ج next.config.js.
درباره جریان ابرداده بیشتر بیاموزید.
Turbopack با Next.js 15 به عنوان پایدار علامت گذاری شد.
ما در حال کار بر روی بهبود عملکرد Turbopack، به ویژه در سناریوهای ذخیره سازی غیرمداوم هستیم. به عنوان بخشی از این نسخه، ما بهبودهای زیر را معرفی کردیم:
- زمان کامپایل سریعتر: پذیرندگان اولیه گزارش داده اند 57.6٪ زمان کامپایل سریعتر هنگام دسترسی به مسیرها در مقایسه با Next.js 15.1.
- کاهش مصرف حافظه: برای برنامه vercel.com، یک مورد را مشاهده کردیم کاهش 30 درصدی در استفاده از حافظه در طول توسعه محلی
با این پیشرفت‌ها، Turbopack تقریباً در همه موارد باید سریعتر از Webpack باشد. اگر با سناریویی مواجه شدید که در آن این مورد برای درخواست شما صادق نیست، لطفاً با ما تماس بگیرید – ما می خواهیم بررسی کنیم.
ما همچنین در زمینه ذخیره سازی و ساخت های تولیدی مداوم پیشرفت کرده ایم. اگرچه این ویژگی ها هنوز برای انتشار آزمایشی آماده نیستند، اما ما آزمایش آنها را روی پروژه های واقعی آغاز کرده ایم. ما معیارهای دقیق تری را به محض اینکه برای استفاده گسترده تر در دسترس قرار گیرند، به اشتراک خواهیم گذاشت.
برای فعال کردن API آزمایشی جدید برای View Transitions در React، یک پرچم ویژگی اضافه کرده‌ایم. این API جدید به شما امکان می دهد بین نماها و اجزای مختلف برنامه خود متحرک شوید.
برای فعال کردن این ویژگی، موارد زیر را به خود اضافه کنید next.config.js:
module.exports = {
experimental: {
viewTransition: true,
},
};توجه: این ویژگی بسیار آزمایشی است و ممکن است در نسخه های بعدی تغییر کند.
برای اطلاعات بیشتر در مورد نحوه استفاده از این ویژگی، لطفاً درخواست اصلی View Transition pull را در مخزن React ببینید. این کار بر روی اجرای مرورگر بومی View Transitions ساخته شده است.
با پیشرفت ثبات، اسناد و نمونه های بیشتری را ارسال خواهیم کرد.
ما در حال کار بر روی یک پرچم آزمایشی جدید هستیم تا استفاده از زمان اجرا Node.js را برای Next.js Middleware فعال کنیم.
برای فعال کردن این ویژگی، موارد زیر را به خود اضافه کنید next.config.js:
module.exports = {
experimental: {
nodeMiddleware: true,
},
};سپس می توانید زمان اجرا Node.js را در میان افزار خود مشخص کنید config صادرات:
import bcrypt from 'bcrypt';
const API_KEY_HASH = process.env.API_KEY_HASH; // Pre-hashed API key in env
export default async function middleware(req) {
const apiKey = req.headers.get('x-api-key');
if (!apiKey || !(await bcrypt.compare(apiKey, API_KEY_HASH))) {
return new Response('Forbidden', { status: 403 });
}
console.log('API key validated');
}
export const config = {
runtime: 'nodejs',
};توجه: این ویژگی هنوز برای استفاده در تولید توصیه نمی شود. بنابراین، Next.js یک خطا ایجاد می کند مگر اینکه شما استفاده کنید
next@canaryبه جای انتشار پایدار.
ما قصد داریم از این فرصت برای بهبود و طراحی مجدد API میان افزار استفاده کنیم. اگر پیشنهاد یا درخواستی دارید، لطفاً به ما اطلاع دهید. Node.js Middleware یکی از درخواست‌های اصلی جامعه بوده است، و ما برای رسیدگی به این موضوع هیجان‌زده هستیم.
- “استفاده از کش” (بتا): ما روی تثبیت کار می کنیم
"use cache"به عنوان یک ویژگی مستقل منتظر جزئیات بیشتر در نسخه های بعدی باشید. بیشتر بدانید"use cache". - ذخیره سازی مداوم توربوپک (تجربی): ما حافظه پنهان دائمی را در Vercel با بهبود عملکرد مثبت آزمایش کردیم. هنگامی که آن را بیشتر تثبیت کردیم، آن را در پشت پرچم ویژگی برای بازخورد و آزمایش بیشتر منتشر می کنیم.
- [Feature] اضافه کنید
--apiپرچم گذاری کنید تا فقط یک API بدون سر ایجاد کنیدcreate-next-app(PR) - [Feature] اضافه کردن پشتیبانی برای
images.qualitiesباnext/image(PR) - [Deprecation] هشدار از بین رفتن پیکربندی برنامه روتر (PR) i18n
- [Improvement] بهبود عملکرد خزه روی
no-html-link-for-pages(PR) - [Improvement] یک خطای کامپایل صادر کنید اگر
"use action"دستورالعمل اشتباه استفاده شده است (PR) - [Improvement] نمایش
global-errorبه همراه یک پوشش برای توسعه دهندگان در طول توسعه (PR) - [Improvement] فعال کردن غیرفعال کردن گزارش های درخواست HTTP در سرور توسعه (PR)
- [Improvement] افزودن برچسب های لینک سئو صفحه (PR)
- [Improvement] بهبود JSDocs برای
metadataواجزاء (PR) - [Improvement] میان افزار باید مطابقت داشته باشد
next/imageدرخواست ها (PR) - [Improvement] نام میزبان را به پیام مرز خطای پیش‌فرض (PR) اضافه کنید
- [Improvement] ارسال خطاهایی که با محدودیت های صریح خطا کنترل نمی شوند
reportError(PR)
Next.js نتیجه کار مشترک بیش از 3000 توسعه دهنده فردی است. این نسخه توسط:
- این Next.js تیم: اندرو، هندریک، یانکا، جیاچی، جیمی، جیوون، جی جی، جاش، جود، سم، سباستین، سبی، وایات و زک.
- این پکیج توربو تیم: بنجامین، دانی، مایا، نیکلاس، تیم، توبیاس و ویل.
- این Next.js Docs تیم: دلبا، ریچ، اسماعیل و لی.
با تشکر فراوان از @mischnic، @Marukome0743، @JamBalaya56562، @creationix، @noreiller، @styfle، @abdonrd، @ollyw، @aymericzip، @davidhu2000، @attillarepka، @devpla، @dydals3440، @thw, @huozhi @PapatMayuri، @Sahil4883، @abyii، @molebox، @sokra، @maciej-ka، @abvthecity، @damiensedgwick، @alitas، @RiskyMH، @ytreister، @sommeeeer، @n1ckoates، @yongholeeme، @antoskerossiders@ @Netail، @tknickman، @eur00t، @cseas، @nnnnoel، @Manoj-M-S، @lfades، @matmannion، @mikeboensel، @nphmuller، @apostolos، @k15a، @pavelee، @locothedev، @vexcat، @Zach, @deJapulen، @Zach- @lukahartwig، @jsanford8، @RobinMalfait، @raunofreiberg، @mohsen1، @skushagra، @amannn، @HQidea، @jrandolf، @smit-err، @littledivy، @k35o، @martinsione، @CvX، @msereniti @Timereniti @Timereniti @RobPruzan، @PlagueFPS، @bjunix، @maximevtush، @michaelven، @sedlukha، @johannpinson، @AxelUser، @Nayeem-XTREME، @IcaroG، @blurrah، @lachlanjc، @ashi009، @conico974، @konico974، @d. @Knoa0405، @wangsijie، @stefanprobst، @wentsul، @loopy-lim، @bratvanov، @hedgeday و @cassian-goode برای کمک!
