چه چیزی در Next.js 13 جدید است؟ – مجله Smashing

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

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

چه اطلاعات غلط

مانند همه نسخه‌های Next.js، چند API وجود دارد که به هسته پایدار و برای استفاده توصیه‌شده منتقل شده‌اند، و برخی دیگر هنوز در کانال آزمایشی هستند. APIهای “تجربی” هنوز مورد بحث هستند. عملکرد اصلی وجود دارد، اما سوال از این APIها چگونه رفتار می کنند و چگونه می توان از آنها استفاده کرد همچنان مستعد تغییر است زیرا ممکن است اشکالات یا عوارض جانبی غیرمنتظره وجود داشته باشد.

در نسخه 13، نسخه های آزمایشی بزرگ بودند و کانون توجه را به خود اختصاص دادند. این باعث شد که بسیاری از مردم کل نسخه را ناپایدار و آزمایشی بدانند – اما اینطور نیست. Next.js 13 در واقع کاملاً پایدار است و امکان ارتقای روان از نسخه 12 را فراهم می کند اگر قصد ندارید از هیچ API آزمایشی استفاده کنید. اکثر تغییرات را می توان به صورت تدریجی پذیرفت که در ادامه این پست به جزئیات آن خواهیم پرداخت.

خلاصه انتشار

قبل از اینکه عمیق‌تر در مورد هر اعلامیه تحقیق کنیم، بیایید فهرستی سریع را بررسی کنیم و آزمایش‌ها و ویژگی‌های پایدار را متعادل کنیم.

تجربی

• فهرست برنامه؛
• باندلر جدید (Turbopack);
• بهینه سازی فونت

پایدار

• مولفه تصویر “جدید” برای جایگزینی قدیمی Image جزء به عنوان پیش فرض؛
• پشتیبانی از ماژول ES برای next.config.mjs;
• “جدید” Link جزء.

فهرست برنامه

این ویژگی در واقع یک بازنویسی بزرگ معماری است. این React Server Components را در جلو و مرکز قرار می دهد، از یک سیستم مسیریابی کاملاً جدید و قلاب های روتر (تحت زیر next/navigation بجای next/router) و کل داستان واکشی داده را برگرداند.

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

در نتیجه، این تغییر مدل ذهنی بزرگی را در نحوه طراحی برنامه Next.js خود ایجاد می کند.

بیایید مقایسه کنیم که چگونه چیزها در فهرست برنامه کار می کنند. هنگام استفاده از /pages دایرکتوری (معماری که ما تاکنون از آن استفاده کرده ایم)، داده ها از سطح صفحه واکشی می شوند و به سمت اجزای برگ آبشاری می شوند.

در مقابل، با توجه به اینکه دایرکتوری برنامه توسط مؤلفه های سرور تأمین می شود، هر جزء مسئول داده های خود است، یعنی اکنون می توانید واکشی سپس رندر هر مؤلفه ای را که نیاز دارید و آنها را به صورت جداگانه ذخیره کرده و اجرا کنید بازسازی استاتیک افزایشی (ISR) در سطح بسیار دانه ای تر.

به‌علاوه، Next.js بهینه‌سازی‌ها را انجام خواهد داد: به لطف تغییر در نحوه درخواست، درخواست‌ها حذف می‌شوند (به اجزای مختلف اجازه نمی‌دهند یک درخواست را به صورت موازی اجرا کنند). fetch روش زمان اجرا با کش کار می کند. به طور پیش‌فرض، همه درخواست‌ها از اکتشافات کش قوی (“Force-cache”) استفاده می‌کنند که می‌توان از طریق پیکربندی از آن خارج شد.

درست خواندی Next.js و React Server Components هر دو با آن تداخل دارند fetch استاندارد به منظور ارائه بهینه سازی های واکشی منابع.

شما نیازی به رفتن به “All-In” ندارید

ذکر این نکته ضروری است که انتقال از /pages معماری به /app می تواند به صورت تدریجی انجام شود، و هر دو راه حل می توانند تا زمانی که مسیرها با هم تداخل نداشته باشند، همزیستی داشته باشند. در حال حاضر وجود دارد هیچ اشاره در نقشه راه Next.js درباره منسوخ شدن پشتیبانی از /pages.

خواندن توصیه می شود: ISR در مقابل DPR: کلمات بزرگ، توضیح سریع توسط کسیدی ویلیامز

باندلر و معیارهای جدید

از اولین انتشار خود، Next.js استفاده کرده است بسته وب در زیر کاپوت. امسال، نسل جدیدی از باندلرها را مشاهده کرده‌ایم که به زبان‌های سطح پایین نوشته شده‌اند، مانند ESBuild (که Vite را تامین می‌کند)، Parcel 2 (Rust) و غیره. ما همچنین شاهد آماده‌سازی Vercel برای تغییر بزرگ در Next.js بوده‌ایم. در نسخه 12 اضافه کردند SWC به فرآیند ساخت و انتقال آنها به عنوان گامی برای جایگزینی هر دو بابل و ترسر.

در نسخه 13، آنها Turbopack را معرفی کردند، باندلر جدیدی که در Rust با خیلی نوشته شده است ادعاهای عملکرد جسورانه. بله، در توییتر بحث‌هایی در مورد اینکه کدام باندلر سریع‌ترین است و این معیارها چگونه اندازه‌گیری شده‌اند، وجود داشته است. با این حال، این که Turbopack واقعاً چقدر می تواند به پروژه های بزرگ نوشته شده در Next.js با ارگونومی بهتر از هر ابزار دیگری (برای شروع، با پیکربندی داخلی) کمک کند، فراتر از بحث است.

