بهترین ویژگی های جدید در Next.js 13

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 تعریف شده باشد، در حالی که محتوای واقعی است نشان داده می شود. در حال ارائه، با همان مزایای استفاده مستقیم از تعلیق.

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>
  );
}