Next.js 10 | Next.js

Next.js doesn’t know about variants of a page so it’s up to you to add the hreflang با استفاده از متا تگ ها next/head. می توانید در مورد آن بیشتر بدانید hreflang در اسناد Google Webmasters.

لینک را به عنوان کپی کنیدآینده بین المللی سازی در Next.js

مسیریابی بین المللی اولین مورد از یک سری ویژگی است که بین المللی کردن و بومی سازی پروژه شما را آسان تر می کند. مسیریابی بین المللی امکان ادغام با اکثر کتابخانه های بین المللی React را فراهم می کند.

برای کسب اطلاعات بیشتر در مورد مسیریابی بین المللی، به مستندات مسیریابی بین المللی مراجعه کنید.

در Vercel، ما می دانیم که شما نمی توانید چیزی را که نمی توانید اندازه گیری کنید، اصلاح کنید.

بازدیدکنندگان شما به طور فزاینده ای نسبت به عملکرد سایت حساس می شوند. بیش از 50 درصد از آنها اگر بیش از 3 ثانیه طول بکشد، وب سایت شما را رها می کنند. اگر در تجارت الکترونیک هستید، بسیاری متوجه شده اند که بهبود زمان بارگذاری به میزان 1/10 ثانیه منجر به افزایش 1 درصدی در تبدیل شده است.

از آنجا که عملکرد برای موفقیت شما بسیار مهم است، ما مفتخریم که Next.js Speed Insights را منتشر می کنیم. راه حلی برای ردیابی معیارهای عملکرد در دنیای واقعی و بازگرداندن آن بینش ها به گردش کار توسعه شما.

با Next.js Speed Insights:

به جای یک بار اندازه گیری، اکنون به طور مداوم اندازه گیری خواهید کرد.

به جای اندازه گیری در دستگاه توسعه خود، اندازه‌گیری‌ها از دستگاه‌های واقعی که بازدیدکنندگان شما استفاده می‌کنند انجام می‌شود.

Next.js Speed Insights در مورد تمرکز بر روی کل تصویر، درک عمیق مخاطبان و نحوه عملکرد برنامه شما برای کاربران است.

ما در مورد جمع آوری داده های واقعی بسیار مصمم هستیم زیرا دلایل عملکرد ضعیف همیشه واضح ترین نیستند. رگرسیون عملکرد می‌تواند از مکان‌های مختلفی ناشی شود – اسکریپت‌ها و شیوه نامه‌های شخص ثالث، یا فونت‌ها، تصاویر و ویدیوهای شخص اول که خیلی بزرگ یا کند هستند.

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

گوگل، در ارتباط با گروه کاری عملکرد وب، مجموعه‌ای از معیارها را برای اندازه‌گیری اینکه کاربران دقیقاً چگونه عملکرد وب‌سایت شما را تجربه می‌کنند، ایجاد کرده‌اند: به درستی Web Vitals نامیده می‌شود. Web Vitals معیارهایی هستند که سرعت بارگذاری درک شده، پاسخگویی و ثبات بصری وب سایت شما را ردیابی می کنند – که هر سه برای سلامت کلی وب سایت ضروری هستند!

سرعت بارگذاری درک شده را می توان با بزرگترین رنگ محتوایی یا زمانی که تمام محتوای صفحه نمایش داده می شود اندازه گیری کرد. به عنوان مثال، زمانی که من پیوندی را برای خرید یک جفت کفش ورزشی باز می کنم – مدت زمانی که می گذرد قبل از دیدن کفش های کتانی خود، قیمت آنها و دکمه افزودن به سبد خرید LCP است.

پاسخگویی یک صفحه را می‌توان با تأخیر بارگذاری اول اندازه‌گیری کرد، که اندازه‌گیری مدت زمانی است که کاربران شما در اولین تعامل با صفحه برای دیدن پاسخ باید منتظر بمانند. به عنوان مثال، فاصله زمانی بین کلیک کردن من روی افزودن به سبد خرید و افزایش تعداد اقلام در سبد خرید، FID است.

