Next.js 12.3 | Next.js

ما برخی از بهبودهای کیفیت زندگی را با نسخه 12.3 به Next.js ارائه کرده ایم:

امروز با راه اندازی به روز رسانی کنید npm i next@latest.

اعلام سومین کنفرانس جامعه جهانی Next.js در 25 اکتبر. هم اکنون ثبت نام کنید →

شما به کنفرانس جامعه جهانی Next.js در 25 اکتبر دعوت شده اید. برای ششمین سالگرد Next.js، ما به شما ارائه می دهیم:

• ویژگی هایی که از React Server Components، Streaming و Suspense استفاده می کنند.
• قراردادهایی که بهینه سازی و مقیاس بندی برنامه ها را برای توسعه دهندگان آسان می کند.
• ابزارهای منبع باز که توسعه و تولید محلی را سریعتر می کند.

بلیط رایگان خود را دریافت کنید و آینده Next.js و React را ببینید و دنبال کنید @nextjs برای اطلاعیه های بیشتر به زودی ما همچنین به دنبال گفتگو با جامعه هستیم. یک پیشنهاد مکالمه ارسال کنید و داستان آنچه را که در حال ساختن هستید با Next.js به اشتراک بگذارید.

Next.js دارای پشتیبانی داخلی برای پیکربندی خودکار TypeScript است. قبلاً، افزودن TypeScript به یک پروژه موجود نیاز به نصب دستی وابستگی‌های لازم داشت.

با این نسخه، Next.js به طور خودکار تشخیص می دهد که فایل های TypeScript به یک پروژه اضافه می شوند، وابستگی های لازم را نصب می کند و اضافه می کند tsconfig.json فایل این در هنگام اجرا کار می کند next dev و next build.

تکرارهای سریع برای گردش کار توسعه محلی شما حیاتی است. Next.js از Fast Refresh برای بازخورد فوری در مورد ویرایش های انجام شده در اجزای React شما استفاده می کند. ذخیره را فشار دهید و تغییرات خود را در مرورگر منعکس کنید بدون باید صفحه را دوباره بارگیری کنید

با Next.js 12.3، برخی از فایل‌های پیکربندی اکنون هنگام انجام ویرایش‌ها دوباره بارگذاری می‌شوند، از جمله:

• .env و env.* انواع
• jsconfig.json
• tsconfig.json

تو الان شما نیازی به راه اندازی مجدد سرور توسعه محلی خود ندارید هنگامی که شما تغییراتی در این فایل های پیکربندی ایجاد می کنید.

لینک را به عنوان کپی کنیدnext/future/image جزء (پایدار)

در Next.js 12.2، پیش‌نمایش آزمایشی a را به اشتراک گذاشتیم جدید یک مؤلفه تصویر که شیوه استایل دادن به تصاویر را ساده می کند و با استفاده از بارگذاری تنبل مرورگر بومی، عملکرد را بهبود می بخشد.

مؤلفه جدید Image اکنون پایدار است و دیگر به پرچم آزمایشی نیاز ندارد.

از آخرین نسخه، ما پیشرفت های بیشتری انجام داده ایم:

• پشتیبانی اضافه شده برای fill حالت طرح بندی که باعث می شود تصویر عنصر والد را پر کند.
• محفظه تاری بهبود یافته، بنابراین با تصاویر شفاف کار می کند، دیگر مورد نیاز نیست
• با پنهان کردن، از تغییر طرح‌بندی ظریف (مرورگرهای غیر کروم) جلوگیری کرد alt متن هنگام بارگذاری تصویر
• اجباری alt دارایی برای دسترسی بهتر
• ثابت شد onError ویژگی زمانی که یک خطا قبل از هیدراتاسیون رخ می دهد.
• نسبت تصویر ثابت برای یک تصویر وارد شده ثابت که فقط دارد width یا فقط height دارایی
• هنگام استفاده از تنظیمات یا پیکربندی نادرست، پیام های خطا بهبود یافته است.

ما در حال برنامه ریزی برای تغییر نام در آینده هستیم next/image به next/legacy/image و next/future/image به next/image. این یک تجربه عالی برای پروژه های جدید Next.js فراهم می کند و پروژه های موجود می توانند به راحتی با استفاده از ما مهاجرت کنند. next/image کد مد. ما جزئیات بیشتری را تا نسخه اصلی بعدی ارائه خواهیم کرد.

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

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

remotePatterns به شما امکان می دهد در هنگام استفاده از API بهینه سازی تصویر داخلی، حروف عام را برای تصاویر راه دور تنظیم کنید. این امکان تطبیق قدرتمندتر فراتر از موجود را فراهم می کند images.domains پیکربندی که فقط مطابقت دقیق نام دامنه را انجام می دهد.

این گزینه در حال حاضر پایدار است و می تواند با گزینه تنظیمات زیر استفاده شود:

