Next.js 13 مجموعهای از ویژگیهای جدید از جمله باندلر جدید Turbopack، پشتیبانی از React Server Components و موارد دیگر را به ارمغان میآورد. بیایید با Next.js 13 شروع کنیم.
- باندلر جدید Turbopack
- استفاده از Turbopack در Next.js 13
- دایرکتوری /app جدید
- Layouts در Next.js 13
- مولفههای سرور React
- پرداخت جریانی و تعلیق
- کنوانسیون بارگیری جدید
- واکشی بهتر داده در Next.js 13
- نتیجهگیری
Next.js مانند React با مزایا است، زیرا تمام ویژگیهای React را با قراردادهای سهولت استفاده و یک پشته مشتری-سرور کاملاً تعریف شده ارائه میدهد. Next.js 13 جدیدترین نسخه است که توسط Vercel در کنفرانس Next.js در اکتبر ۲۰۲۲ منتشر شد. مجموعهای از ویژگیهای جدید، از جمله باندلری به نام Turbopack و پشتیبانی از چندین بهینهسازی React incubated مانند React Server Components و رندر جریان.
همه گفته شد، Next.js 13 یک نقطه عطف مهم است، که پیشرفتهای React و Next را در یک بسته تجربه توسعهدهنده قابل استفاده خوشایند گرد هم میآورد. این نسخه همچنین دارای بهینه سازی قابل توجهی در پشت صحنه است. بیایید گشتی در موارد جدید در Next.js 13 داشته باشیم.
باندلر جدید Turbopack
Turbopack یک باندلر جدید جاوا اسکریپت همه منظوره و یک ویژگی اصلی در Next.js 13 است. در نظر گرفته شده است به عنوان یک جایگزین Webpack، و اگرچه به صورت آلفا منتشر شده است، اکنون میتوانید از Turbopack به عنوان بستهکننده حالت توسعهدهنده از Next.js 13 به جلو استفاده کنید. Turbopack یک شرکت جدید در رقابت باندلر است، جایی که چندین مدعی برای غلبه بر تسلط Webpack با هم رقابت کرده اند.
Turbopack و Turborepo
در جهان Vercel، Turbopack خواهر و برادر Turborepo است. آنها با هم، دو سنگ بنای تلاشهای سیستممحور Vercel برای تکامل ابزارهای جلویی را تشکیل میدهند. Turbopack بستهکننده است و Turborepo ابزار ساخت monorepo است.
Turbopack با Rust نوشته شده است، که به نظر میرسد این روزها برای ابزارهای سیستمگرا گزینهای است. سرعت ذاتی Rust یکی از دلایل زیربنای عملکرد Turborepo در مقایسه با سایر ابزارهای ساخت است. (Rust چیزی شبیه ++C است ، اما با ایمنی بیشتر حافظه Vite به زبان Go نوشته شده است، زبانی شبیه به Rust. اما به نظر می رسد Rust در کارایی برتری دارد .
Turbopack همچنین دارای تغییرات معماری مانند استفاده هوشمندانه از حافظه پنهان است که مدیریت تغییرات منبع را به روشی بهینه بهبود می بخشد. فرض اصلی این است که Turbopack یک مدل دانهبندی از تغییراتی که قبلاً ساخته شدهاند را در اختیار دارد و فقط آنهایی را میسازد که برای انعکاس تغییرات در حال انجام لازم هستند.
از زمانی که Webpack برای اولین بار دنیای جاوا اسکریپت را با مفهوم ساخت خط لوله همهجانبه با پیکربندی قراردادی آشنا کرد، رقابت برای اینکه ببینیم چه کسی میتواند بهترین ابزار بستهبندی جاوا اسکریپت را توسعه دهد وجود داشته است. توسعهدهندگان سریعترین و با ویژگیهای غنیترین ابزاری را میخواهند که میتوانند پیدا کنند، که بتواند با موارد لبه برخورد کند و مسیرهای شاد را با کمترین سر و صدا انجام دهد.
آینده Turbopack
Turbopack به صورت آلفا عرضه شده است و این وعده را می دهد که انتخاب نسل بعدی برای بسته بندی جاوا اسکریپت باشد. زمان مشخص خواهد کرد، اما مطمئناً شجره نامه دارد. Turbopack نه تنها توسط Vercel و باندلر رسمی Next.js در آینده پشتیبانی می شود، بلکه سازنده Webpack، Tobias است. Koppers، به شدت درگیر در Turbopack است. هر توسعهدهندهای احساس میکند که میخواهد نرمافزار خود را بر اساس چیزهایی که با نوشتن اولین بار یاد گرفتهاند، بازنویسی کند، و Turbopack چنین برنامهای است.
استفاده از Turbopack در Next.js 13
ایجاد یک برنامه Next.js جدید از طریق create-next-app
و استفاده از Turbopack آسان است. شما از سوئیچ --example
استفاده می کنید و آرگومان with-turbopack
را همانطور که در فهرست ۱ نشان داده شده است به آن می دهید.
npx create-next-app --example with-turbopack
اگر به package.json
نگاه کنید، خواهید دید که این در یک تغییر کوچک در نحوه عملکرد اسکریپت dev
منعکس شده است:
"dev": "next dev --turbo"
Turbopack در حال حاضر به عنوان جایگزینی برای سرور devmode Next.js کار می کند، اما بزرگ وجود دارد برنامه هایی در افق، از جمله چارچوب های فراتر از React. Svelte و Vue هر دو با نام ذکر شده اند. احتمالاً Turbopack به ابزار پیشفرض devmode و همچنین ابزار ساخت تولید در آینده تبدیل خواهد شد.
وقتی npm run dev
را اجرا میکنید، صفحهای مانند تصویر زیر میبینید.
صفحه خوش آمدگویی در حالت توسعه دهنده Next.js 13 Turbopack. منوی سمت چپ چندین نمونه از عملکردهای جدید را در Next.js 13 نشان می دهد.
اگرچه میتوانید تأثیر عملکرد Turbopack را بیشتر در برنامههای مقیاس بزرگ ببینید، یک آزمایش کوچک سرگرمکننده تفاوت را نشان میدهد. همانطور که در فهرست ۳ نشان داده شده است، dev
را با --turbo
فعال در مقابل بدون، اجرا کنید. همانطور که میبینید، حتی برای برنامه شروع ساده، زمان شروع از بیش از ۱۰۰۰ کاهش مییابد. میلی ثانیه تا حدود ۸.
// with --turbo
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - initial compilation 7.216ms
// without --turbo
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1118 ms (198 modules)
دایرکتوری /app جدید
حالا به طرح دایرکتوری خود نگاه می کنیم، جایی که متوجه دایرکتوری جدید /app
خواهید شد. این یک ویژگی جدید Next.js 13 است. اساساً، همه چیز در فهرست /app
در نسل بعدی ویژگیهای React و Next.js شرکت میکند.
دایرکتوری /app
در کنار فهرست آشنا /pages
قرار دارد و از قابلیتهای مسیریابی و طرحبندی پیشرفتهتر پشتیبانی میکند. مسیرهایی که هم در /pages
و هم در /app
مطابقت دارند به /app
میروند، بنابراین میتوانید به تدریج مسیرهای موجود را جایگزین کنید.
مسیریابی اصلی در /app
شبیه /pages
است، زیرا پوشههای تودرتو مسیر URL را توصیف میکنند، بنابراین /app/foo/bar/page js.
در تنظیمات dev
ما به localhost:3000/foo/bar
تبدیل میشود.
فعال کردن دایرکتوری /app
دایرکتوری /app
هنوز یک ویژگی بتا است، بنابراین برای استفاده از آن باید ویژگیهای آزمایشی را در next.config.js
فعال کنید، مانند:
experimental: {
appDir: true
}
توجه داشته باشید که زمانی که پروژه جدید را با create-next-app
داربست کردیم، این کار برای ما انجام شد.
Layouts در Next.js 13
یکی از ابرقدرتهایی که /app
بیش از /pages
دارد، پشتیبانی از طرحبندیهای تودرتو پیچیده است. هر شاخه در سلسله مراتب URL شما می تواند یک طرح بندی را تعریف کند که با فرزندان خود به اشتراک گذاشته شده است (aka، گره های برگ). علاوه بر این، طرحبندیها وضعیت خود را بین انتقالها حفظ میکنند و از هزینه رندر مجدد محتوا در پانلهای مشترک جلوگیری میکنند.
هر دایرکتوری فایل page.tsx/jsx
را به عنوان محتوا در نظر می گیرد و layout.tsx/jsx
الگو را برای آن صفحه و زیر شاخه ها تعریف می کند. بنابراین، ایجاد قالب های تو در تو ساده می شود. علاوه بر این، چارچوب به اندازهای هوشمند است که بخشهایی از صفحه را که تغییر نمیکنند دوباره رندر نمیکند، بنابراین پیمایش طرحبندیهایی را که تحت تأثیر قرار نگرفتهاند دوباره رنگآمیزی نمیکند.
به عنوان مثال، فرض کنید میخواستیم یک فهرست /foo/*
داشته باشیم که در آن همه کودکان با یک حاشیه سفید احاطه شوند. ما میتوانیم یک فایل layout.tsx
را در پوشه /app/foo
، چیزی شبیه فهرست ۵، رها کنیم.
export default function FooLayout({ children }) {
return <section style={{borderWidth: 1, borderColor:'white'}}>{children}</section>;
}
در فهرست ۵، توجه داشته باشید که مولفه ویژگی “children” را تخریب می کند و از آن برای قرار دادن محتوا در داخل الگو استفاده می کند. در اینجا، طرح فقط یک ویژگی بخش با یک سبک درون خطی است که یک حاشیه سفید می دهد. فایل صفحه در /app/foo
محتویات آن در جایی که نشانه {children}
در فایل طرحبندی یافت میشود، ارائه میشود. بهطور پیشفرض، فایلهای طرحبندی، الگوهای تودرتو ایجاد میکنند، بنابراین مسیری که با یک فهرست فرعی از /app/foo/*
مطابقت دارد، محتوای آنها نیز در عنصر {children}
قرار میگیرد. /app/foo/layout.*
.
مولفه های سرور React
بهطور پیشفرض، همه مؤلفههای /app/*
مؤلفههای سرور React هستند. اساساً، اجزای سرور پاسخ React به این سؤال مداوم در مورد چگونگی بهبود هیدراتاسیون در برنامههای جلویی هستند. بخش اعظم کار در رندر کردن مؤلفه ها روی سرور انجام می شود و یک نمایه جاوا اسکریپت مینیمالیستی و قابل حافظه پنهان برای مدیریت واکنش پذیری به مشتری ارسال می شود.
گاهی اوقات، هنگام استفاده از قلاب های سمت کلاینت مانند useState
یا useEffect
(جایی که سرور نمی تواند کار را از قبل انجام دهد)، باید به React بگویید که مشتری است – جزء جانبی این کار را با افزودن یک دستور ‘use Client’
به خط اول فایل انجام می دهید. ما قبلاً از پسوندهای نام فایل مانند .client.js
و .server.js
برای تعیین یک مؤلفه مشتری که از قلاب های سمت مشتری استفاده می کند استفاده کرده ایم، اما اکنون باید از < استفاده کنید. دستورالعمل code>“استفاده از مشتری” در رأس مؤلفههای /app
.
اطلاعات بیشتر درباره React Server Components
درباره بهروزرسانیهای اخیر React Server Components RFC در صفحه GitHub پروژه بیاموزید.
درحال پخش جریانی و تعلیق
جریانگذاری یکی دیگر از بهینهسازیهای React جدیدتر است که توسط همزمان فعال شده است. موتور رندر. این یک تغییر اساسی در نحوه عملکرد موتور React است. ایده اصلی این است که UI را می توان به بخش هایی تقسیم کرد و بخش هایی که به داده ها بستگی دارند می توانند حالت های بارگذاری را در حالی که داده ها را همزمان بارگذاری می کنند تعریف کنند. در همین حال، بخشهایی که به دادهها وابسته نیستند، میتوانند محتوای خود را بلافاصله برای نمایش فوری دریافت کنند.
شما در درجه اول از این ویژگی با مولفه
استفاده خواهید کرد. در اصل،
می گوید، این محتوای بارگیری را در حالی که محتوای واقعی در حالت بارگیری است نمایش دهید، سپس محتوای واقعی مبتنی بر داده را در صورت آماده شدن نشان دهید. از آنجایی که در حین این اتفاق، رابط کاربری مسدود نمیشود و هر
به طور همزمان اتفاق میافتد، توسعهدهندگان یک راه ثابت و ساده برای تعریف طرحبندیهایی دارند که حتی با بسیاری از بخشهای وابسته به داده، بهینه و پاسخگو هستند.< /p>
دایرکتوری /app
Next.js 13 به این معنی است که به طور پیشفرض میتوانید از جریان و
استفاده کنید. سرور بکاند Next API را پیادهسازی میکند که حالتهای بارگذاری را هدایت میکند. مزایا این است که حالتهای بارگیری را میتوان به سرعت رندر کرد، محتوای هیدراته شده را میتوان با در دسترس قرار گرفتن همزمان نمایش داد، و رابط کاربری در حین بارگیری بخشها پاسخگو باقی میماند.
این مزایا به ویژه هنگامی که شبکه کند یا غیرقابل اعتماد است، به عنوان مثال با تلفن همراه، آشکار می شود. این ویژگی جدید هم تجربه کاربری و هم تجربه توسعه دهنده را بهبود می بخشد. توسعه دهندگان متوجه خواهند شد که واکشی داده ها سازگارتر و استانداردتر است. اتخاذ بهترین روش نه تنها ساده تر است، بلکه پیش فرض است.
با تشکر ویژه از جف اسکالانته ورسل برای روشن کردن نقش استریم و
در Next.js 13.
کنوانسیون بارگیری جدید
یک قرارداد جدید loading.js
در Next.js 13 وجود دارد. در فهرست مسیر /app
زندگی میکند و مانند یک
برای کل بخش مسیر. (زیر سرپوش، Next.js در واقع یک مرز loading.js
تعریف شده باشد، در حالی که محتوای واقعی است نشان داده می شود. در حال ارائه، با همان مزایای استفاده مستقیم از تعلیق.
می توانید با باز کردن http://localhost:3000/streaming در برنامه نمایشی ما، این کنوانسیون را در عمل مشاهده کنید. این فایل app/streaming/loading.tsx
نشان داده شده در فهرست ۶ را در حالی که محتوای واقعی بارگیری می شود، نمایش می دهد.
import { SkeletonCard } from '@/ui/SkeletonCard';
export default function Loading() {
return (
<div className="space-y-4">
<div className="grid grid-cols-3 gap-6">
<SkeletonCard isLoading={true} />
<SkeletonCard isLoading={true} />
//...
</div>
);
}
اساساً، فایل loading.tsx
در فهرست ۵ شبکهای از اجزای SkeletonCard را نشان میدهد. کارت اسکلت کارت رسانه ضربانی است که مکانهایی را برای محتوای واقعی که در نهایت توسط مسیر بارگیری میشود، نگه میدارد.
واکشی بهتر داده در Next.js 13
روش های بارگیری داده Next.js (getServerSideProps< /a>، getStaticProps، و getInitialProps) اکنون به نفع یک رویکرد جدیدتر برای واکشی داده منسوخ شده است.
اولین قرارداد بارگذاری داده ها در سرور است که ساده تر شده است زیرا همه اجزا به طور پیش فرض جزء سرور هستند. این تمایل به پرش درخواستهای داده از سوی کلاینت از سرور را از بین میبرد، زمانی که واقعاً فقط نیاز دارید مستقیماً به فروشگاه داده از سرور ضربه بزنید و UI ارائهشده را برای مشتری ارسال کنید. به مستندات Next.js مراجعه کنید. شرح طولانی تر از استدلال پشت ترجیح واکشی داده های سمت سرور.
واکشی داده در فهرست /app
باید با پخش جریانی و تعلیق کار کند. کامپوننتها باید بهجای انتقال دادهها توسط والدین، درخواستهای داده خود را انجام دهند - حتی اگر این دادهها بین اجزا به اشتراک گذاشته شود. خود چارچوب از درخواستهای اضافی اجتناب میکند و تضمین میکند که فقط حداقل درخواستها ساخته شده و به مؤلفههای مناسب تحویل داده میشوند. API واکشی نتایج را برای استفاده مجدد در حافظه پنهان نیز ذخیره میکند.
همه اینها معماری ساده تری را برای واکشی داده ایجاد می کند که هنوز بهینه شده است. توسعهدهندگان میتوانند کمتر به عملکرد واکشی داده فکر کنند و فقط دادهها را در صورت نیاز، در مؤلفهای که به آن نیاز دارد، بگیرند.
رویکرد جدید بدین معناست که میتوانید از Fetch API ناهمزمان که مستقیماً با آن در مؤلفههای سرور آشنا هستیم، استفاده کنید. (React و Next API را برای مدیریت حذف و ذخیره کش گسترش دهید.) همچنین میتوانید مؤلفههای سرور ناهمگام را تعریف کنید. برای مثال، صادر کردن تابع همگام پیش فرض Page()
. برای اطلاعات بیشتر درباره Fetch API جدید به وبلاگ Next.js مراجعه کنید.
اثر کلی همه این پیشرفتها یک معماری برنامه کاربردی سادهتر است که همچنان از بهینهسازی عملکرد پشت صحنه بهره میبرد.
نتیجه گیری
این کار در Next.js 13 بسیار زیاد است—و موارد دیگری نیز وجود دارد که من آنها را پوشش ندادم. از دیگر ویژگی های جدید می توان به به روز رسانی مولفه بعدی/تصویر و سیستم بارگذاری فونت جدید اشاره کرد. به طور کلی، Next.js 13 سنت ارائه یک چارچوب همه کاره، React-with-Benefits را ادامه می دهد که استفاده از ویژگی های مختلف را آسان تر می کند.
هنوز، این نسخه به دلیل نوآوری های طولانی مدت مانند جریان و اجزای سرور خاص است. وقتی Next.js 13 با زیرساختهای Vercel متحد میشود، سهولت قابلتوجهی در استقرار ارائه میکند و نگاهی اجمالی به تجربه توسعه واکنشی آینده به ما میدهد.
پست های مرتبط
بهترین ویژگی های جدید در Next.js 13
بهترین ویژگی های جدید در Next.js 13
بهترین ویژگی های جدید در Next.js 13