Ինչպես ստեղծել դինամիկ երթուղիներ 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:

Էջերի պանակում ստեղծեք նոր ֆայլ, որը կոչվում է [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-ի այս իրականացումը վերցնում է բոլոր գրառումները, որոնք պետք է ներկայացվեն և վերադարձնում է slugs-ը որպես պարամետր:

Ընդհանուր առմամբ, [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()-ը վերցնում է յուրաքանչյուր երթուղու ներկայացվող տվյալները:

Nested Dynamic Routes-ի ստեղծում Next.js-ում

Next.js-ում տեղադրված երթուղի ստեղծելու համար անհրաժեշտ է ստեղծել նոր թղթապանակ էջերի թղթապանակում և պահպանել դինամիկ երթուղին դրա ներսում:

Օրինակ՝ /pages/posts/dynamic-routes-nextjs ստեղծելու համար պահեք [slug].js-ը /pages/posts ներսում։

URL-ի պարամետրերի մուտքը դինամիկ երթուղիներից

Երթուղին ստեղծելուց հետո կարող եք ստանալ URL պարամետրը դինամիկ երթուղուց՝ օգտագործելով useRouter() React կեռիկը:

Էջերի համար/[slug].js ստացեք slug այսպես.

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-ը, կարող եք տվյալներ ստանալ կառուցման ժամանակ և ստեղծել դինամիկ երթուղիներ: Դուք կարող եք օգտագործել այս գիտելիքները տարրերի ցանկից էջերը նախապես մատուցելու համար:

Եթե ցանկանում եք բեռնել տվյալներ յուրաքանչյուր հարցումից, օգտագործեք getServerSideProps-ը getStaticProps-ի փոխարեն: Նկատի ունեցեք, որ այս մոտեցումն ավելի դանդաղ է. դուք պետք է օգտագործեք այն միայն պարբերաբար փոփոխվող տվյալներ օգտագործելիս: