مقایسه Next.js13 و Next.js12

سلام. امیدوارم حالتون عالی باشه. من سهیل جعفری هستم و توی این مقاله میخوایم به بررسی نکست جی اس 13 بپردازیم. امروز که دارم مقاله رو مینویسم، حدود 10 روزی هست که از انتشار next.js13 میگذره. هنوز خیلی نمیشه در موردش صحبت کرد اما به عنوان یه دید اولیه میشه این موارد رو ذکر کرد.

1. اولین تغییر اینه که یه پوشه ایجاد شده به اسم app. کارکردش چیه؟

پوشه pages که قبلا داشتیم، اون پوشه کاملا خالی شده و فقط یه پوشه api توش داریم. کل فایل های صفحه ها و... منتقل شده به پوشه اپ.

2. دومین و در واقع مهمترین تغییر اینه که دیگه نیاز نیست از getServerSideProps و getStaticProps استفاده کنیم بلکه یک چیزی مطرح شده به اسم getData. کار رو برای ما خیلی ساده تر کرده

async function getData() {
   const res = await fetch('https://api.example.com/...');
   return res.json();
 }  

export default async function Page() {
   const data = await getData();
   return <main></main>;
 }

یک چیزی تعریف میشه به اسم cache که این کش، نحوه ریکوئست زدن رو تعیین میکنه.

fetch(URL, { cache: 'force-cache' });
fetch(URL, { next: { revalidate: 10 } });

fetch(URL, { cache: 'no-store' });

اولی و دومی برای حالت استاتیک ساید جنریشن یا در واقع SSG هستن. آخری هم برای حالت سرور ساید رندرینگ یا SSR.

3. تغییر سوم در مورد نکست جی اس لینک هست. توی next.js12 ما نمیتونستیم به تگ لینک کلاس بدیم و نیاز بود که داخلش، از تگ a استفاده کنیم. توی next.js13 اگر کلاسی بخوایم، میتونیم به همون تگ link بدیم و اگر داخل تگ لینک، تگ a استفاده کنیم، ارور میده. این مورد، مورد مثبتی هست.

4. استفاده از turbo pack به جای webpack که خود تیم نکست میگن کار رو سریعتر کرده.

5. ایجاد تغییرات در نکست جی اس ایمیج مثلا حذف objectFit و Layout

بررسی پوشه app در Next.js 13

توی نکست 12، وقتی می‌خواستیم یه صفحه توی سایت درست کنیم، توی پوشه pages، یه پوشه میساختیم مثلا به اسم about و توش، یه فایل index.jsx میساختیم. اما توی نکست 13 باید توی پوشه app، یه پوشه بسازیم به اسم about. به جای ایندکس باید از پیج استفاده کنیم. یعنی اسم فایل داخل پوشه about میشه page.jsx.

معرفی Layout و Loading و Error در Next.js 13

توی پوشه هر صفحه مثلا پوشه about، فقط همین فایل page.jsx قرار نمیگیره بلکه، یه سری فایل دیگه هم میتونیم بزاریم. Loading.jsx، Layout.jsx و Error.jsx . در مورد فایل layout، هنوز زمان نیازه که مشخص بشه کارکردش چیه و یه مقدار کار باهاش گیج کنندهست. اما در مورد دو فایل دیگه، میشه گفت محتوای ارور و لودینگ بر اساس هر صفحه توی نکست 13 شخصی سازی شدن. مثلا وقتی میخواید صفحه همه مقالات یه وبلاگ رو باز کنید، لودینگش متفاوته با لودینگ صفحه اصلی. خوب چرا این موضوع رو بوجود آوردن، به خاطر حالت streaming. مثلا اگه برید به یوتوب، همون اول کل محتوا بهتون نمایش داده نمیشه. بلکه ابتدا یه صفحه کاملا سیاه میبینید، بعد مدت کوتاهی، یه سری باکس بهتون نمایش میده که خاکستری رنگ هستند. بعد که اطلاعات ویدئوها لود شد، محتوای اصلی نمایش داده میشه.

برای مطالعه بیشتر در مورد Next.js13، بررسی ویدئویی نکست 13 و همچنین موارد بیشتر در حوزه نکست جی اس، میتونید به سایت ما مراجعه کنید. لینک: آموزش رایگان Next.js با مرن فا