در نهایت، پایداری بصری را می‌توان با جابجایی طرح‌بندی تجمعی یا میزان حرکت عناصر پس از نمایش به کاربر اندازه‌گیری کرد. به عنوان مثال، همه ما از تلاش برای ضربه زدن روی دکمه ای که به دلیل دیر بارگیری تصویر جابجا شده است، احساس ناامیدی را تجربه کرده ایم – این تغییر مکان است.

اندازه گیری و هم ترازی مداوم حول این Web Vitals برای کاربران واقعی شما بسیار مهم است. این تنها راهی است که می توانید به طور واقعی از عملکرد سایت شما برای کاربران خود مطلع شوید. عملکرد سایت شما بسته به دستگاه کاربر و شرایط شبکه آنها یا نحوه تعامل آنها با صفحه می تواند به طور چشمگیری متفاوت باشد. سایت هایی که محتوای سفارشی یا تبلیغات را بارگیری می کنند نیز می توانند عملکرد بسیار متفاوتی از کاربر به کاربر داشته باشند.

یک تست شبیه سازی شده نمی تواند این سیگنال های مهم را دریافت کند.

Next.js Speed Insights به شما امکان می دهد به جای معیارهای مصنوعی، بینش های دنیای واقعی را ثبت کنید. به جای تکیه بر آزمایش‌های تصادفی، امکان جریان مداوم اندازه‌گیری‌ها را فراهم می‌کند و مطمئن می‌شود که بخشی از گردش کار توسعه‌دهنده شما است.

Next.js Speed Insights به شما امکان می دهد عکس بگیرید بینش دنیای واقعی، به جای معیارهای مصنوعی. اجازه می دهد تا a جریان پیوسته اندازه گیری به جای تکیه بر آزمون های تصادفی، اطمینان حاصل کنید که بخشی از گردش کار توسعه دهنده شما است.

از nextjs.org/analytics دیدن کنید تا یاد بگیرید که چگونه آن را در برنامه خود فعال کنید.

تجارت الکترونیک یکی از مهمترین کاربردهای وب است. ویژگی های جدید Next.js 10 ابزارهای جدید قدرتمندی برای تجارت الکترونیک هستند.

به همین دلیل است که امروز با همکاری BigCommerce، Next.js Commerce را منتشر کردیم که یک کیت شروع همه کاره React برای سایت‌های تجارت الکترونیک است. با چند کلیک، توسعه‌دهندگان Next.js می‌توانند آن را شبیه‌سازی کنند، مستقر کنند و کاملاً سفارشی کنند. اکنون در nextjs.org/commerce شروع کنید.

React 17 هیچ تغییری برای Next.js نداشت، اما برخی تغییرات تعمیر و نگهداری مانند به‌روزرسانی وابستگی‌های همتا مورد نیاز بود. تبدیل جدید JSX هنگام استفاده از React 17 به طور خودکار فعال می شود، هیچ تغییری در پیکربندی لازم نیست.

تنها کاری که برای شروع استفاده از React 17 باید انجام دهید این است که Next.js و React را ارتقا دهید:

npm install next@latest react@latest react-dom@latest

لینک را به عنوان کپی کنیدgetStaticProps / getServerSideProps تازه کردن سریع

هنگامی که شما ویرایش هایی را در خود انجام می دهید getStaticProps و getServerSideProps functions Next.js اکنون به طور خودکار عملکرد را مجدداً اجرا می کند و داده های جدید را اعمال می کند. این به شما امکان می دهد بدون نیاز به رفرش صفحه، سریعتر تکرار کنید.

برای کسب اطلاعات بیشتر در مورد getStaticProps و getServerSideProps می توانید اسناد استخراج داده ها را بخوانید.

هنگام استفاده از Next.js با MDX از طریق @next/mdx تغییر محتوای MDX اکنون از Fast Refresh استفاده می‌کند و اطمینان حاصل می‌کند که مرورگر مجبور نیست صفحه را در ویرایش‌ها دوباره بارگیری کند.

را @next/mdx اسناد شما را با نحوه راه اندازی MDX با Next.js راهنمایی می کند.

لینک را به عنوان کپی کنیدCSS را از اجزای React شخص ثالث وارد کنید

