GraphQL এর সাথে Next.js ইন্টিগ্রেশন

Next.js এবং GraphQL একসাথে ব্যবহার করা অত্যন্ত শক্তিশালী একটি কৌশল, যা আপনাকে ডেটা ফেচিং, স্ট্যাটিক সাইট জেনারেশন (SSG), সার্ভার সাইড রেন্ডারিং (SSR), এবং ক্লায়েন্ট সাইডে ডায়নামিক ডেটা লোডিং সহজ করে। GraphQL একটি শক্তিশালী কুয়েরি ভাষা যা ক্লায়েন্টকে নির্দিষ্ট ডেটা অনুরোধ করতে দেয়, এবং Next.js এর সাথে একত্রিত হলে আপনি দ্রুত, স্কেলেবল এবং ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।

এই টিউটোরিয়ালে দেখানো হবে কিভাবে GraphQL এবং Next.js কে একসাথে ইন্টিগ্রেট করবেন এবং ডেটা ফেচিং এর জন্য Apollo Client ব্যবহার করবেন।

১. GraphQL এবং Apollo Client সেটআপ

Next.js এ GraphQL ইন্টিগ্রেশন করতে হলে প্রথমে Apollo Client এবং অন্যান্য প্রয়োজনীয় লাইব্রেরি ইনস্টল করতে হবে।

Step 1: প্রয়োজনীয় লাইব্রেরি ইনস্টল করুন

npm install @apollo/client graphql

এটি আপনার প্রজেক্টে Apollo Client এবং GraphQL এর জন্য প্রয়োজনীয় প্যাকেজ ইনস্টল করবে।

Step 2: Apollo Client কনফিগারেশন

Apollo Client সেটআপ করার জন্য একটি ফাইল তৈরি করুন যেখানে GraphQL API এ কানেকশন তৈরি হবে। উদাহরণস্বরূপ:

lib/apolloClient.js:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-api-url.com/graphql', // আপনার GraphQL API URL দিন
  cache: new InMemoryCache(),  // Apollo Client cache setup
});

export default client;

এই ফাইলটি আপনার GraphQL API এ কানেক্ট করবে এবং Apollo Client ব্যবহার করতে প্রস্তুত করবে।

২. Next.js এ Apollo Client ইন্টিগ্রেট করা

এখন ApolloProvider ব্যবহার করে Apollo Client কে Next.js অ্যাপ্লিকেশনে ইন্টিগ্রেট করতে হবে। এটি pages/_app.js ফাইলে করতে হবে।

Step 3: ApolloProvider ব্যবহার করা

pages/_app.js ফাইলে Apollo Client ইন্টিগ্রেট করুন:

// pages/_app.js
import { ApolloProvider } from '@apollo/client';
import client from '../lib/apolloClient';

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

এখানে, ApolloProvider অ্যাপ্লিকেশনকে Apollo Client এর মাধ্যমে রেন্ডার করবে এবং GraphQL ডেটা ফেচিং সহজ করে তুলবে।

৩. GraphQL Query ব্যবহার করা

Next.js অ্যাপ্লিকেশনে GraphQL Query ফেচ করতে, Apollo Client এর useQuery হুক ব্যবহার করা হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি ব্লগ পেজ তৈরি করা হয়েছে এবং সেখানে GraphQL এর মাধ্যমে পোস্টের তালিকা ফেচ করা হয়েছে।

Step 4: GraphQL Query ব্যবহার করা

pages/index.js ফাইলে GraphQL কুয়েরি ব্যবহার করুন:

// pages/index.js
import { useQuery, gql } from '@apollo/client';

// GraphQL কুয়েরি
const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      content
    }
  }
