نحوه ایجاد مسیرهای پویا در Next.js

با بازرسی سریع URL، انعطاف‌پذیری را به مسیریابی خود اضافه کنید.

مسیرهای پویا صفحاتی هستند که به شما اجازه می دهند از پارامترهای سفارشی در URL استفاده کنید. آنها به ویژه هنگام ایجاد صفحات برای محتوای پویا مفید هستند.

برای یک وبلاگ، می توانید از یک مسیر پویا برای ایجاد URL بر اساس عنوان پست های وبلاگ استفاده کنید. این رویکرد بهتر از ایجاد یک جزء صفحه برای هر پست است.

شما می توانید مسیرهای پویا را در Next.js با تعریف دو تابع ایجاد کنید: getStaticProps و getStaticPaths.

ایجاد یک مسیر پویا در Next.js

برای ایجاد یک مسیر پویا در Next.js، براکت ها را به صفحه اضافه کنید. برای مثال، [params].js، [slug].js یا [id].js.

برای یک وبلاگ، می توانید از یک اسلاگ برای مسیر پویا استفاده کنید. بنابراین، اگر یک پست دارای Slug dynamic-routes-nextjs باشد، URL حاصل https://example.com/dynamic-routes-nextjs خواهد بود.

در پوشه pages، یک فایل جدید به نام [slug].js ایجاد کنید و کامپوننت Post را ایجاد کنید که داده‌های پست را به عنوان یک پایه می‌گیرد.

const Post = ({ postData }) => {
  return <div>{/* content */}</div>;
};

راه های مختلفی وجود دارد که می توانید داده های پست را به پست ارسال کنید. روشی که انتخاب می کنید بستگی به نحوه رندر صفحه دارد. برای واکشی داده ها در طول زمان ساخت، از getStaticProps() و برای واکشی آن در صورت درخواست، از getServerSideProps() استفاده کنید.

استفاده از getStaticProps برای واکشی داده های پست

پست های وبلاگ اغلب تغییر نمی کنند و واکشی آنها در زمان ساخت کافی است. بنابراین، مولفه Post را تغییر دهید تا شامل getStaticProps().

import { getSinglePost } from "../../utils/posts";
 
const Post = ({ content }) => {
  return <div>{/* content */}</div>;
};
 
export const getStaticProps = async ({ params }) => {
    const post = await getSinglePost(params.slug);

    return {
      props: { ...post },
    };
  };

تابع getStaticProps داده های پست ارائه شده در صفحه را تولید می کند. از اسلاگ مسیرهای تولید شده توسط تابع getStaticPaths استفاده می کند.

استفاده از getStaticPaths برای واکشی مسیرها

تابع getStaticPaths() مسیرهایی را برای صفحاتی که باید از قبل رندر شوند برمی گرداند. مولفه Post را تغییر دهید تا شامل آن شود:

export const getStaticPaths = async () => {
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } }));

  return {
    paths,
    fallback: false,
  };
};

این پیاده‌سازی getStaticPaths تمام پست‌هایی را که باید رندر شوند واکشی می‌کند و اسلاگ‌ها را به‌عنوان پارامتر برمی‌گرداند.

در مجموع، [slug].js به شکل زیر خواهد بود:

import { getAllPosts, getSinglePost } from "../../utils/posts";
 
const Post = ({ content }) => {
  return <div>{content}</div>;
};
 
export const getStaticPaths = async () => {
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } }));

  return {
    paths,
    fallback: false,
  };
};
 
export const getStaticProps = async ({ params }) => {
  const post = await getSinglePost(params.slug);
 
  return {
    props: { ...post },
  };
};
 
export default Post;

برای ایجاد یک مسیر پویا باید از getStaticProps() و getStaticPaths() با هم استفاده کنید. تابع getStaticPaths () باید مسیرهای پویا را تولید کند، در حالی که getStaticProps () داده های ارائه شده در هر مسیر را واکشی می کند.

ایجاد مسیرهای پویا تودرتو در Next.js

برای ایجاد یک مسیر تودرتو در Next.js، باید یک پوشه جدید در داخل پوشه pages ایجاد کنید و مسیر پویا را در داخل آن ذخیره کنید.

به عنوان مثال، برای ایجاد /pages/posts/dynamic-routes-nextjs، [slug].js را در /pages/posts ذخیره کنید.

دسترسی به پارامترهای URL از مسیرهای پویا

پس از ایجاد مسیر، می توانید پارامتر URL را از مسیر پویا با استفاده از قلاب userRouter() React بازیابی کنید.

برای pages/[slug].js، اسلاگ را به صورت زیر دریافت کنید:

import { useRouter } from 'next/router'
 
const Post = () => {
  const router = useRouter()
  const { slug } = router.query
  return <p>Post: {slug}</p>
}
 
export default Post

با این کار لجن پست نمایش داده می شود.

مسیریابی پویا با getServerSideProps

با استفاده از Next.js می توانید داده ها را در زمان ساخت واکشی کنید و مسیرهای پویا ایجاد کنید. می توانید از این دانش برای پیش رندر کردن صفحات از فهرست موارد استفاده کنید.

اگر می خواهید در هر درخواست داده ها را واکشی کنید، به جای getStaticProps از getServerSideProps استفاده کنید. توجه داشته باشید که این رویکرد کندتر است. شما فقط باید زمانی از آن استفاده کنید که مرتباً داده ها را تغییر می دهید.

منبع مقاله