اکنون می توانید css شخص ثالث را در اجزای React وارد کنید. این به CSS اجازه می دهد تا کدهای در نظر گرفته شده برای تنها یک جزء را جدا کند. به عنوان مثال، اکنون می توانید استفاده کنید react-datepicker کتابخانه بدون نیاز به وارد کردن CSS _app.js:

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
 
function MyComponent() {}

برای کسب اطلاعات بیشتر در مورد نحوه مدیریت Next.js وارد کردن CSS، می توانید به اسناد پشتیبانی داخلی CSS مراجعه کنید.

اگر قبلاً از مسیرهای پویا استفاده کرده اید، احتمالاً قبلاً با موردی برخورد کرده اید که باید هر دو را ارائه دهید href و as دارایی به next/link. چیزی شبیه به این خواهد بود:

Link href="/categories/[slug]" as="/categories/books" />

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

ما چند ماه پیش تصمیم گرفتیم این اصطکاک را برای توسعه دهندگان حل کنیم، با هدف اصلی بهبود تجربه توسعه دهنده و کاربر نهایی. ما به صورت تدریجی به سمت راه حلی کار می کنیم که اجازه می دهد href برای حل خودکار

ما خوشحالیم که اعلام کنیم به عنوان بخشی از Next.js 10، دیگر نیازی به استفاده از آن ندارید as دارایی برای اکثر موارد استفاده حذف اصطکاک از توسعه دهندگان و بهبود تجربه کاربر نهایی.

اگر در حال حاضر از هر دو استفاده می کنید، این تغییر کاملاً با عقب سازگار است href و as رفتار موجود حفظ می شود.

برای پذیرش خودکار href تنها کاری که باید انجام دهید این است که استفاده خود را تغییر دهید next/link فقط برای استفاده href داشتن ارزشی که قبلا داشتی as دارایی

Link href="/categories/books" />

برای کسب اطلاعات بیشتر در مورد next/link و مسیریابی سمت مشتری، می توانید به آن مراجعه کنید next/link مستندات

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

هنگامی که یک ویژگی در Next.js منسوخ می شود و نیاز به تغییرات اساسی در پایگاه کد دارد، تیم ما یک کد مد برای آن ایجاد می کند. Codemod یک تبدیل کد خودکار است که می توانید در پروژه خود برای به روز رسانی کد منبع اجرا کنید.

به عنوان مثال: ما یک کد مد برای به روز رسانی توابع پیکان و توابع ناشناس به توابع نامگذاری شده منتشر کردیم. این تبدیل ضروری است زیرا در غیر این صورت React Fast Refresh عملکرد را به عنوان یک مؤلفه معتبر React شناسایی نمی کند. به همین ترتیب، قوانین قلاب React Eslint تابع را به عنوان یک جزء React نمی گیرند.

با Next.js 10، یک ابزار CLI جدید به نام Next.js Codemods را منتشر می کنیم که به شما امکان می دهد یک فرمان را برای به روز رسانی برنامه خود اجرا کنید: npx @next/codemod .

برای کسب اطلاعات بیشتر در مورد Codemods، می توانید اسناد Next.js Codemods را بررسی کنید.

در Next.js 9.3 را معرفی کردیم getStaticProps و getStaticPaths همراه با قابلیت بازگشت الف fallback ملک در getStaticPaths. را fallback ویژگی اجازه می دهد تا صفحات استاتیک اضافی بدون نیاز به بازسازی کامل با ارائه در ابتدا یک فایل HTML ایستا ایجاد شود که سپس در درخواست های بعدی با محتوای کاملاً رندر شده جایگزین می شود. در چند ماه گذشته، بازخوردهای زیادی از شرکت‌هایی دریافت کرده‌ایم که رفتاری مشابه اما کمی متفاوت می‌خواستند: مسدود کردن پیش‌رندر زمانی که کاربر برای اولین بار صفحه را درخواست می‌کند. پس از این رندر اولیه، صفحه برای درخواست های بعدی مجددا استفاده خواهد شد.

با Next.js 10 این مورد را حل می کنیم.

