Third-party API Integration গাইড ও নোট

Next.js এ third-party API integration একটি সাধারণ কাজ, যা আপনার অ্যাপ্লিকেশনে বাইরের API থেকে ডেটা ফেচ করতে সহায়তা করে। Third-party API গুলি যেমন REST API বা GraphQL API এর মাধ্যমে আপনি বিভিন্ন ধরনের ডেটা ফেচ, পুশ, অথবা পোস্ট করতে পারেন। Next.js এ API ইন্টিগ্রেশন সাধারণত getStaticProps, getServerSideProps বা client-side JavaScript এর মাধ্যমে করা হয়, তবে ব্যবহারের জন্য কোন পদ্ধতি সেরা তা নির্ভর করে ডেটার ধরন এবং প্রয়োজনীয়তা অনুযায়ী।

এখানে Next.js এ third-party API ইন্টিগ্রেশনের মাধ্যমে ডেটা ফেচ করার কিছু পদ্ধতি নিয়ে বিস্তারিত আলোচনা করা হলো।

১. getStaticProps এর মাধ্যমে Third-party API Integration

যদি আপনি স্ট্যাটিক পেজের জন্য থার্ড-পার্টি API থেকে ডেটা ফেচ করতে চান, তবে getStaticProps ব্যবহার করা সবচেয়ে উপযুক্ত পদ্ধতি। এটি Static Generation এর জন্য ব্যবহৃত হয়, যেখানে ডেটা বিল্ড টাইমে একবার ফেচ হয়ে পেজটি তৈরি হয় এবং পরবর্তী সব ভিজিটে একই ডেটা ব্যবহার করা হয়।

উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ পেজ তৈরি করছেন যেখানে আপনি JSONPlaceholder API থেকে পোস্টের ডেটা ফেচ করতে চান।

// pages/blog.js

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

ব্যাখ্যা:

• getStaticProps: এই ফাংশনটি JSONPlaceholder API থেকে পোস্টের ডেটা ফেচ করে এবং সেই ডেটা posts প্রপস হিসেবে Blog কম্পোনেন্টে পাঠায়।
• Static Generation: এটি ডেটা ফেচ করার পরে পেজটি স্ট্যাটিকভাবে তৈরি হয় এবং পরবর্তী সব ভিজিটে একই ডেটা দেখানো হয়।

২. getServerSideProps এর মাধ্যমে Third-party API Integration

যদি আপনি ডাইনামিক ডেটা ফেচ করতে চান, যেখানে প্রতিবার পেজ রিফ্রেশ বা রিকোয়েস্টের সময় নতুন ডেটা ফেচ হবে, তবে getServerSideProps ব্যবহার করা উচিত। এটি Server-side Rendering (SSR) এর জন্য ব্যবহৃত হয় এবং প্রতিবার পেজ রিকোয়েস্টের সময় API থেকে ডেটা ফেচ করা হয়।

উদাহরণ:

ধরা যাক, আপনি একটি ব্যবহারকারীর প্রোফাইল পেজ তৈরি করছেন যেখানে প্রতিবার রিকোয়েস্টে ব্যবহারকারীর ডেটা থার্ড-পার্টি API থেকে ফেচ করা হবে।

// pages/profile.js

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1')
  const user = await res.json()

  return {
    props: {
      user,
    },
  }
}

export default function Profile({ user }) {
  return (
    <div>
      <h1>{user.name}'s Profile</h1>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  )
}

ব্যাখ্যা:

• getServerSideProps: এই ফাংশনটি সার্ভার সাইডে API থেকে ব্যবহারকারীর ডেটা ফেচ করে এবং সেই ডেটা user প্রপস হিসেবে Profile কম্পোনেন্টে পাঠায়।
• Server-side Rendering: প্রতিবার রিকোয়েস্টের সময় নতুন ডেটা সার্ভার থেকে ফেচ হয়ে ক্লায়েন্টে পাঠানো হয়।

৩. Client-side API Integration

ক্লায়েন্ট-সাইড API ইন্টিগ্রেশন তখনই ব্যবহৃত হয় যখন আপনি পেজ লোডের পর ডেটা ফেচ করতে চান, যেমন ইউজার ইন্টারঅ্যাকশনের পর বা কোন ইভেন্টের মাধ্যমে। আপনি সাধারণ JavaScript fetch API বা অন্যান্য লাইব্রেরি (যেমন Axios বা SWR) ব্যবহার করতে পারেন।

উদাহরণ:

// pages/client-side.js
import { useEffect, useState } from 'react'

export default function ClientSidePage() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts')
      const data = await res.json()
      setData(data)
    }

    fetchData()
  }, [])

  if (!data) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h1>Client-side API Data</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

ব্যাখ্যা:

• useEffect: এই হুকটি ক্লায়েন্ট-সাইডে ডেটা ফেচ করার জন্য ব্যবহৃত হয়। পেজ লোডের পর এটি থার্ড-পার্টি API থেকে ডেটা ফেচ করে এবং স্টেট আপডেট করে।
• useState: API থেকে প্রাপ্ত ডেটা data স্টেটে সংরক্ষণ করা হয় এবং তারপর UI তে প্রদর্শন করা হয়।

৪. SWR ব্যবহার করে Third-party API Integration

Next.js এর সাথে SWR (Stale While Revalidate) একটি জনপ্রিয় হুক লাইব্রেরি যা ডেটা ফেচিং, ক্যাশিং এবং রি-ফেচিং খুব সহজে পরিচালনা করতে সাহায্য করে। এটি ক্লায়েন্ট-সাইড ডেটা ফেচিং এর জন্য খুবই কার্যকর।

উদাহরণ:

// pages/swr-example.js
import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

export default function SWRExample() {
  const { data, error } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher)

  if (error) return <div>Error loading data</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>SWR API Data</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

ব্যাখ্যা:

• useSWR: SWR হুকটি ব্যবহার করে আপনি API থেকে ডেটা ফেচ করেন এবং রেসপন্স স্টেটটি হ্যান্ডেল করেন (যেমন data, error এবং loading অবস্থায়)। fetcher ফাংশনটি ফেচিং লজিক কাস্টমাইজ করতে ব্যবহৃত হয়।

সারাংশ

Next.js তে third-party API ইন্টিগ্রেশন খুব সহজ এবং পদ্ধতির উপর নির্ভর করে আপনি বিভিন্ন প্রকারে ডেটা ফেচ করতে পারেন। আপনি getStaticProps ব্যবহার করে Static Generation করতে পারেন, getServerSideProps ব্যবহার করে Server-side Rendering করতে পারেন, এবং ক্লায়েন্ট-সাইড API ফেচিং করতে পারেন fetch বা SWR এর মাধ্যমে।