معرفی و اهمیت هدایت مسیر
در دنیای مدرن وب، هدایت صحیح و موثر درخواست‌ها به مسیرهای مختلف در برنامه، یکی از مهم‌ترین اصول طراحی نرم‌افزار محسوب می‌شود. اگر تا امروز با Next.js کار کرده باشید، می‌دانید که این فریم‌ورک برای ساخت برنامه‌های واکنش‌پذیر و سریع، امکانات متنوعی را فراهم کرده است. یکی از این امکانات، App Router است که به شما این امکان را میدهد که با سهولت و کارایی بالا، مسیرهای برنامه خود را مدیریت کنید.
چگونه کار می‌کند؟
در Next.js، هدایت‌ها معمولاً از طریق سرور انجام می‌شوند تا از بارگیری مجدد صفحه جلوگیری شود و تجربه کاربری بهتری فراهم گردد. App Router به طور خاص طراحی شده است که شما را قادر به انجام هدایت بسیار سریع و بر اساس شرایط خاص کند. مثلاً می‌توانید کاربرانی را که وارد نشده‌اند به صفحه ورود هدایت کنید یا به سادگی کاربران را به مسیرهای جدید در نسخه‌های جدید برنامه منتقل کنید.
نمونه‌ای از پیاده‌سازی
فرض کنیم می‌خواهیم یک مسیر خاص را به طور دائم به مسیر دیگری هدایت کنیم. مثلاً اگر کاربر به '/old-path' به جای '/new-path' درخواست دهد، می‌خواهیم درخواست او به صورت خودکار به مسیر جدید هدایت شود. این کار را می‌توان با استفاده از توسعه‌دهی امکانات Native Next.js به راحتی انجام داد.
کد نمونه
export async function getServerSideProps(context) {
return {
redirect: {
destination: '/new-path',
permanent: true,
},
}
}
کد به صورت خط به خط
export async function getServerSideProps(context) این خط تابعی غیرهمزمان را تعریف می‌کند که اطلاعات را از سرور دریافت می‌کند.
return {
redirect: {
destination: '/new-path', در اینجا ما یک شیء بازمی‌گردانیم که مسیری را به عنوان مقصد هدایت تعریف می‌کند.
permanent: true, این خط مشخص می‌کند که هدایت دائمی است، بنابراین موتورهای جستجو این تغییر مسیر را دائمی در نظر می‌گیرند.
}, } تکمیل شیء بازگشتی که شامل اطلاعات هدایت است.