Next.js 12 | Next.js

همانطور که در Next.js Conf اعلام کردیم، Next.js 12 بزرگترین نسخه ما تاکنون است:

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

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

ما می‌خواهیم هر برنامه Next.js را سریع‌تر تولید کنیم و هنگام توسعه محلی، بازخورد فوری دریافت کنیم. Next.js 12 شامل یک کامپایلر کاملاً جدید Rust است که از کامپایل بومی بهره می برد.

کامپایلر Rust ما بر روی آن ساخته شده است SWC، یک پلت فرم باز برای نسل بعدی ابزارهای سریع. ما باندلینگ و کامپایل را با ~ بهینه کردیم3 برابر سریعتر به روز رسانی محلی و ~ساخت 5 برابر سریعتر برای تولید سایر پیشرفت ها و ویژگی ها عبارتند از:

• بهبود سرعت اضافی برای پایگاه های کد بزرگ: ما کامپایلر Rust را با برخی از بزرگترین پایگاه های کد Next.js در جهان تأیید کرده ایم.
• بهبود دید در عملکرد: Next.js اکنون زمان به‌روزرسانی سریع کنسول را برای ساخت‌های کلاینت و سرور، از جمله تعداد ماژول‌ها و فایل‌های کامپایل شده، خروجی می‌دهد.
• بهبودهای اصلی بسته وب: ما پیشرفت‌های زیادی را در بسته وب انجام داده‌ایم، از جمله بهینه‌سازی Fast Refresh و قابل اطمینان‌تر کردن ورودی‌های درخواستی.

کامپایل با استفاده از Rust است 17 برابر سریعتر از بابل و به طور پیش فرض با Next.js 12 فعال می شود و جایگزین فایل های جاوا اسکریپت و تایپ اسکریپت تبدیل می شود. این بدان معنی بود که ما باید تبدیل‌های Babel را در Next.js به Rust پورت می‌کردیم، از جمله a یک تجزیه کننده CSS کاملاً جدید در Rust برای اعمال استفاده می شود styled-jsx تبدیل کنید.

کامپایلر جدید Rust سازگار با عقب است. اگر پیکربندی Babel موجود دارید، به طور خودکار انصراف خواهید داد. ما برنامه هایی برای پورت تجزیه و تحلیل کتابخانه های محبوب مانند styled-components، emotion، و relay به زودی اگر از یک تنظیم سفارشی Babel استفاده می کنید، لطفاً پیکربندی خود را به اشتراک بگذارید.

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

module.exports = {
  swcMinify: true,
};

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

برای اطلاعات بیشتر، نسخه ی نمایشی ما را از Next.js Conf تماشا کنید.

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

میان افزار را می توان برای هر چیزی که منطق مجموعه صفحه را به اشتراک می گذارد، از جمله:

میان افزار از یک زمان اجرا دقیق استفاده می کند که از API های وب استاندارد مانند fetch. این کار خارج از جعبه با استفاده از next startو همچنین در پلتفرم های Edge مانند Vercel که از Edge Middleware استفاده می کنند.

برای استفاده از Middleware در Next.js، می توانید یک فایل ایجاد کنید pages/_middleware.js. در این مثال، ما از پاسخ استاندارد Web API (MDN) استفاده می کنیم:

export function middleware(req, ev) {
  return new Response('Hello, world!');
}

برای اطلاعات بیشتر، نسخه ی نمایشی ما را از Next.js Conf تماشا کنید و مستندات را بررسی کنید.

React 18 ویژگی‌هایی مانند Suspense، بسته‌بندی خودکار به‌روزرسانی، مانند API را اضافه می‌کند startTransitionو یک سرور جدید در حال ارائه API جریان با پشتیبانی از React.lazy.

ما در حال همکاری نزدیک با تیم React در فیس‌بوک هستیم تا Next.js را برای React 18 آماده کنیم، زیرا به سمت انتشار پایدار پیش می‌رود. ما این ویژگی‌ها را امروز در Next.js 12 تحت یک پرچم آزمایشی برای آزمایش در دسترس قرار می‌دهیم.