این ویژگی نه تنها آزمایشی است، بلکه در واقع فقط با آن کار می کند next dev. شما نباید (و از هم اکنون نمی تواند ) از آن برای ساخت تولید استفاده کنید.

بهینه سازی فونت

جدید @next/font ماژول امکان بهینه سازی عملکرد فونت های وب خود را در طول زمان ساخت فراهم می کند. دارایی های فونت را در طول زمان ساخت بارگیری می کند و آنها را در خود میزبانی می کند /public پوشه این کار باعث صرفه جویی در سفر رفت و برگشت به سرور دیگری می شود، از دست دادن اضافی جلوگیری می کند، و در نهایت فونت شما را به سریع ترین شکل ممکن تحویل می دهد و آن را به درستی با بقیه منابع ذخیره می کند.

به یاد داشته باشید که هنگام استفاده از این بسته، مهم است که هنگام اجرای برنامه توسعه خود یک اتصال اینترنتی کارآمد داشته باشید تا بتواند آن را به درستی کش کند، در غیر این صورت اگر به فونت های سیستم بازگردد adjustFontFallback تنظیم نشده است.

علاوه بر این، @next/font دارای یک ماژول ویژه برای فونت های وب گوگل است که به راحتی در دسترس است زیرا آنها به طور گسترده استفاده می شوند:

import { Jost } from '@next/font/google';
// get an object with font styles:
const jost = Jost();
// define them in your component:
<html className={jost.className}>

ماژول همچنین در صورت استفاده از فونت های سفارشی کار می کند:

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}>

اگرچه این ویژگی هنوز در نسخه بتا است، اما به اندازه کافی پایدار در نظر گرفته می شود که بتوانید در تولید از آن استفاده کنید.

تصویر جدید و اجزای پیوند

مسلماً مهم‌ترین مؤلفه‌های بسته Next.js اصلاحات جزئی دریافت کرده‌اند. بعد Image از Next.js 12 اینچ زندگی دوگانه ای داشته است @next/image و @next/future/image. در Next.js 13، مؤلفه پیش‌فرض تغییر می‌کند:

• next/image حرکت می کند به next/legacy/image;
• next/future/image حرکت می کند به next/image.

این تغییر با یک کد مد همراه است، دستوری که سعی می‌کند کد را به طور خودکار در برنامه شما منتقل کند. این اجازه می دهد تا هنگام ارتقای Next.js، یک مهاجرت روان انجام شود:

npx @next/codemod next-image-to-legacy-image ./pages

اگر این تغییر را ایجاد کرده اید و تست های رگرسیون بصری را تنظیم نکرده اید، توصیه می کنم به صفحات خود در هر مرورگر اصلی نگاهی بیندازید تا ببینید آیا همه چیز درست به نظر می رسد.

برای مؤلفه پیوند جدید، تغییر نیز باید صاف باشد. این <a> عنصر درون <Link> ضروری نیست و نه توصیه می شود دیگر کد مود یا آن را حذف می کند یا a اضافه می کند legacyBehavior به مولفه خود کمک کنید.

npx @next/codemod new-link ./pages

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

ماژول های ES و انتقال خودکار ماژول

دو ارتقاء برای اکثراً تحت رادار قرار گرفته است، اما من آنها را در نظر می‌گیرم به ویژه برای افرادی که با Monorepos کار می کنند مفید است. تا به حال، اشتراک گذاری پیکربندی بین فایل های پیکربندی و سایر فایل هایی که ممکن است در زمان اجرا استفاده شوند، خیلی ارگونومیک نبود. به این دلیل است next.config.js با CommonJS به عنوان سیستم ماژول نوشته شده است، که نمی تواند از فایل های ESM وارد شود. اکنون Next.js به سادگی با افزودن از ESM پشتیبانی می کند type: "module" به شما package.json و تغییر نام next.config.js → next.config.mjs.

توجه داشته باشید: “m” مخفف “module” است و بخشی از مشخصات Node.js برای پشتیبانی از ESM است.

برای Monorepos که از بسته‌های داخلی استفاده می‌کند (بسته‌های جاوا اسکریپت که در NPM منتشر نمی‌شوند، اما در عوض توسط برنامه‌های خواهر و برادر در monorepo از منبع مصرف می‌شوند)، یک پلاگین ویژه برای انتقال آن ماژول‌ها در زمان ساخت هنگام مصرف آنها ضروری بود. از Next.js 13 به بعد، این را می توان بدون پلاگین مرتب کرد به سادگی با ارسال یک ویژگی (تجربی) به شما next.config.mjs:

const nextConfig = {
  experimental: {
    transpilePackages: ['@my-org/internal-package'],
  },
};

شما می توانید یک نمونه را در قالب Apex-Monorepo. با این تنظیمات، می‌توانید هم مؤلفه وابستگی و هم برنامه خود را به طور همزمان بدون انتشار یا راه‌حل توسعه دهید.

چه بعد?

اگر هنوز علاقه مند به بازی در اطراف و صحبت بیشتر در مورد این ویژگی ها هستید، من یک را اجرا خواهم کرد Advanced Next.js Masterclass از 30 نوامبر – 15 دسامبر 2022 – بسیار خوشحالم که در آنجا به شما خوش آمد بگویم و به همه سؤالات شما پاسخ دهم!

تا آن زمان، در نظرات زیر به من اطلاع دهید یا برای من توییت کنید @AtilaFassina در مورد چگونگی مهاجرت شما و افکار شما در مورد ویژگی های آزمایشی.

(vf، yk، il)