Next.js 14.1 | Next.js

Next.js 14.1 شامل بهبودهایی در تجربه توسعه دهنده است، از جمله:

همین امروز ارتقا دهید یا با:

npx create-next-app@latest

ما بازخورد شما را برای وضوح بهتر در مورد نحوه میزبانی خود Next.js با سرور Node.js، ظرف Docker یا صادرات استاتیک شنیده ایم. ما اسناد خود میزبانی خود را در رابطه با:

با Next.js 14.1، ما همچنین ارائه کنترل‌کننده‌های کش سفارشی را برای به‌روزرسانی استاتیکی افزایشی و حافظه پنهان‌تر داده‌های روتر برنامه کاربردی‌تر تثبیت کرده‌ایم:

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // disable default in-memory caching
};

استفاده از این پیکربندی در خود میزبانی هنگام استفاده از پلتفرم‌های ارکستراسیون کانتینری مانند Kubernetes مهم است، جایی که هر پاد دارای یک کپی از حافظه پنهان است. استفاده از یک کنترل کننده کش سفارشی به شما این امکان را می دهد که از سازگاری در همه پادهای میزبان برنامه Next.js اطمینان حاصل کنید.

به عنوان مثال، می توانید مقادیر کش شده را در هر جایی ذخیره کنید، مانند Redis یا Memcached. مایلیم تشکر کنیم @neshca برای آداپتور و نمونه پردازش کش Redis خود.

ما همچنان بر قابلیت اطمینان و عملکرد توسعه‌ی اصلی Next.js تمرکز می‌کنیم:

• قابلیت اطمینان: Turbopack کل مجموعه تست توسعه Next.js را اجرا می کند و برنامه های Vercel را آزمایش می کند
• بهره وری: بهبود زمان ساخت اولیه Turbopack و زمان تازه سازی سریع
• استفاده از حافظه: بهبود استفاده از حافظه Turbopack

ما در حال برنامه ریزی برای تثبیت هستیم next dev --turbo در نسخه آتی، هنوز در مرحله ادغام شدن است.

لینک را به عنوان کپی کنیدقابلیت اطمینان

Next.js با Turbopack اکنون می گذرد 5600 تست توسعه (94%)، 600 مورد دیگر از آخرین به روز رسانی. می توانید پیشرفت را در areweturboyet.com دنبال کنید.

ما آزمایش را با استفاده خودمان ادامه دادیم next dev --turbo در همه برنامه های Vercel’s Next.js، از جمله vercel.com و v0.app. همه مهندسانی که روی این برنامه ها کار می کنند روزانه از Turbopack استفاده می کنند.

ما تعدادی از مشکلات را برای بسیاری از برنامه های بزرگ Next.js با استفاده از Turbopack کشف و برطرف کردیم. برای این اصلاحات، آزمایش‌های جدیدی را به مجموعه‌های آزمایش توسعه موجود در Next.js اضافه کرده‌ایم.

لینک را به عنوان کپی کنیداعدام

برای vercel.com، یک برنامه بزرگ Next.js، دیدیم:

• تا اینکه 76.7 درصد سریعتر راه اندازی یک سرور محلی
• تا اینکه 96.3٪ سریعتر به روز رسانی کد با Fast Refresh
• تا اینکه 45.8٪ سریعتر در ابتدا مسیر را بدون ذخیره کش کامپایل کنید (Turbopack هنوز حافظه پنهان دیسک ندارد)

در v0.app ما فرصتی را برای بهینه‌سازی روشی که اجزای کلاینت React کشف و در Turbopack قرار می‌گیرند شناسایی کردیم – که منجر به تا 61.5٪ زمان کامپایل اولیه سریعتر این بهبود عملکرد در vercel.com نیز مشاهده شد.

لینک را به عنوان کپی کنیدپیشرفت های آینده

Turbopack در حال حاضر دارای کش در حافظه است که زمان های کامپایل افزایشی را برای Fast Refresh بهبود می بخشد.

