Next.js یکی از محبوب‌ترین فریم‌ورک‌های جاوا اسکریپت برای توسعه برنامه‌های کاربردی وب با استفاده از ری‌اکت است. این فریم‌ورک امکانات متنوعی برای بهینه‌سازی پروژه‌ها ارائه می‌دهد. در این مقاله، قصد داریم درباره استفاده از App Router در Next.js و خصوصیت reactStrictMode صحبت کنیم.
اولین بخشی که باید بفهمیم، مفهوم App Router در Next.js است. App Router به شما این امکان را می‌دهد تا با تعریف مسیرهای برنامه خود، به سادگی به مقاصد مختلف هدایت شوید. این بخش برای ایجاد ساختاری قابل مدیریت و منطقی در برنامه‌های پیچیده بسیار مفید است.
یکی دیگر از ویژگی‌های مهم در این زمینه، پیکربندی فایل next.config.js است. در این فایل، می‌توانید تنظیمات مختلف مربوط به پروژه خود مانند رفتار واکنش‌گرا و تنظیمات خاص سرور را تغییر دهید.
استفاده از خاصیت reactStrictMode نیز به شما کمک می‌کند که چرخه‌های زندگی کامپوننت‌ها و کل برنامه را با دقت بیشتری مدیریت کنید. این ویژگی به خصوص برای شناسایی مشکلات احتمالی در کدها و ارتقاء بهترین شیوه‌ها مانند مدیریت حافظه مناسب بسیار مفید است.
در قسمت بعدی با دستورالعمل کدنویسی این موارد به صورت عملی آشنا خواهیم شد.
// next.config.js:
module.exports = {
reactStrictMode: true,
async redirects() {
return [
{
source: "/old-path",
destination: "/new-path",
permanent: true,
},
];
},
};
توضیحات خط به خط کد
// next.config.js: - آغاز فایل پیکربندی پروژه در Next.js
module.exports = { - این خط، پیکربندی ماژول‌ها و ویژگی‌های پروژه را مشخص می‌کند
reactStrictMode: true, - فعال‌سازی حالت سخت‌گیری برای یافتن مشکلات بالقوه در کد
async redirects() { - تعریف یک تابع غیر هم‌زمان برای مدیریت ریدایرکت‌ها
return [ - شروع تعریف یک آرایه از مسیرهای ریدایرکت
{ - معرفی یک شیء برای تعیین یک مسیر خاص
source: "/old-path", - مسیر اصلی که باید ریدایرکت شود
destination: "/new-path", - مسیر مقصد که باید به آن ریدایرکت شود
permanent: true, - تعیین نوع ریدایرکت به صورت دائمی
}, - پایان تعریف ریدایرکت خاص
]; - پایان آرایه ریدایرکت‌ها
}, - اتمام تابع ریدایرکت
}; - بستن پیکربندی ماژول