ارتقا به Next.js 13: راهنمای مهاجرت

سلام! آیا آماده ارتقای برنامه Next.js خود از نسخه 12 به نسخه 13 (پایدار) هستید؟ نگران نباش، من تو را تحت پوشش قرار دادم. این راهنما به شما کمک می‌کند تا ویژگی‌هایی را ارتقا دهید که هم در صفحات و هم در فهرست برنامه‌ها کار می‌کنند و به‌طور تدریجی برنامه موجود خود را از صفحه‌ای به برنامه منتقل کنید. بیا شروع کنیم!

ارتقاء

نسخه Node.js

اول از همه، حداقل نسخه Node.js اکنون نسخه 16.8 است. برای جزئیات بیشتر، مستندات Node.js را بررسی کنید.

نسخه Next.js

برای به روز رسانی به Next.js نسخه 13، کافی است این دستور را با استفاده از مدیر بسته مورد علاقه خود اجرا کنید:

npm install next@latest react@latest react-dom@latest

نسخه ESLint

اگر از ESLint استفاده می کنید، باید نسخه ESLint خود را ارتقا دهید:

npm install -D eslint-config-next@latest

توجه: ممکن است لازم باشد سرور ESLint را در VS Code مجددا راه اندازی کنید تا تغییرات ESLint اعمال شوند. پالت فرمان را باز کنید (cmd+shift+p در مک؛ ctrl+shift+p در ویندوز) و ESLint را جستجو کنید: سرور ESLint را مجددا راه اندازی کنید.

ارتقاء ویژگی های جدید

Next.js 13 App Router جدید را با ویژگی ها و قراردادهای جدید معرفی کرد. روتر جدید در دایرکتوری برنامه موجود است و با فهرست صفحات همزیستی دارد.

ارتقاء به Next.js 13 نیازی به استفاده از روتر برنامه جدید ندارد. می‌توانید از صفحاتی با ویژگی‌های جدید که در هر دو فهرست کار می‌کنند، مانند مؤلفه تصویر به‌روزشده، مؤلفه پیوند، مؤلفه اسکریپت و بهینه‌سازی قلم استفاده کنید.

<تصویر/> جزء

Next.js 12 بهبودهای جدیدی را در کامپوننت تصویر با یک واردات موقت معرفی کرد: next/future/image. این پیشرفت‌ها شامل جاوا اسکریپت کمتر سمت کلاینت، راه‌های ساده‌تر برای گسترش و استایل کردن تصاویر، دسترسی بهتر، و بارگذاری تنبل مرورگر بومی بود.

در نسخه 13، این رفتار جدید اکنون پیش‌فرض برای next/image است.

کامپوننت <پیوند>

مؤلفه دیگر نیازی به افزودن دستی تگ در کودکی ندارد. این رفتار به عنوان یک گزینه آزمایشی در نسخه 12.2 اضافه شد و اکنون پیش فرض است. در Next.js 13، همیشه را رندر می‌کند و به شما امکان می‌دهد تا props را به تگ زیرین ارسال کنید.