با این حال، در حال حاضر حافظه پنهان هنگام راه اندازی مجدد سرور توسعه Next.js باقی نمی ماند. قدم بزرگ بعدی برای عملکرد Turbopack است کش دیسک، که به حافظه نهان اجازه می دهد هنگام راه اندازی مجدد سرور توسعه باقی بماند.

لینک را به عنوان کپی کنیدپیام های خطا بهبود یافته و به روز رسانی سریع

ما می دانیم که پیام های خطای واضح چقدر برای تجربه توسعه بومی شما مهم هستند. برای بهبود کیفیت ردیابی‌های پشته و پیام‌های خطایی که در زمان اجرا می‌بینید، چندین اصلاح انجام داده‌ایم. next dev.

• خطاهایی که برای نشان دادن خطاهای بسته مانند webpack-internal اکنون کد منبع خطا و فایل آسیب دیده را به درستی نمایش می دهد.
• پس از مشاهده یک خطا در یک مؤلفه مشتری و سپس رفع خطا در ویرایشگر خود، یک بازخوانی سریع صفحه خطا را پاک نکرد. نیاز به بارگذاری مجدد سنگین داشت. ما چندین مورد از این موارد را رفع کردیم. به عنوان مثال، تلاش برای صادرات metadata از یک جزء مشتری

به عنوان مثال، این یک پیام خطای قبلی بود:

Next.js 14.1 این را به:

لینک را به عنوان کپی کنیدwindow.history.pushState و window.history.replaceState

App Router اکنون اجازه استفاده از بومی را می دهد pushState و replaceState روش هایی برای به روز رسانی پشته تاریخچه مرورگر بدون بارگیری مجدد صفحه.

pushState و replaceState تماس‌ها در روتر برنامه Next.js ادغام می‌شوند و به شما امکان می‌دهند با آن همگام‌سازی کنید usePathname و useSearchParams.

این زمانی مفید است که هنگام ذخیره وضعیتی مانند فیلترها، ترتیب مرتب سازی یا سایر اطلاعاتی که می خواهید در بارگیری مجدد باقی بماند، بلافاصله URL را به روز کنید.

'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 Ascendingbutton>
      button onClick={() => updateSorting('desc')}>Sort Descendingbutton>
    >
  );
}

درباره استفاده از API تاریخچه بومی با Next.js بیشتر بیاموزید.

لینک را به عنوان کپی کنیدثبت اطلاعات حافظه پنهان

برای مشاهده بهتر داده های ذخیره شده در حافظه پنهان در برنامه Next.js هنگام اجرا next dev، ما تعدادی بهبود در آن انجام دادیم logging گزینه پیکربندی

اکنون می توانید نشان دهید که حافظه پنهان وجود دارد یا خیر HIT یا SKIP و آدرس کامل درخواستی:

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() (پایدار) که نیازی به استفاده ندارند مستقیما این شامل:

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>
  );
}

بیشتر بدانید getImageProps().

در Next.js 14.1 انجام دادیم 20 بهبود به مسیرهای موازی و رهگیری.

برای دو نسخه اخیر، ما بر بهبود عملکرد و قابلیت اطمینان Next.js تمرکز کرده‌ایم. ما قبلاً بر اساس بازخورد شما توانسته‌ایم پیشرفت‌های زیادی در مسیرهای موازی و به دام افتاده ایجاد کنیم. قابل ذکر است، ما پشتیبانی از مسیرهای همه جانبه و اقدامات سرور را اضافه کرده ایم.

• مسیرهای موازی امکان رندر همزمان یا مشروط یک یا چند صفحه در یک طرح. برای بخش های بسیار پویا از یک برنامه، مانند داشبورد و فید در سایت های اجتماعی، از مسیرهای موازی می توان برای پیاده سازی الگوهای مسیریابی پیچیده استفاده کرد.
• مسیرهای قطع شده به شما امکان می دهد مسیری را از قسمت دیگری از برنامه خود در طرح بندی فعلی بارگیری کنید. به عنوان مثال، هنگامی که روی عکسی در فید کلیک می‌کنید، می‌توانید عکس را در یک نمای مودال نمایش دهید و یک فید را پوشش دهید. در این مورد Next.js رهگیری می کند /photo/123 route، URL را ماسک می کند و روی آن قرار می گیرد /feed.

