قابلیتهای جدیدی در Nextjs 13

در واقع Nextjs یک فریمورک محبوب React برای ساخت برنامه های وب سریع و پویا است. ویژگی هایی مانند رندر سمت سرور، تولید سایت ایستا، بهینه سازی تصویر، تقسیم کد و موارد دیگر را ارائه می دهد. در اکتبر 2021، Nextjs آخرین نسخه خود، Nextjs 13 را منتشر کرد که برخی از ویژگی‌ها و پیشرفت‌های جدید هیجان‌انگیز را معرفی می‌کند. در این مقاله، برخی از نکات برجسته Nextjs 13 و اینکه چگونه آنها می توانند برای توسعه وب شما مفید باشند را بررسی خواهیم کرد.

طی چند ماه گذشته، تیم Next.js در تلاش بوده تا Next.js را با اجزای سرور React و ویژگی‌های React 18 ادغام کند. این ویژگی‌های جدید اکنون برای امتحان در فهرست برنامه جدید در دسترس هستند.

دایرکتوری برنامه (بتا) یا app Directory (beta)

یکی از قابل توجه ترین ویژگی های Nextjs 13 دایرکتوری برنامه (بتا) یا app Directory (beta) است که به شما امکان می دهد بدون نوشتن جاوا اسکریپت سمت کلاینت صفحاتی با رندر و استریم سمت سرور ایجاد کنید. این بدان معنی است که شما می توانید از اجزای React برای تعریف طرح بندی صفحه و منطق واکشی داده ها در سرور استفاده کنید و فقط HTML را به مرورگر ارسال کنید. این مقدار جاوا اسکریپتی را که باید توسط مرورگر دانلود، تجزیه و اجرا شود کاهش می‌دهد و در نتیجه عملکرد سریع‌تر و تجربه کاربری بهتری به همراه دارد. برای استفاده از ویژگی دایرکتوری برنامه، باید پوشه ای به نام app در ریشه پروژه خود ایجاد کنید و اجزای صفحه خود را در آن قرار دهید. این مؤلفه‌ها باید یک تابع پیش‌فرض را صادر کنند که یک عنصر React یا وعده‌ای را که به یکی حل می‌شود برمی‌گرداند. همچنین می توانید از هوک‌های React مانند useState و useEffect در داخل این کامپوننت ها استفاده کنید و همچنین ماژول های دیگر را از node_modules یا پایگاه کد خود وارد کنید. ویژگی فهرست برنامه در حال حاضر در نسخه بتا است و به یک کانفیگ در فایل next.config.js شما نیاز دارد:

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

توربوپک (آلفا) یا Turbopack (alpha)

یکی دیگر از ویژگی های اصلی Nextjs 13 Turbopack (alpha) است که یک باندلر جدید مبتنی بر Rust است که جایگزین Webpack به عنوان باندلر پیش فرض برای پروژه های Nextjs می شود. Webpack یک ابزار پرکاربرد برای بسته‌بندی ماژول‌های جاوا اسکریپت به بسته‌هایی است که می‌توانند به مرورگر ارائه شوند. با این حال، Webpack به دلیل پیاده سازی مبتنی بر جاوا اسکریپت، محدودیت هایی از نظر عملکرد و مقیاس پذیری دارد.

اما Turbopack قصد دارد با استفاده از Rust، یک زبان سطح پایین که عملکرد و همزمانی بالایی را ارائه می دهد، بر این محدودیت ها غلبه کند. Turbopack از پشتیبانی بومی Rust برای WebAssembly (Wasm) استفاده می کند، که یک فرمت باینری است که می تواند بر روی هر پلتفرمی که از جاوا اسکریپت پشتیبانی می کند اجرا شود. با کامپایل کد Rust در ماژول‌های Wasm، Turbopack می‌تواند سریع‌تر از Webpack در هر دستگاه یا محیطی اجرا شود.

طبق معیارهای تیم Nextjs، درواقع Turbopack می‌تواند تا ۷۰۰ برابر سریع‌تر از Webpack برای برخی کارها مانند کوچک‌سازی و تکان دادن درختان ارائه دهد. این بدان معناست که Turbopack می تواند زمان ساخت را به میزان قابل توجهی کاهش دهد و تجربه توسعه دهنده را برای پروژه های بزرگ مقیاس Nextjs بهبود بخشد.

چون Turbopack در حال حاضر در مرحله آلفا است و به یک کلنفیگ جداگانه در فایل next.config.js شما نیاز دارد:

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

تصویر جدید یا New next/image

درحقیقت Nextjs همیشه یک تگ تصویر داخلی به نام next/image ارائه کرده است که به شما کمک می کند تصاویر خود را برای اندازه ها و فرمت های مختلف صفحه نمایش بهینه کنید. با این حال، next/image دارای اشکالاتی مانند نیاز به پیکربندی سرور سفارشی یا خدمات خارجی برای بهینه سازی تصویر بود. در Nextjs 13، next/image برای ارائه عملکرد بهتر و سازگاری با ویژگی‌های مرورگر بومی مانند بارگذاری تنبل یا lazy loading دوباره طراحی شده است. بارگذاری تنبل تکنیکی است که بارگذاری تصاویر را تا زمانی که روی صفحه قابل مشاهده باشند به تأخیر می اندازد و باعث صرفه جویی در پهنای باند و بهبود سرعت بارگذاری صفحه می شود. همچنین Nextjs 13's next/image از بارگیری تنبلی بومی مرورگر به طور پیش‌فرض با استفاده از ویژگی loading=“lazy” در تگ‌های <img> پشتیبانی می‌کند. این بدان معنی است که برای فعال کردن بارگذاری تنبل برای تصاویر خود نیازی به استفاده از هیچ کتابخانه یا افزونه شخص ثالثی ندارید. Nextjs 13's next/image همچنین از بهینه سازی خودکار تصویر با استفاده از Vercel Image Optimization API پشتیبانی می کند.