Next.jsలో డైనమిక్ రూట్‌లను ఎలా సృష్టించాలి

డైనమిక్ మార్గాలు అనేవి URLలో అనుకూల పారామితులను ఉపయోగించడానికి మిమ్మల్ని అనుమతించే పేజీలు. డైనమిక్ కంటెంట్ కోసం పేజీలను సృష్టించేటప్పుడు అవి ప్రత్యేకంగా ప్రయోజనకరంగా ఉంటాయి.

బ్లాగ్ కోసం, మీరు బ్లాగ్ పోస్ట్‌ల శీర్షికల ఆధారంగా URLలను సృష్టించడానికి డైనమిక్ మార్గాన్ని ఉపయోగించవచ్చు. ప్రతి పోస్ట్‌కి పేజీ కాంపోనెంట్‌ను సృష్టించడం కంటే ఈ విధానం ఉత్తమం.

మీరు రెండు ఫంక్షన్లను నిర్వచించడం ద్వారా Next.jsలో డైనమిక్ మార్గాలను సృష్టించవచ్చు: getStaticProps మరియు getStaticPaths.

టాస్క్ మేనేజర్ లేకుండా ప్రోగ్రామ్ నుండి నిష్క్రమించడం ఎలా

రోజు యొక్క వీడియోను తయారు చేయండి

Next.jsలో డైనమిక్ మార్గాన్ని సృష్టిస్తోంది

Next.jsలో డైనమిక్ మార్గాన్ని సృష్టించడానికి, పేజీకి బ్రాకెట్‌లను జోడించండి. ఉదాహరణకు, [params].js, [slug].js లేదా [id].js.

బ్లాగ్ కోసం, మీరు డైనమిక్ రూట్ కోసం స్లగ్‌ని ఉపయోగించవచ్చు. కాబట్టి, పోస్ట్‌లో స్లగ్ ఉంటే డైనమిక్-రూట్లు-తదుపరిది , ఫలితంగా వచ్చే URL https://example.com/dynamic-routes-nextjs అవుతుంది.

పేజీల ఫోల్డర్‌లో, [slug].js అనే కొత్త ఫైల్‌ను సృష్టించండి మరియు పోస్ట్ డేటాను ప్రాప్‌గా తీసుకునే పోస్ట్ కాంపోనెంట్‌ను సృష్టించండి.

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

మీరు పోస్ట్ డేటాను పోస్ట్‌కి పంపడానికి వివిధ మార్గాలు ఉన్నాయి. మీరు ఎంచుకున్న పద్ధతి మీరు పేజీని ఎలా రెండర్ చేయాలనుకుంటున్నారు అనే దానిపై ఆధారపడి ఉంటుంది. బిల్డ్ సమయంలో డేటాను పొందేందుకు, getStaticProps()ని ఉపయోగించండి మరియు అభ్యర్థనపై దాన్ని పొందేందుకు, getServerSideProps()ని ఉపయోగించండి.

పోస్ట్ డేటాను పొందేందుకు getStaticPropsని ఉపయోగించడం

బ్లాగ్ పోస్ట్‌లు తరచుగా మారవు మరియు నిర్మాణ సమయంలో వాటిని పొందడం సరిపోతుంది. కాబట్టి, 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() ఫంక్షన్ ముందుగా రెండర్ చేయవలసిన పేజీల కోసం పాత్‌లను అందిస్తుంది. పోస్ట్ కాంపోనెంట్‌ని చేర్చడానికి మార్చండి:

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/posts/dynamic-routes-nextjsని సృష్టించడానికి, లోపల [slug].jsని సేవ్ చేయండి /పేజీలు/పోస్ట్‌లు.

డైనమిక్ రూట్‌ల నుండి URL పారామితులను యాక్సెస్ చేస్తోంది

మార్గాన్ని సృష్టించిన తర్వాత, మీరు దాన్ని తిరిగి పొందవచ్చు URL పరామితి UseRouter()ని ఉపయోగించి డైనమిక్ మార్గం నుండి రియాక్ట్ హుక్ .

విండోస్ 10 నేపథ్యాన్ని జిఫ్ సెట్ చేయండి

పేజీలు/[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ని ఉపయోగించండి. ఈ విధానం నెమ్మదిగా ఉందని గమనించండి; క్రమం తప్పకుండా మారుతున్న డేటాను వినియోగించేటప్పుడు మాత్రమే మీరు దీన్ని ఉపయోగించాలి.