درباره مسیرهای Parallel & Trapped بیشتر بیاموزید یا نمونه ای را ببینید.

از آنجایی که 14.0، تعدادی از اشکالات را که به شدت توسط انجمن پشتیبانی شده اند، رفع کرده ایم.

ما همچنین اخیراً ویدیوهایی را ارسال کرده‌ایم که در مورد حافظه پنهان و برخی از اشتباهات رایج در App Router توضیح می‌دهند که ممکن است برای شما مفید باشد.

• [Docs] اسناد تغییر مسیر جدید
• [Docs] مستندات آزمایشی جدید
• [Docs] مستندات چک لیست تولید جدید
• [Feature] اضافه کنید جزء به next/third-parties (اسناد)
• [Improvement] create-next-app اکنون کوچکتر و سریعتر برای نصب (PR)
• [Improvement] خطاهای ایجاد مسیرهای تودرتو همچنان قابل شناسایی هستند global-error (PR)
• [Improvement] redirect اکنون احترام می گذارد basePath هنگامی که در یک اقدام سرور استفاده می شود (PR)
• [Improvement] درستش کن next/script و beforeInteractive استفاده با App Router (PR)
• [Improvement] انتقال خودکار @aws-sdk و lodash برای راه اندازی سریعتر مسیر (PR)
• [Improvement] رفع فلش محتوای سبک نشده با next dev و next/font (PR)
• [Improvement] پرورش notFound خطاهای بعد از حد خطای بخش (PR)
• [Improvement] رفع سرویس فایل‌های عمومی از دامنه‌های محلی با Pages Router i18n (PR)
• [Improvement] خطای عدم اعتبار revalidate ارزش ارسال شده (PR)
• [Improvement] رفع مشکلات مسیر در ماشین‌های لینوکس هنگام ساختن یک بیلد ویندوز (PR)
• [Improvement] هنگام استفاده از یک برنامه چند منطقه ای، Fast Refresh / HMR را رفع کنید basePath (PR)
• [Improvement] بهبود خاموش شدن صاف از سیگنال های پایان (PR)
• [Improvement] مسیرهای مودال زمانی که توسط مسیرهای مختلف رهگیری می شوند با هم برخورد می کنند (PR)
• [Improvement] مسیرهای رهگیری صحیح در حال استفاده basePath پیکربندی (PR)
• [Improvement] نمایش هشدار هنگام از دست دادن نتایج شکاف موازی در 404 (PR)
• [Improvement] هنگام استفاده از مسیرهای روابط عمومی، مسیرهای رهگیری را بهبود بخشید
• [Improvement] بهبود مسیرهای رهگیری هنگام استفاده با revalidatePath (PR)
• [Improvement] تصحیح استفاده از @children شیارهای مسیر موازی (PR).
• [Improvement] رفع Fix TypeError هنگام استفاده از پارامترهای با مسیرهای موازی (PR)
• [Improvement] رفع عادی سازی همه مسیرها برای مسیرهای موازی پیش فرض (PR)
• [Improvement] ثابت نشان دادن مسیرهای موازی در next build خلاصه (PR)
• [Improvement] رفع پارامترهای مسیر هنگام استفاده از مسیرهای رهگیری (PR)
• [Improvement] بهبود مسیرهای موازی/به دام افتاده عمیق تو در تو (PR)
• [Improvement] اصلاح 404 با مسیرهای رهگیری جفت شده با گروه های مسیر (PR)
• [Improvement] رفع مسیرهای موازی با اقدامات سرور / اعتبار مجدد کش روتر (PR)
• [Improvement] تصحیح استفاده از rewrites مسیر قطع شده (PR)
• [Improvement] اقدامات سرور اکنون از کتابخانه های شخص ثالث کار می کند (PR)
• [Improvement] Next.js اکنون می تواند در یک بسته ESM (PR) استفاده شود
• [Improvement] بهینه سازی فایل بشکه برای کتابخانه هایی مانند Material UI (PR)
• [Improvement] اکنون ساختمان ها شکست خواهند خورد اگر useSearchParams بدون Suspense (PR)