`;

export default function HomePage() {
  const { loading, error, data } = useQuery(GET_POSTS);

  if (loading) return <p>লোড হচ্ছে...</p>;
  if (error) return <p>এরর: {error.message}</p>;

  return (
    <div>
      <h1>ব্লগ পোস্ট</h1>
      <ul>
        {data.posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

এখানে, useQuery হুকটি GraphQL কুয়েরি চালিয়ে ডেটা ফেচ করছে এবং পেজে রেন্ডার করছে। যদি ডেটা লোড হচ্ছে থাকে, তাহলে লোডিং মেসেজ দেখানো হবে এবং যদি কোনো এরর হয়, তবে এরর মেসেজ দেখানো হবে।

৪. Static Generation (SSG) এবং GraphQL

Next.js এর getStaticProps ফাংশন ব্যবহার করে আপনি স্ট্যাটিক সাইট জেনারেশন (SSG) এর মাধ্যমে GraphQL API থেকে ডেটা ফেচ করতে পারেন। এটি এমন ডেটার জন্য উপযুক্ত, যেটি একবার ফেচ হলে, পুরো অ্যাপ্লিকেশন জুড়ে ব্যবহার করা যেতে পারে।

Step 5: getStaticProps ব্যবহার করা

pages/index.js ফাইলে getStaticProps ব্যবহার করুন:

// pages/index.js
import { gql } from '@apollo/client';
import client from '../lib/apolloClient';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      content
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({ query: GET_POSTS });

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function HomePage({ posts }) {
  return (
    <div>
      <h1>ব্লগ পোস্ট</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

এখানে, getStaticProps ফাংশনটি GraphQL API থেকে ডেটা ফেচ করছে এবং props হিসেবে তা পেজ কম্পোনেন্টে পাঠাচ্ছে। Next.js এই ডেটাকে স্ট্যাটিকভাবে রেন্ডার করবে এবং পেজটি দ্রুত লোড হবে।

৫. Dynamic Routes এবং GraphQL

Next.js এর getStaticPaths এবং getStaticProps ফাংশন ব্যবহার করে আপনি ডাইনামিক রাউট তৈরি করতে পারেন এবং GraphQL API থেকে ডেটা ফেচ করতে পারেন।

Step 6: Dynamic Routes - GraphQL Query

pages/posts/[id].js ফাইলে ডাইনামিক রাউট এবং GraphQL কুয়েরি ব্যবহার করুন:

// pages/posts/[id].js
import { gql } from '@apollo/client';
import client from '../../lib/apolloClient';

const GET_POST = gql`
  query GetPost($id: ID!) {
    post(id: $id) {
      id
      title
      content
    }
  }
`;

export async function getStaticPaths() {
  const { data } = await client.query({ query: gql`{ posts { id } }` });

  const paths = data.posts.map(post => ({
    params: { id: post.id },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { data } = await client.query({
    query: GET_POST,
    variables: { id: params.id },
  });

  return {
    props: {
      post: data.post,
    },
  };
}

export default function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

এখানে, getStaticPaths এবং getStaticProps ব্যবহার করে ডাইনামিক রাউট এবং GraphQL API থেকে ডেটা ফেচ করা হয়েছে। getStaticPaths ডাইনামিক পাথ তৈরি করে এবং getStaticProps নির্দিষ্ট পোস্টের জন্য ডেটা ফেচ করে।

সারাংশ

Next.js এবং GraphQL এর ইন্টিগ্রেশন অ্যাপ্লিকেশন ডেভেলপমেন্টে সহজ, দ্রুত এবং কার্যকরী করে তোলে। আপনি Apollo Client ব্যবহার করে GraphQL API এর সাথে যোগাযোগ করতে পারেন, এবং Next.js এর getStaticProps এবং getServerSideProps ফাংশন ব্যবহার করে ডেটা ফেচিং পরিচালনা করতে পারেন। ডাইনামিক রাউট, স্ট্যাটিক সাইট জেনারেশন, এবং সার্ভার সাইড রেন্ডারিং সবই সহজেই GraphQL এর সাথে ইন্টিগ্রেট করা সম্ভব।