npm install react@alpha react-dom@alpha

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

ویژگی‌های همزمان React 18 شامل پشتیبانی داخلی از Suspense سمت سرور و پشتیبانی از جریان SSR است. این به شما امکان می دهد صفحات سمت سرور را با استفاده از جریان HTTP ارائه دهید. این یک ویژگی آزمایشی در Next.js 12 است، اما پس از فعال شدن، SSR از همان زمان اجرای سخت افزاری Middleware استفاده می کند.

برای فعال کردن، از پرچم آزمایشی استفاده کنید concurrentFeatures: true:

module.exports = {
  experimental: {
    concurrentFeatures: true,
  },
};

لینک را به عنوان کپی کنیداجزای سرور React

کامپوننت های React Server به ما این امکان را می دهند که همه چیز، از جمله خود مؤلفه ها را روی سرور مجسم کنیم. این اساساً با رندر سمت سرور متفاوت است، جایی که شما HTML را روی سرور از قبل تولید می کنید. با اجزای سرور وجود دارد هیچ جاوا اسکریپت سمت کلاینت مورد نیاز نیستکه باعث می شود صفحه سریعتر رندر شود. این تجربه کاربری برنامه شما را افزایش می دهد و بهترین بخش های رندر سمت سرور را با تعامل سمت سرویس گیرنده ترکیب می کند.

module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
};

Next.js اکنون به شما امکان می دهد تا استخراج داده را در آن انجام دهید سطح جزء، همه به صورت JSX بیان می شوند. با استفاده از اجزای React Server، می‌توانیم همه چیز را ساده نگه داریم. ویژگی های خاص مانند getServerSideProps یا getStaticProps دیگر مورد نیاز نیستند. این با مدل React Hooks برای واکشی مشترک داده ها با اجزای شما سازگار است.

می توانید نام هر صفحه Next.js را به آن تغییر دهید .server.js برای ایجاد یک جزء سرور و وارد کردن اجزای مشتری به طور مستقیم به اجزای سرور شما. این مؤلفه‌های مشتری هیدراته می‌شوند و تعاملی می‌شوند، بنابراین عملکردهایی مانند رأی مثبت را اضافه می‌کنید.

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

تشکر ویژه از همکاران ما کارا اریکسون و جرالد موناکو در تیم Google Aurora برای کارشان روی React 18 و اجزای سرور.

برای اطلاعات بیشتر، نسخه ی نمایشی ما را از Next.js Conf تماشا کنید و مستندات را بررسی کنید.

ماژول های ES یک سیستم ماژول رسمی و استاندارد را به جاوا اسکریپت معرفی می کنند. آنها توسط تمام مرورگرهای اصلی و همچنین Node.js پشتیبانی می شوند.

این استاندارد با فعال کردن اندازه بسته های کوچکتر و بسته های جاوا اسکریپت، اکوسیستم وب را به جلو می راند و در نهایت منجر به تجربه کاربری بهتر می شود. همانطور که اکوسیستم جاوا اسکریپت از Common JS (استاندارد قدیمی) به ماژول‌های ES تغییر می‌کند، ما متعهد هستیم که به توسعه‌دهندگان کمک کنیم به تدریج این پیشرفت‌ها را بدون تغییرات مزاحم غیرضروری اتخاذ کنند.

با شروع Next.js 11.1، ما پشتیبانی آزمایشی را برای ماژول‌های ES با اولویت نسبت به ماژول‌های CommonJS اضافه کردیم. در Next.js 12، این اکنون پیش فرض است. وارد کردن ماژول‌های NPM که فقط CommonJS را ارائه می‌کنند همچنان پشتیبانی می‌شود.

Next.js 12 شامل پشتیبانی آزمایشی برای وارد کردن ماژول‌های ES از طریق URL است، بدون نیاز به نصب یا مرحله ساخت جداگانه.

وارد کردن URL به شما امکان استفاده از آن را می دهد هر نوع بسته به طور مستقیم از طریق URL. این به Next.js اجازه می دهد تا منابع HTTP(S) راه دور را درست مانند وابستگی های محلی مدیریت کند.

