Uddeshyo | Student Super App

7. Next.js Data Fetching (Server)

📘 কনসেপ্ট (থিওরি)

Next.js সার্ভারে প্রতিটি ফেচ রিকোয়েস্টের (fetch request) জন্য ক্যাশিং এবং রিভ্যালিডেটিং আচরণ কনফিগার করার অনুমতি দিতে নেটিভ fetch ওয়েব এপিআইকে (Web API) প্রসারিত করে।

সার্ভার কম্পোনেন্টগুলোতে, ডেটা আনতে আপনি async/await ব্যবহার করতে পারেন।

async function getData() {
  const res = await fetch('https://api.example.com/data')
  if (!res.ok) throw new Error('Failed to fetch data')
  return res.json()
}

💡 উদাহরণ

সার্ভার কম্পোনেন্টে ফেচ (Fetch) করা:

export default async function Page() {
  const data = await fetch('https://api.example.com/data').then(res => res.json())

  return (
    
      {data.title}
    
  )
}

🎯 আপনার কাজ (প্র্যাকটিস)

একটি async সার্ভার কম্পোনেন্ট UserPage লিখুন। https://jsonplaceholder.typicode.com/users/1 এ একটি ফেচ কলের জন্য অপেক্ষা (await) করুন এবং JSON টি নিন। তারপর ব্যবহারকারীর name একটি  এ রেন্ডার করুন।

main.nextjs

OUTPUT

Run your code to see the output here...