Next.js 9.3 | Next.js

امروز ما مشتاق معرفی Next.js 9.3 هستیم که شامل موارد زیر است:

همه این مزایا یکپارچه و کاملاً با عقب سازگار هستند. تنها کاری که برای به روز رسانی باید انجام دهید این است که:

npm i next@latest react@latest react-dom@latest

لینک را به عنوان کپی کنیدپشتیبانی از نسل بعدی سایت استاتیک (SSG).

هنگام ساخت وب سایت یا برنامه های کاربردی وب، معمولاً باید بین 2 استراتژی یکی را انتخاب کنید: تولید استاتیک (SSG) یا رندر سمت سرور (SSR).

Next.js اولین فریم ورک ترکیبی است که به شما امکان می‌دهد تکنیکی را انتخاب کنید که به بهترین وجه مناسب مورد استفاده شما در هر صفحه باشد.

Next.js 9.0 مفهوم بهینه سازی استاتیک خودکار را معرفی کرد. هنگامی که صفحه ای برای مسدود کردن استخراج داده ها نیازی ندارد getInitialProps، در زمان ساخت به طور خودکار در HTML ارائه می شود.

موارد بیشتری وجود دارد که ممکن است بخواهید یک صفحه را در زمان ساخت، حتی با الزامات مسدود کردن واکشی داده، در HTML ایستا رندر کنید. نمونه ای از این صفحات بازاریابی است که توسط یک سیستم مدیریت محتوا (بی سر) طراحی شده است (CMS) یا بخش وبلاگ سایت.

ما با کاربران سنگین SSG و next export مانند HashiCorp و به طور گسترده در مورد محدودیت‌های صحیح با جامعه در RFC با بیشترین نظر در تاریخ Next.js بحث کرد تا یک راه واحد جدید برای استخراج داده و تولید استاتیک ایجاد کند.

امروز ما بسیار هیجان زده هستیم تا دو روش جدید داده کاوی را معرفی کنیم: getStaticProps و getServerSideProps. ما همچنین راهی برای ارائه پارامترهایی برای تولید صفحات استاتیک برای مسیرهای پویا در نظر گرفته ایم: getStaticPaths.

این روش های جدید مزایای زیادی نسبت به آن دارند getInitialProps مدل به عنوان یک تمایز واضح بین آنچه که تبدیل به SSG و SSR می شود وجود دارد.

• getStaticProps (Static Generation): بازیابی اطلاعات از زمان ساخت.

• getStaticPaths (Static Generation): مسیرهای پیش رندر پویا را بر اساس داده ها مشخص کنید.

• getServerSideProps (Server-Side Rendering): واکشی داده ها فعال است هر درخواستی.

• این پیشرفت‌ها افزوده‌هایی به API هستند. همه عملکردهای جدید کاملاً با عقب سازگار هستند و می توان آنها را به صورت تدریجی اتخاذ کرد. بدون استهلاک معرفی شده و getInitialProps به عملکرد فعلی خود ادامه خواهد داد. ما اتخاذ این روش های جدید را در صفحات و پروژه های جدید تشویق می کنیم.

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

اگر شما صادر می کنید async تابع نامیده می شود getStaticProps از یک صفحه، Next.js آن صفحه را در حین ساخت از قبل رندر می کند. این به ویژه زمانی مفید است که می خواهید صفحات ثابت خاصی را از یک CMS ارائه دهید.

getStaticProps همیشه در زمینه Node.js اجرا می‌شود و کد به‌طور خودکار از بسته‌های مرورگر تکان می‌خورد و اطمینان حاصل می‌کند که کد کمتری به مرورگر ارسال می‌شود. به این ترتیب، لازم نیست نگران اجرای کد استخراج داده در هر دو محیط Node.js و مرورگر با ناهماهنگی باشید.

این به شما امکان می دهد از هر تکنیک بازیابی داده های ناهمزمان یا حتی همزمان استفاده کنید، از جمله fetch، REST، GraphQL یا حتی دسترسی مستقیم به پایگاه داده.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

را context پارامتر یک شی حاوی کلیدهای زیر است:

