একটি অ্যাপ্লিকেশন বিকাশের প্রক্রিয়ায় Next.js, গতিশীল বিষয়বস্তু প্রদর্শনের জন্য API থেকে ডেটা আনা একটি গুরুত্বপূর্ণ দিক। এই নিবন্ধটি আপনাকে getStaticProps বিল্ড প্রক্রিয়া চলাকালীন স্ট্যাটিক ডেটা আনার জন্য এবং getServerSideProps প্রতিটি অনুরোধে API থেকে ডেটা আনার জন্য ব্যবহার করার মাধ্যমে গাইড করবে।
getStaticProps ব্যবহার করে
getStaticProps এটি একটি অন্তর্নির্মিত পদ্ধতি Next.js যা বিল্ড প্রক্রিয়া চলাকালীন স্ট্যাটিক ডেটা আনা সমর্থন করে। এটি আপনাকে জিজ্ঞাসা করা ডেটা সহ স্ট্যাটিক পৃষ্ঠাগুলি তৈরি করতে দেয়, যা অ্যাপ্লিকেশনটি স্থাপন করার আগে পূর্ব-রেন্ডার করা হয়। এখানে ব্যবহার করার একটি মৌলিক উদাহরণ getStaticProps:
export async function getStaticProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
উপরের উদাহরণে, আমরা fetch একটি API থেকে ডেটা অনুসন্ধান করতে এবং প্রপস হিসাবে ডেটা ফেরত দিতে ব্যবহার করি।
getServerSideProps ব্যবহার করে
getServerSideProps অন্য একটি পদ্ধতি Next.js যা আপনাকে প্রতিটি অনুরোধে API থেকে ডেটা আনতে সক্ষম করে। এটি নিশ্চিত করে যে বিষয়বস্তু সর্বদা আপ-টু-ডেট এবং গতিশীল। এখানে ব্যবহার করার একটি উদাহরণ getServerSideProps:
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
getServerSideProps প্রতিবার পৃষ্ঠায় অনুরোধ করা হলে পদ্ধতিটি API থেকে ডেটা জিজ্ঞাসা করবে ।
উপসংহার
এই বিভাগে, আপনি শিখেছেন কীভাবে দক্ষতার সাথে আপনার Next.js অ্যাপ্লিকেশনে API থেকে ডেটা আনতে হয়। ব্যবহার করে getStaticProps এবং getServerSideProps, আপনি আপনার অ্যাপ্লিকেশনে নমনীয়ভাবে স্ট্যাটিক এবং গতিশীল উভয় বিষয়বস্তু প্রদর্শন করতে পারেন।