اگر وارد کردن URL شناسایی شود، Next.js یک a را ایجاد می کند next.lock فایل ردیابی منبع از راه دور URL های وارد شده به صورت محلی ذخیره می شوند تا اطمینان حاصل شود که همچنان می توانید به صورت آفلاین کار کنید. Next.js از وارد کردن URL مشتری و سرور پشتیبانی می کند.

برای انتخاب، پیشوندهای URL مجاز را در داخل اضافه کنید next.config.js:

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev'],
  },
};

سپس می توانید ماژول ها را مستقیماً از URL ها وارد کنید:

import confetti from 'https://cdn.skypack.dev/canvas-confetti';

هر CDN که ماژول‌های ES را ارائه می‌کند، از جمله ابزارهای بدون کد و طراحی مانند Framer، کار خواهد کرد:

برای اطلاعات بیشتر، نسخه ی نمایشی ما را از Next.js Conf تماشا کنید و مستندات را بررسی کنید.

در حال حاضر، بازسازی تدریجی استاتیک با fallback: true قبل از ارائه محتوای صفحه در اولین درخواست به صفحه ای که هنوز ایجاد نشده است، یک حالت بازگشتی ارائه می دهد. برای جلوگیری از بارگذاری صفحه (رندر در سرور) باید از آن استفاده کنید fallback: 'blocking'.

در Next.js 12، خزنده های وب (به عنوان مثال ربات های جستجو) به طور خودکار صفحات ISR سرور را با استفاده از fallback: true، در حالی که هنوز رفتار حالت بازگشتی قبلی عوامل کاربر غیر خزنده را ارائه می دهد. این مانع از ایندکس کردن وضعیت بوت توسط ربات ها می شود.

API بهینه‌سازی تصویر داخلی اکنون از تصاویر AVIF پشتیبانی می‌کند و اجازه می‌دهد 20 درصد تصاویر کوچک‌تر در مقایسه با WebP داشته باشید.

بهینه سازی تصاویر AVIF نسبت به WebP بیشتر طول می کشد، بنابراین ما این ویژگی را با استفاده از ویژگی جدید فعال می کنیم images.formats ملک در next.config.js:

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

این لیست قالب برای تعیین فرمت تصویر بهینه شده در صورت درخواست با استفاده از پرس و جو استفاده می شود Accept هدر از آنجایی که AVIF اولین است، اگر مرورگر از AVIF پشتیبانی کند، ارائه می شود. در غیر این صورت، اگر مرورگر از WebP پشتیبانی کند، WebP ارائه خواهد شد. اگر هیچ یک از فرمت‌ها پشتیبانی نشود، فرمت تصویر اصلی ارائه می‌شود.

در Next.js 8 را معرفی کردیم target گزینه این اجازه می دهد تا صفحات Next.js به عنوان بسته های جاوا اسکریپت مستقل با بسته بندی همه وابستگی ها با استفاده از بسته وب در زمان ساخت، ارائه شوند. ما به سرعت متوجه شدیم که این ایده آل نیست و به جای آن یکی را ایجاد کردیم @vercel/nft. @vercel/nft برای بیش از 2 سال برای همه استقرار پلت فرم Vercel استفاده شده است.

ما اکنون این پیشرفت‌ها را مستقیماً در چارچوب پیش‌فرض Next.js آورده‌ایم، برای همه پلتفرم های استقرار، ارائه یک رویکرد بهبود یافته قابل توجه به target گزینه

Next.js 12 به طور خودکار فایل های مورد نیاز برای هر صفحه و مسیر API را ردیابی می کند @vercel/nftو این نتایج ردیابی را به خروجی می دهد next build خروجی، به یکپارچه‌سازها اجازه می‌دهد از ردیابی‌هایی که Next.js به صورت خودکار ارائه می‌کند استفاده کنند.

این تغییرات همچنین برنامه هایی را که با استفاده از ابزارهایی مانند Docker از طریق استفاده می شوند، بهینه می کند next start. از طریق اهرم @vercel/nft، در آینده می توانیم خروجی Next.js را مستقل کنیم. برای اجرای برنامه نیازی به نصب هیچ وابستگی نیست، که به میزان قابل توجهی اندازه تصویر Docker را کاهش می دهد.