• params: params شامل پارامترهای مسیر برای صفحاتی که از مسیرهای پویا استفاده می کنند. به عنوان مثال، اگر نام صفحه است [id].js ، سپس params به نظر خواهد رسید { id: ... }. برای کسب اطلاعات بیشتر، به مستندات مسیریابی پویا مراجعه کنید. شما باید از این به همراه استفاده کنید getStaticPaths، که در ادامه توضیح خواهیم داد.

در اینجا مثالی است که او استفاده می کند getStaticProps برای بازیابی لیستی از پست های وبلاگ از CMS:

// You can use any data fetching library
import fetch from 'node-fetch';
 
// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    ul>
      {posts.map((post) => (
        li>{post.title}li>
      ))}
    ul>
  );
}
 
// This function gets called at build time in the Node.js environment.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  const res = await fetch('https://.../posts');
  const posts = await res.json();
 
  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  };
}
 
export default Blog;

لینک را به عنوان کپی کنیدچه زمانی باید از getStaticProps استفاده کنم؟

شما باید استفاده کنید getStaticProps اگر:

• داده های مورد نیاز برای ارائه صفحه در زمان ساخت قبل از درخواست کاربر در دسترس است.
• داده ها از یک CMS بدون هد می آیند.
• داده ها را می توان به صورت عمومی ذخیره کرد (نه خاص کاربر).
• صفحه باید از قبل رندر شود (برای سئو) و بسیار سریع – getStaticProps فایل‌های HTML و JSON را تولید می‌کند، که هر دو می‌توانند برای عملکرد توسط CDN کش شوند.

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

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

اگر صفحه ای مسیرها و کاربردهای پویا دارد getStaticProps باید لیستی از مسیرهایی که باید در زمان کامپایل به HTML ارائه شوند را تعریف کند.

اگر شما صادر می کنید async تابع نامیده می شود getStaticPaths از صفحه‌ای که از مسیرهای پویا استفاده می‌کند، Next.js تمام مسیرهای مشخص‌شده توسط getStaticPaths.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } } // See the "paths" section below
    ],
    fallback: true or false // See the "fallback" section below
  };
}

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

کلید paths مشخص می کند که کدام مسیرها از قبل رندر شوند. برای مثال، فرض کنید صفحه ای دارید که از مسیرهای پویا با نام استفاده می کند pages/posts/[id].js. اگر صادرات دارید getStaticPaths از این صفحه و مسیرهای زیر را برمی گرداند:

return {
  paths: [
    { params: { id: 1 } },
    { params: { id: 2 } }
  ],
  fallback: ...
}

سپس Next.js به صورت ایستا تولید خواهد شد posts/1 و posts/2 در زمان ساخت با استفاده از کامپوننت صفحه در pages/posts/[id].js.

توجه داشته باشید که مقدار برای هر یک params باید با پارامترهای استفاده شده در نام صفحه مطابقت داشته باشد:

• اگر نام صفحه است pages/posts/[postId]/[commentId]، سپس params باید حاوی postId و commentId.
• اگر نام صفحه از مسیرهای scope-all استفاده می کند، برای مثال، pages/[...slug]، سپس params باید حاوی slug که یک آرایه است. برای مثال، اگر این آرایه باشد ['foo', 'bar']، سپس Next.js صفحه را به صورت ایستا تولید می کند /foo/bar.

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

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

لینک را به عنوان کپی کنیدبازگشت: نادرست

اگر fallback است false، سپس تمام مسیرها توسط بازگشت داده نشده است getStaticPaths منجر به الف خواهد شد صفحه 404. اگر بدانید همه مسیرها در زمان ساخت شناخته می شوند، مفید است.

در اینجا نمونه ای وجود دارد که یک پست وبلاگ را در صفحه ای به نام از قبل ارائه می کند pages/posts/[id].js. لیست پست های وبلاگ از CMS بازیابی شده و توسط سازمان بازگردانده می شود getStaticPaths . سپس، برای هر صفحه، داده های پست را با استفاده از CMS بازیابی می کند getStaticProps.

