Next.js এ কিভাবে ডায়নামিক রুট তৈরি করবেন

ডায়নামিক রুট হল এমন পৃষ্ঠা যা আপনাকে URL-এ কাস্টম প্যারামিটার ব্যবহার করতে দেয়। গতিশীল বিষয়বস্তুর জন্য পৃষ্ঠা তৈরি করার সময় তারা বিশেষভাবে উপকারী।

একটি ব্লগের জন্য, আপনি ব্লগ পোস্টের শিরোনামের উপর ভিত্তি করে URL তৈরি করতে একটি গতিশীল রুট ব্যবহার করতে পারেন। এই পদ্ধতি প্রতিটি পোস্টের জন্য একটি পৃষ্ঠা উপাদান তৈরি করার চেয়ে ভাল।

---

---

দুই শহরের মধ্যে অর্ধেক পথ কি

আপনি দুটি ফাংশন সংজ্ঞায়িত করে Next.js-এ গতিশীল রুট তৈরি করতে পারেন: getStaticProps এবং getStaticPaths।

দিনের মেকইউজের ভিডিও

Next.js-এ একটি ডায়নামিক রুট তৈরি করা

Next.js-এ একটি গতিশীল রুট তৈরি করতে, একটি পৃষ্ঠায় বন্ধনী যোগ করুন। যেমন, [params].js, [slug].js বা [id].js।

একটি ব্লগের জন্য, আপনি গতিশীল রুটের জন্য একটি স্লাগ ব্যবহার করতে পারেন। সুতরাং, যদি একটি পোস্ট স্লগ ছিল dynamic-routes-nextjs , ফলস্বরূপ 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 প্যারামিটার userRouter() ব্যবহার করে গতিশীল রুট থেকে হুক প্রতিক্রিয়া .

পৃষ্ঠা/[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 ব্যবহার করুন। মনে রাখবেন যে এই পদ্ধতিটি ধীর; নিয়মিতভাবে ডেটা পরিবর্তন করার সময় আপনার এটি ব্যবহার করা উচিত।