Next.js نتیجه کار ترکیبی بیش از 3000 توسعه دهنده فردی، شرکای صنعتی مانند Google و Meta و تیم اصلی ما در Vercel است. در بحث‌های GitHub، Reddit و Discord به انجمن بپیوندید.

این نسخه توسط:

• را Next.js تیم: اندرو، بالاز، جیاچی، جیمی، جی جی، جاش، سباستین، شو، استفن، تیم، وایات و زک.
• را پکیج توربو تیم: دانی، لیا، مایا، او جی، توبیاس و ویل.
• Next.js Docs: دلبا، استف، مایکل و لی.

و مشارکت‌های: @OlehDutchenko، @eps1lon، @ebidel، @janicklas-ralph، @JohnPhamous، @chentsulin، @akawalsky، @BlankParticle، @dvoytenko، @smaeda-ks، @kenji-webdev، @rv-3med, @icyyJose@ @jenewland1999، @mknichel، @kdy1، @housseindjirdeh، @max-programming، @redbmk، @SSakibHossain10، @jamesmillerburgess، @minaelee، @officialrajdeepsingh، @LorisSigrist، @yesl-Kim، @wazaxm @Ste @remcohaszing، @ryo-manba، @TranquilMarmot، @vinaykulk621، @haritssr، @divquan،، @AkifumiSato، @arnabsen، @nfroidure، @clbn، @siddtheone، @zbauman3، @anthonyshew، @alex. @pacexy، @hichemfantar، @michaldudak، @redonkulus، @k-taro56، @mhughdo، @tknickman، @shumakmanohar، @vordgi، @hamirmahal، @gaspar09، @JCharante، @sjoerdvanBommel، @mass25danthsman، @mass2527 @rmathew8-gh، @chriskrogh، @shogunsea، @auipga، @SukkaW، @agustints، @OXXD،@clarencepenz، @better-salmon، @808vita، @coltonehrman، @tksst، @hugo-syn، @JakobJingleheimer، @Willem-Jaap، @brandonnorsworthy، @jaehunn، @jridgewell، @ggtjamesa، @mugi-uno، @vimenis, @vinetyampent@ @mkcy3، @suhaotian، @imevanc، @d3lm، @amannn، @hallatore، @Dylan700، @mpsq، @mdio، @christianvuerings، @karlhorky، @simonhaenisch، @olci34، @zce، @LavaToaster، @rishabhriwpod, @devjicoriwpod, @devjicoriwpod, @JackieLi565، @thoushif، @pkellner، @jpfifer، @quisido، @tomfa، @raphaelbadia، @j9141997، @hongaar، @MadCcc، @luismulinari، @dumb-programmer، @nonoakij، @franky47، @robbert. @functino، @Anisi، @AdonisAgelis، @seangray-dev، @prkagrawal، @heloineto، @kn327، @ihommani، @MrNiceRicee، @falsepopsky، @thomasballinger، @tmilewski، @Vadman97، @dnhn، @Drig، @Roff @Schniz، @joulev، @Athrun-Judah، @rasvanjaya21، @rashidul0405، @nguyenbry، @Mwimwii، @molebox، @mrr11k، @philwolstenholme، @IgorKowalczyk، @Zoe-Bot، @JanCiackHu, @JanCiackHu, @pveyes، @yeskunall، @ChendayUP، @hmaesta، @ajz003، @its-kunal، @joelhooks، @blurrah، @tariknh، @Vinlock، @Nayeem-XTREME، @aziyatali، @aspehler و @moka-ayumu.