import fetch from 'node-fetch';
 
function Post({ post }) {
  // Render post...
}
 
// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts');
  const posts = await res.json();
 
  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => `/posts/${post.id}`);
 
  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}
 
// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`);
  const post = await res.json();
 
  // Pass post data to the page via props
  return { props: { post } };
}
 
export default Post;

لینک را به عنوان کپی کنیدبازگشت: درست است

اگر fallback است true، سپس رفتار از getStaticProps تغییرات، Next.js مسیرهای ارائه شده را در HTML در حین ساخت رندر می کند. هنگامی که مسیر در زمان کامپایل ایجاد نمی شود، زمانی که کاربر صفحه را درخواست می کند، در صورت تقاضا ایجاد می شود.

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

کاربری که تولید صفحه را راه‌اندازی می‌کند، یک HTML بازگشتی دریافت می‌کند که معمولاً یک صفحه حالت بارگیری است. دلیل این امر این است که HTML ایستا را می توان از CDN ارائه کرد، که تضمین می کند صفحه همیشه سریع است، حتی زمانی که هنوز تولید نشده است.

نمونه ای از ایجاد صفحات اضافی به صورت ایستا در صورت تقاضا:

import { useRouter } from 'next/router';
import fetch from 'node-fetch';
 
function Post({ post }) {
  const router = useRouter();
 
  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running
  if (router.isFallback) {
    return div>Loading...div>;
  }
 
  // Render post...
}
 
// This function gets called at build time
export async function getStaticPaths() {
  return {
    // Only `/posts/1` and `/posts/2` are generated at build time
    paths: [{ params: { id: 1 } }, { params: { id: 2 } }],
    // Enable statically generating additional pages
    // For example: `/posts/3`
    fallback: true,
  };
}
 
// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`);
  const post = await res.json();
 
  // Pass post data to the page via props
  return { props: { post } };
}
 
export default Post;

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

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

اگر شما صادر می کنید async تابع نامیده می شود getServerSideProps از یک صفحه، Next.js آن صفحه را در هر درخواست (SSR) ارائه می کند.

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

این به شما امکان می دهد از هر تکنیک بازیابی داده های ناهمزمان یا حتی همزمان استفاده کنید، از جمله fetch، REST، GraphQL یا حتی دسترسی مستقیم به پایگاه داده.

هنگام پیمایش بین صفحات، استفاده کنید next/link به جای اجرا getServerSideProps در مرورگر، Next.js یک واکشی روی سرور انجام می دهد که نتیجه تماس را برمی گرداند getServerSideProps.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

را context پارامتر یک شی حاوی کلیدهای زیر است:

در اینجا مثالی است که او استفاده می کند getServerSideProps برای واکشی داده ها در حین پرس و جو و رندر:

function Page({ data }) {
  // Render data...
}
 
// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`);
  const data = await res.json();
 
  // Pass data to the page via props
  return { props: { data } };
}
 
export default Page;

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

همانطور که قبلا در این پست بحث شد، تولید استاتیک زمانی مفید است که صفحات شما داده ها را از یک CMS بدون هد بیرون می کشند. با این حال، زمانی که در حال تهیه پیش‌نویس CMS خود بدون هدر هستید و می‌خواهید پیش‌نویس را فوراً در صفحه خود پیش‌نمایش کنید، ایده‌آل نیست. از آنجایی که خروجی ثابت است، بررسی تغییرات دشوارتر می شود، زیرا باید دوباره این صفحه ثابت را ایجاد کنید.

The introduction of getStaticProps در Next.js امکانات جدیدی مانند استفاده از قابلیت‌های رندر درخواستی Next.js در شرایط خاص را باز می‌کند.

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

ما خوشحالیم که یک ویژگی داخلی جدید Next.js را برای رفع این نیاز اعلام می کنیم: حالت پیش نمایش.

حالت پیش‌نمایش به کاربران اجازه می‌دهد تا صفحه ایجاد شده به صورت ایستا را دور بزنند تا در صورت تقاضا (SSR) یک صفحه پیش‌نویس، به عنوان مثال از یک CMS، ارائه دهند.

