Next.js இல் டைனமிக் வழிகளை உருவாக்குவது எப்படி

Next.js இல் டைனமிக் வழிகளை உருவாக்குவது எப்படி

டைனமிக் வழிகள் என்பது URL இல் தனிப்பயன் அளவுருக்களைப் பயன்படுத்த உங்களை அனுமதிக்கும் பக்கங்கள். டைனமிக் உள்ளடக்கத்திற்கான பக்கங்களை உருவாக்கும் போது அவை மிகவும் பயனுள்ளதாக இருக்கும்.





வலைப்பதிவுக்கு, வலைப்பதிவு இடுகைகளின் தலைப்புகளின் அடிப்படையில் URLகளை உருவாக்க, டைனமிக் வழியைப் பயன்படுத்தலாம். ஒவ்வொரு இடுகைக்கும் ஒரு பக்க கூறுகளை உருவாக்குவதை விட இந்த அணுகுமுறை சிறந்தது.



jpeg தீர்மானத்தை எவ்வாறு குறைப்பது

GetStaticProps மற்றும் getStaticPaths ஆகிய இரண்டு செயல்பாடுகளை வரையறுப்பதன் மூலம் Next.js இல் டைனமிக் வழிகளை உருவாக்கலாம்.





அன்றைய வீடியோவை உருவாக்கவும்

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 இன் இந்த செயல்படுத்தல் ரெண்டர் செய்யப்பட வேண்டிய அனைத்து இடுகைகளையும் பெறுகிறது மற்றும் ஸ்லக்குகளை params ஆக வழங்குகிறது.

மொத்தத்தில், [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() ஐப் பயன்படுத்தி மாறும் பாதையில் இருந்து எதிர்வினை கொக்கி .

பக்கங்களுக்கு/[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 ஐப் பயன்படுத்தவும். இந்த அணுகுமுறை மெதுவாக உள்ளது என்பதை நினைவில் கொள்க; தொடர்ந்து மாற்றும் தரவை உட்கொள்ளும் போது மட்டுமே அதைப் பயன்படுத்த வேண்டும்.