module.exports = {
  images: {
    remotePatterns: [
      {
        // The `src` property hostname must end with `.example.com`,
        // otherwise the API will respond with 400 Bad Request.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

لینک را به عنوان کپی کنیدغیرفعال کردن بهینه سازی تصویر (پایدار)

API بهینه‌سازی تصویر به یک سرور نیاز دارد تا تصاویر را در صورت درخواست بهینه کند. این زمانی که خود میزبانی می شود عالی کار می کند next start یا پیاده سازی پلتفرم هایی مانند Vercel. با این حال، این کار نمی کند next export زیرا شامل سرور بهینه سازی تصویر نمی شود. قبل از آن، باید یک ارائه دهنده بهینه سازی تصویر شخص ثالث را با استفاده از پیکربندی کنید loader prop، اما اکنون می توانید بهینه سازی تصویر را با استفاده از آن به طور کامل غیرفعال کنید next.config.js برای همه موارد next/image.

این گزینه آزمایشی قبلی اکنون پایدار است و می تواند با گزینه پیکربندی زیر استفاده شود:

module.exports = {
  images: {
    unoptimized: true,
  },
};

در Next.js 12، کوچک‌سازی کد را با استفاده از SWC به عنوان بخشی از ویژگی‌های آزمایشی کامپایلر Next.js معرفی کردیم. نتایج اولیه نشان داد که حداقل سازی با SWC است 7 برابر سریعتر نسبت به نسخه قبلی با Terser.

با این نسخه این ویژگی پایدار است و می توانید با استفاده از موارد زیر انتخاب کنید next.config.js گزینه:

module.exports = {
  swcMinify: true,
};

ما قصد داریم در نسخه اصلی بعدی، مینی‌فایر SWC را به صورت پیش‌فرض قرار دهیم.

اوایل سال جاری، Layouts RFC را منتشر کردیم که بزرگترین به‌روزرسانی Next.js را از زمان انتشار آن در سال 2016 ارائه کرد. این تغییرات شامل روتر جدیدی است که بر روی React Server Components ساخته شده است. کار پیاده سازی آغاز شده است و ما در حال کار برای یک نسخه بتا عمومی در نسخه اصلی بعدی هستیم.

امروز ما اطلاعات بیشتری در مورد ویژگی های آینده به اشتراک می گذاریم، از جمله:

علاوه بر این، در یک RFC متفاوت، ما در حال بررسی اضافه کردن پشتیبانی برای آن هستیم واردات جهانی CSS در جدید app دایرکتوری این به شما امکان می دهد از بسته هایی استفاده کنید که بسته های خود را وارد می کنند .css فایل های بدون تنظیمات اضافی

درباره این ویژگی های جدید در Layouts RFC بیشتر بخوانید.

• اسناد جدید در مورد ویژگی‌های دسترسی داخلی Next.js.
• create-next-app اکنون قالب ها با استفاده از تنظیمات برگزیده سیستم شما به طور خودکار از حالت تاریک پشتیبانی می کنند.
• src/ اکنون هنگام استفاده از پشتیبانی یکپارچه ESLint، دایرکتوری پیش‌فرض پرده‌بندی است.
• next.config.js اکنون شامل اعتبار سنجی طرحواره با ajv، که به جلوگیری از سوء استفاده از گزینه های پیکربندی کمک می کند.
• next.config.js در حال حاضر یک پرچم پیکربندی آزمایشی وجود دارد fallbackNodePolyfills: false برای جلوگیری از پر کردن مکرر Next.js API Node.js برای مرورگر (که منجر به افزایش اندازه بسته‌ها می‌شود). این گزینه باعث می‌شود که Next.js در حین ساخت خطایی نشان دهد که نشان می‌دهد واردات غیرضروری از کجا می‌آید.

Next.js نتیجه کار ترکیبی است بیش از 2000 توسعه دهنده فردی، شرکای صنعتی مانند Google Chrome و Meta و تیم اصلی ما در Vercel.

این نسخه توسط مشارکت‌های: @pthomas931، @madmed88، @sanjaiyan-dev، @balazsorban44، @DonghyukJacobJang، @chaiwattsw، @styfle، @dunglas، @ahkhanjani، @promer94، @terrierscript، @-shawncal، @Qyk@ @JoshuaKGoldberg، @lucasassisrosa، @dikwickley، @Brooooooklyn، @sicarius97، @FourwingsY، @manovotny، @SukkaW، @pepoeverton، @jdeniau، @sumiren، @anthonyshew، @pekarja5، @huozhi, @, @huozhi, @, @huozhi, @, @huozhi, @. @feugy، @jonohewitt، @zakiego، @Schniz، @timneutkens، @wyattjoh، @MaedahBatool، @X7Becka، @nnnnoel، @dcdev67، @alvinometric، @timothympace، @jeferson-sb، @ijjk، @Yandomiaad@ @nix6839، @thomasballinger، @ziishaned، @xyeres، @nyedidikeke، @maxproske، @sokra، @titusdmoore، @thebergamo، @fikrikarim، @Kikobeats، @clearlyTHUYDOAN، @nasso، @qutek، @kdy1, @kdy1, @qutek، @kdy1, @kdy1, @fikrikarim @seveibar، @Jessidhia، @santidalmasso، @JohnDaly، @Nikhilnama18، @mduleone، @colinhacks، @ductnn، @josh، @hiro0218، @eltociear، @kwonoj، @valcosmos، @mihaic195، @ KATTH, @ste. @danielcavanagh، @steven-tey، @hellomhc، @trevor-fauna، @nguyenyou، @eminvergil، @lobsterkatie، @dorian-davis، @sambecker، @isaac-martin، @lfades، @amorimr، @javivelasco، @mongolyy، @holison, @Thisen, @thisisjofrank، @dominiksipowicz، @awareness481، @pakaponk، @apledger، @longzheng، @tknickman، @rbrcsk، @emersonlaurentino، @carstenlebek، @edusig، @riccardogiorato، @hanneslund، @ryanhaticus، @War-jman @andershagbard، @dammy001، @MarDi66، @okmttdhr، @rishabhpoddar، @marjorg، @dustinsgoodman و @zanechua.