با این حال، شما فقط به سیستم های CMS خاصی محدود نمی شوید. حالت پیش نمایش به طور مستقیم با هر دو ادغام می شود getStaticProps و getServerSideProps بنابراین می توان آن را با هر نوع راه حل داده کاوی استفاده کرد.

حالت پیش نمایش اکنون در حال استفاده است next startیا با استقرار یکپارچه در شبکه Vercel Edge.

خودتان آن را در حالت پیش نمایش در https://next-preview.vercel.app/ امتحان کنید

با مرور مستندات، درباره حالت پیش نمایش بیشتر بیاموزید.

getStaticProps به شما امکان می دهد داده ها را از هر منبع داده، از جمله سیستم های CMS استخراج کنید

ما فعالانه با بسیاری از بازیگران کلیدی در اکوسیستم CMS همکاری می کنیم تا مثال ها و راهنماهایی برای ادغام با Next.js ارائه کنیم.

نمونه هایی که در حال حاضر فعالانه روی آنها کار می شود عبارتند از:

اگر شرکت شما در اکوسیستم CMS فعال است، ما دوست داریم با شما همکاری کنیم! از طریق ایمیل یا با تیم ما تماس بگیرید توییتر.

لینک را به عنوان کپی کنیدپشتیبانی داخلی Sass برای استایل شیت های جهانی

Next.js 9.2 پشتیبانی داخلی را برای جایگزینی شیت های جهانی CSS معرفی کرد next-css افزونه با تنظیمات پیش فرض بهتر برای ارائه نتیجه بهینه تر.

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

در بررسی استفاده از افزونه Next.js، متوجه شدیم که تقریباً 30 درصد از برنامه های Next.js از آن استفاده می کنند. next-sass امروز در مقایسه با 44% استفاده از وانیل CSS و 6% استفاده از Less.

علاوه بر این next-sass همان محدودیت های گمشده را داشت next-css. این بدان معنی است که شما می توانید یک فایل Sass را در هر فایل پروژه ای وارد کنید، اما آن فایل Sass وارد شده برای کل برنامه جهانی خواهد بود.

پس از بررسی این آمار و بازخورد، خوشحالیم که اعلام کنیم Next.js اکنون پشتیبانی داخلی برای وارد کردن stylesheets Sass دارد.

برای شروع استفاده از واردات جهانی Sass در برنامه خود، آن را نصب کنید sass:

سپس فایل Sass را داخل آن وارد کنید pages/_app.js.

برای مثال، شیوه نامه زیر را با نام در نظر بگیرید styles.scss در ریشه پروژه شما:

$primary-color: #333;
 
body {
  padding: 20px 20px 60px;
  margin: 0;
  color: $primary-color;
}

ایجاد یک pages/_app.js فایل در صورتی که قبلا موجود نیست. سپس وارد کنید styles.scss فایل:

import '../styles.scss';
 
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return Component {...pageProps} />;
}

از آنجایی که شیوه نامه ها ماهیت جهانی دارند، باید به Custom وارد شوند جزء این برای جلوگیری از تضاد نام کلاس و سفارش برای سبک های جهانی ضروری است.

در توسعه، بیان شیوه نامه‌ها به این امکان را می‌دهد که سبک‌های شما به‌طور خودکار در صفحه به‌روزرسانی شوند.

در تولید، تمام فایل‌های Sass و CSS به‌طور خودکار در یک Minified الحاق می‌شوند .css فایل این فایل CSS از طریق a بارگذاری می شود برچسب و به طور خودکار به نشانه گذاری پیش فرض HTML Next.js ایجاد می کند.

این ویژگی جدید کاملاً با عقب سازگار است. اگر استفاده می کنید @zeit/next-sass یا سایر پلاگین های مرتبط با CSS این ویژگی برای جلوگیری از تداخل غیرفعال است.

اگر در حال حاضر استفاده می کنید @zeit/next-sass توصیه می کنیم افزونه را از خود حذف کنید next.config.js و package.json، بنابراین پس از ارتقاء به پشتیبانی داخلی Sass منتقل می شود.

