مسیریابی پویا در Next.js با استفاده از App Router

مسیریابی پویا در Next.js با استفاده از App Router

سرت دودشمند بسیار پرطرفدار در دنیای توسعه وب است. یکی از ویژگی‌های فوق‌العاده‌ای که با جاوااسکریپت و فریمورک‌های آن بخصوص React.js و Next.js قابل دستیابی است، مسیریابی پویا یا همان Dynamic Routing است. شاید بپرسید که این مسیریابی پویا چیست و چطور در پروژه‌های Next.js پیاده‌سازی می‌شود؟ با ما همراه باشید تا در چند پاراگراف ساده و دوستانه شما را راهنمایی کنیم.

در مسیریابی پویا به شما این امکان داده می‌شود که بر اساس ورودی‌های مختلف از کاربر یا دیتابیس، صفحات وب مختلفی را به کاربر نشان دهید. برای مثال، صفحات محصول یا پروفایل کاربر که بر اساس آیدی آنها بارگذاری می‌شوند یک مثال عالی از مسیریابی پویا هستند. حالا Next.js به عنوان یکی از محبوب‌ترین فریمورک‌های React، قابلیت‌های پیشرفته‌ای برای پیاده‌سازی این نوع مسیریابی به شما ارائه می‌دهد.

فرض کنید یک اپلیکیشن ساده دارید که لیستی از پست‌ها را نمایش می‌دهد و شما می‌خواهید با کلیک بر روی هر پست، صفحه جزئیات آن پست باز شود. در چنین شرایطی، استفاده از مسیریابی پویا بسیار کارآمد خواهد بود. برای شروع، باید مسیرهای پویا را در پوشه `pages` ایجاد کنید، که با براکت‌های مربع مشخص می‌شوند. مثل `[id].js`.

مزیت اصلی استفاده از App Router در Next.js این است که این لایه مسیریابی به شما انعطاف بیشتری در مدیریت مسیرها و ساختار پروژه می‌دهد. درواقع، می‌توانید با App Router عملکرد خود را بهبود بخشید و تجربه کاربر بهتری فراهم کنید. مسیریابی پویا همچنین به شما این امکان را می‌دهد که به راحتی مسیرهای جدید ایجاد کنید و از Utility Functions برای مدیریت آنها استفاده کنید.

برای پیاده‌سازی یک مسیر پویا، اول از همه باید یک Component برای نمایش محتوای داینامیک خود ایجاد کنید. سپس می‌توانید با استفاده از `getStaticPaths` و `getStaticProps` اطلاعات مربوط به هر مسیر خاص را بارگذاری کنید. این روش بهینه‌تر است و برگرفته از قابلیت‌های قدرتمند Server Side Rendering یا Prerendering در Next.js می‌باشد.

const PostPage = ({ post }) => {
    return (
        <div>
            <h1>{post.title}</h1>
            <p>{post.content}</p>
        </div>
    );
};

export async function getStaticPaths() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await res.json();

    const paths = posts.map((post) => ({
        params: { id: post.id.toString() },
    }));

    return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
    const post = await res.json();

    return { props: { post } }; 
}

export default PostPage;

PostPage یک کامپوننت ری‌اکت است که محتویات یک پست خاص را نمایش می‌دهد.
getStaticPaths تابعی است که در آن مسیرهای پویا بر اساس داده‌ها ساخته می‌شوند و در خروجی یک آرایه از مسیرها داده می‌شود که در پارامتر params ذخیره شده‌اند.
روش map برای تبدیل آیدی‌ها به params استفاده شده است.
getStaticProps اطلاعات مربوط به هر مسیر خاص را واکشی کرده و به عنوان props به PostPage منتقل می‌کند.
آدرس API در تابع fetch مشخص شده که باید داده‌های درست را از آن دریافت نمایید.
میزان استفاده از async در این توابع نشان‌دهنده امکان استفاده از عملیات غیرهمزمان برای بهینه‌سازی فرآیند دریافت داده‌ها است.