آوردن @vercel/nft در Next.js جایگزین می شود target نزدیک شدن، انجام دادن target در Next.js 12 منسوخ شده است. برای اطلاعات بیشتر به مستندات مراجعه کنید.

• اضافه کنید pages/_app.js یا pages/_document.js به برنامه شما اکنون به طور خودکار نسخه داخلی را بدون نیاز به راه اندازی مجدد Next.js CLI جایگزین می کند.
• ادغام ESLint اکنون از لینتینگ تک فایل پشتیبانی می کند next lint با --file پرچم
• Next.js 12 اکنون از تنظیم سفارشی پشتیبانی می کند tsconfig.json راه
• next.config.mjs اکنون برای نوشتن پیکربندی به عنوان ماژول های ES پشتیبانی می شود.
• درخواست‌های حین پرواز اکنون برای getStaticProps حذف شده‌اند.
• بررسی صفحات استاتیک اکنون با استفاده از یک مجموعه مشترک از فایل های کاری انجام می شود.
• Fast Refresh اکنون از اتصال WebSocket به جای اتصال EventSource استفاده می کند.

• پس از اینکه وب‌پک 5 را به‌طور پیش‌فرض در Next.js 11 قرار دادیم، اکنون وب‌پک 4 را به‌طور رسمی حذف کرده‌ایم. ما از نزدیک با جامعه کار می‌کنیم تا انتقال آرام به وب‌پک 5 را تضمین کنیم.
• target ج next.config.js دیگر لازم نیست
• next/image اکنون از a استفاده می کند span به عنوان یک لفاف به جای a div.
• حداقل نسخه Node.js از آن حذف شده است 12.0.0 به 12.22.0که اولین نسخه Node.js با پشتیبانی از ماژول بومی ES است.

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

پنج سال پیش، Next.js را برای عموم منتشر کردیم. ما قصد داریم یک چارچوب React با پیکربندی صفر بسازیم که تجربه توسعه دهنده شما را ساده می کند. با نگاهی به گذشته، شگفت‌انگیز است که ببینیم جامعه چگونه رشد کرده است و چه چیزی توانسته‌ایم با هم ارسال کنیم. ادامه دهیم.

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

این نسخه توسط مشارکت‌های زیر برای شما آورده شده است: @ka2n، @housseindjirdeh، @rojserbest، @lobsterkatie، @thibautsabot، @javivelasco، @sokra، @rishabhpoddar، @kdy1، @huozhi، @georgegach، @ionut-botizan، @paul-kimik, @dev, @paul-Butizan، @paul-Butizan، @dev. @matamatanot، @christianvuerings، @pgrodrigues، @mohamedbhy، @AlfonzAlfonz، @kara، @molebox، @angelopoole، @oste، @genetschneider، @jantimon، @kyliau، @mxschmitt، @PhattOZ، @finn-orsyolhem, @finn-orsyolhem @GustavoEdinger، @AryanBeezadhur، @Blevs، @colevscode، @atcastle، @ijjk، @velocity23، @jonowu، @timneutkens، @whitep4nth3r، @micro-chipset، @TyMick، @padmaia، @arthurdenner، @arthurdenner، @kerthurdenner @. @kylemh، @Bundy-Mundi، @ctjlewis، @thien-do، @leerob، @Dev-CasperTheGhost، @janicklas-ralph، @rezathematic، @KonstHardy، @fracture91، @lorensr، @Sheraff، @HaNdTriX، @HaNdTriX، @emilio @,4col, @emilio @. @volcareso، @oiva، @sinchang، @scottrepreneur، @smakosh، @catnose99، @adrienharnay، @donsn، @andersonleite، @msp5382، @tim-hanssen، @appsplash99، @alexvilchis، @RobEasthope، @rmryck، @Proyal، @rm-Obly، @rm. @buraksakalli، @espipj، @prateekbh، @AleksaC، @eungyeole و @rgabs