لینک را به عنوان کپی کنیدپشتیبانی از ماژول Sass CSS داخلی برای سبک‌های سطح مؤلفه

Next.js اکنون از ماژول های CSS با فایل های Sass با استفاده از [name].module.scss قرارداد نامگذاری فایل

برخلاف پشتیبانی که قبلاً در Next.js 5+ استفاده می‌شد next-sass، ماژول های جهانی Sass و CSS اکنون می توانند همزیستی – next-sass به همه نیاز دارد .scss فایل های موجود در برنامه شما به صورت جهانی یا محلی مدیریت می شوند، اما نه هر دو.

ماژول‌های CSS به صورت محلی با ایجاد نام‌های کلاس منحصر به فرد، Sass را تحت پوشش قرار می‌دهند. این به شما این امکان را می دهد که از نام کلاس Sass یکسان در فایل های مختلف بدون نگرانی در مورد برخورد استفاده کنید.

این رفتار ماژول‌های CSS را به روشی ایده‌آل برای گنجاندن Sass در سطح مؤلفه تبدیل می‌کند. فایل های ماژول CSS را می توان در هر نقطه از برنامه شما وارد کرد.

برای شروع استفاده از Sass CSS Modules در برنامه خود، مطمئن شوید که آنها را دارید sass نصب شده:

اکنون قابلیت استفاده مجدد را در نظر بگیرید Button جزء ج components/ پوشه:

ابتدا ایجاد کنید components/Button.module.scss با محتوای زیر:

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
$color: white;
 
.error {
  color: $color;
  background-color: red;
}

سپس ایجاد کنید components/Button.js، وارد کردن و استفاده از فایل CSS بالا:

import styles from './Button.module.scss';
 
export function Button() {
  return (
    button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    button>
  );
}

ماژول های CSS برای فایل های Sass هستند به میل خود و فقط برای فایل هایی با .module.scss پسوند. منظم شیوه نامه ها و سبک های جهانی Sass هنوز پشتیبانی می شوند.

در تولید، تمام فایل‌های ماژول CSS به‌طور خودکار به یکدیگر متصل می‌شوند بسیار کوچک و کد جدا شده است .css فایل ها. اینها .css فایل‌ها مسیرهای اجرای داغ را در برنامه شما نشان می‌دهند، و اطمینان حاصل می‌کنند که حداقل مقدار CSS در هر صفحه برای نقاشی برنامه شما بارگذاری می‌شود.

مانند بالا، این ویژگی جدید کاملاً با عقب سازگار است. اگر استفاده می کنید @zeit/next-sass یا سایر افزونه های مرتبط با CSS، این ویژگی برای جلوگیری از تداخل غیرفعال است.

اگر در حال حاضر استفاده می کنید @zeit/next-sass توصیه می کنیم افزونه را از خود حذف کنید next.config.js و package.json، بنابراین به پشتیبانی داخلی Sass تغییر می کند.

نسخه Next.js 9 مفهوم بهینه‌سازی استاتیک خودکار را زمانی که صفحه‌ای نیازی به مسدود کردن داده ندارد، معرفی کرد. Next.js به طور خودکار صفحه را به عنوان HTML ایستا در طول ساخت تولید می کند. با این حال، یک صفحه وجود داشت که به طور خودکار به عنوان HTML ایستا ارائه نمی شد: صفحه 404. دلیل اصلی ثابت نبودن خودکار صفحه 404 این است /_error صفحه تغذیه 404 بیش از 404 را مدیریت می کرد، مثلاً خطاها.

با توجه به اینکه 404 صفحه برای مسیرهایی که وجود ندارند رندر می شوند، رندر کردن صفحه در صورت تقاضا می تواند منجر به افزایش سربار و بار سرور شود.

ما تصمیم گرفتیم شما را از دو طریق در گودال موفقیت قرار دهیم:

• تلاش پیش‌فرض Next.js یک صفحه ثابت 404 ایجاد می‌کند
• هنگامی که صفحه 404 را سفارشی می کنید، همچنان تضمین می کند که یک صفحه ثابت دریافت خواهید کرد