ما هیجان زده هستیم که جدید را اعلام کنیم fallback: 'blocking' حالت برای getStaticPaths که امکان مسدود کردن رفتار را فراهم می کند که در آن هیچ بازگشتی ثابت به مرورگر ارسال نمی شود. در عوض، درخواست اولیه برای پیش‌رندر منتظر می‌ماند.

export function getStaticPaths() {
  return {
    // enables blocking mode for the fallback behavior
    fallback: 'blocking',
  };
}

برای کسب اطلاعات بیشتر در مورد fallback رفتار برای تولید تدریجی صفحات استاتیک اضافی، می توانید به آن مراجعه کنید fallback مستندات

لینک را به عنوان کپی کنیدRedirection and NotFound Support for getStaticProps / getServerSideProps

از زمان معرفی getStaticProps و getServerSideProps ما مواردی را مشاهده کرده‌ایم که در آن کاربران باید تغییر مسیرها و 404 پاسخ را برگردانند. برای کمک به ساده‌سازی این موارد، اکنون اجازه می‌دهیم دو فیلد جدید از آن بازگردانده شوند getStaticProps و getServerSideProps: notFound و redirect.

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

هنگام برگرداندن notFound میدان با true صفحه پیش‌فرض 404 با کد وضعیت بازگردانده می‌شود 404. این به شما امکان می دهد از ایجاد صفحات اضافی با SSG جلوگیری کنید و مجبور به انجام رندر دستی صفحه 404 شوید.

export function getStaticProps() {
  return {
    // returns the default 404 page with a status code of 404
    notFound: true,
  };
}

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

ریدایرکت هایی که حاوی هستند اکنون می توانند برگردانده شوند destination و اینکه آیا تغییر مسیر باید دائمی باشد یا خیر، به عنوان مثال. permanent: true. به میل خود statusCode را نیز می توان به محل بازگرداند permanent فیلد برای زمانی که باید از یک وضعیت خاص در تنظیمات پیش فرض استفاده کنید.

export function getStaticProps() {
  return {
    // returns a redirect to an internal page `/another-page`
    redirect: {
      destination: '/another-page',
      permanent: false,
    },
  };
}

export function getServerSideProps() {
  return {
    // returns a redirect to an external domain `example.com`
    redirect: {
      destination: 'https://example.com',
      permanent: false,
    },
  };
}

ما از دیدن ادامه رشد در پذیرش Next.js هیجان‌زده هستیم:

• خرج کردیم 1300 مشارکت کنندگان مستقل، با بیش از 120 مشارکت کنندگان جدید پس از انتشار 9.5
• این پروژه در GitHub ستاره دار است 54800 بارها

به انجمن Next.js در بحث های GitHub بپیوندید. Discussions یک فضای اجتماعی است که به شما امکان می دهد با سایر کاربران Next.js ارتباط برقرار کنید و آزادانه سؤال بپرسید یا کار خود را به اشتراک بگذارید.

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

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

این نسخه توسط مشارکت‌های زیر برای شما آورده شده است: @ijjk، @adebiyial، @elliottsj، @saintmalik، @HaNdTriX، @prateekbh، @amirsaeed671، @paambaati، @imagentleman، @gregrickaby، @Janpot، @attcastle، @,Kirkmorshamz@ @slawekkolodziej، @Timer، @styfle، @timneutkens، @ykzts @ashconnell @lunchboxav، @mohsen1، @akd-io، @justman00، @helloworld، @devknoll، @borekb، @ArthurMaverick، @sakitoSheden، @Takito21، @Taqito21، @Taqito21 @hallaji، @kettanaito، @vvo، @m-lautenbach، @jensmeindertsma، @Zeko369، @longlho، @stefanprobst، @laugharn، @sdornan، @daneroo، @mohd-akram، @austingmhuang، @sphilee، @ba,toing، @devineka @leader22، @paulogdm، @284km، @belgattitude، @geritol، @stigkj، @sampoder، @samrobbins85، @Pitasi، @digitalPlayer1125، @timfee، @plug-n-play، @philihp، @leerob، @rdumen، @Kywelan @zerbinidamata، @jamesgeorge007، @Jashnm و @futantan!