این ویژگی کاملاً با عقب سازگار است، بنابراین اگر در حال حاضر یک سفارشی دارید pages/_error.js برای صفحه 404 استفاده خواهد شد تا زمانی که اضافه کنید pages/404.js.

لینک را به عنوان کپی کنیدصفحه Static 404 به طور پیش فرض

وقتی برنامه شما سفارشی ندارد pages/_error.js صفحه Next.js به طور خودکار صفحه 404 را تولید می کند و زمانی که یک 404 باید ارائه شود از آن استفاده می کند. این کار به صورت خودکار انجام می شود و نیازی به تغییر نیست.

لینک را به عنوان کپی کنیدصفحه سفارشی 404 با استفاده از pages/404.js

برای جایگزینی صفحه پیش فرض 404، اکنون می توانید a ایجاد کنید pages/404.js که همچنان به صورت خودکار در زمان ساخت بهینه سازی می شود. به جای آن از این صفحه استفاده می شود pages/_error.js برای نمایش 404 در صورتی که برنامه شما دارای آن باشد.

export default () => h1>This is the 404 pageh1>;

Next.js از همان مرورگرهای خود React پشتیبانی می کند، بدون نیاز به پیکربندی. این شامل اینترنت اکسپلورر 11 (IE11) و تمام مرورگرهای محبوب (Edge، فایرفاکس، کروم، سافاری، اپرا و غیره) می شود.

به عنوان بخشی از این سازگاری، ما همچنین برنامه شما را برای سازگاری با IE11 کامپایل می کنیم: این به شما امکان می دهد با خیال راحت از ویژگی های نحوی ES6+، Async/Await، Object Rest/Spread Properties و غیره استفاده کنید – همه بدون نیاز به پیکربندی.

بخشی از این فرآیند کامپایل نیز شامل تزریق شفاف پلی‌فیل‌های تابع لازم (به عنوان مثال. Array.from یا Symbol). با این حال، این پلی‌فیل‌ها فقط برای کمتر از 10 درصد از ترافیک وب، بیشتر برای پشتیبانی از IE11 مورد نیاز هستند.

با شروع با Next.js 9.3، Next.js به طور خودکار پلی فایل های مورد نیاز برای پشتیبانی از مرورگرهای قدیمی را بارگیری می کند و پلی فایل ها را فقط در آن مرورگرهای قدیمی بارگیری می کند.

در عمل، این بدان معنی است که 32 کیلوبایت یا بیشتر از شما حذف می شود شارژ اول اندازه برای بیش از 90٪ از کاربران شما.

این صرفه جویی در اندازه برای برنامه های بزرگتر که به ویژگی های مرورگر حتی بیشتر متکی هستند حتی بیشتر است.

این بهینه سازی کاملا اتوماتیک است و برای استفاده از آن نیازی به تغییر اپلیکیشن نیست!

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

• خرج کردیم 927 مشارکت کنندگان مستقل
• این پروژه در GitHub ستاره دار است 46600 بارها
• دایرکتوری نمونه به پایان رسیده است 226 نمونه

انجمن Next.js اکنون به پایان رسیده است 15250 اعضا اکنون می‌توانید انجمن را در بحث‌های GitHub پیدا کنید، مکانی جدید برای بحث و پرسش در انجمن! به ما بپیوندید

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

تشکر ویژه از جف اسکالانته برای بازخورد قابل توجه در مورد روش های جدید داده کاوی.

با تشکر فراوان از همه کسانی که در این نسخه مشارکت کردند: @arcanis، @lgordey، @ijjk، @martpie، @jaywink، @fabianishere، @dijs، @TheRusskiy، @quinnturner، @timneutkens، @lfades، @vvo، @adithwip، @rafaealmealme@k @EvgeniyKumachev، @chibicode، @piglovesyou، @HaNdTriX، @Timer، @janicklas-ralph، @devknoll، @prateekbh، @ethanryan، @MoOx، @rifaidev، @msweeneydev، @motiko و @balazsorban44 برای کمک!