Next.js এর পেজ এবং কম্পোনেন্টস

Next.js একটি React ভিত্তিক ফ্রেমওয়ার্ক, যা আপনাকে পেজ এবং কম্পোনেন্টস তৈরির জন্য সহজ এবং শক্তিশালী উপায় প্রদান করে। Next.js এর পেজ এবং কম্পোনেন্টস ব্যবস্থাপনা খুবই সোজা এবং রাউটিং, ডাইনামিক পেজিং, এবং কম্পোনেন্ট ভিত্তিক আর্কিটেকচার সহজভাবে ইমপ্লিমেন্ট করা যায়।

এই টিউটোরিয়ালে আমরা Next.js এর পেজ এবং কম্পোনেন্টস এর ব্যবহার এবং তাদের মধ্যে পার্থক্য নিয়ে বিস্তারিত আলোচনা করব।

১. Next.js পেজ (Pages)

Next.js রাউটিং সিস্টেম পেজ ভিত্তিক। অর্থাৎ, pages/ ফোল্ডারে থাকা প্রতিটি ফাইল স্বয়ংক্রিয়ভাবে একটি রাউট হিসেবে কাজ করে। এই পেজগুলো সাধারণত React কম্পোনেন্টস হয়, তবে প্রতিটি পেজ একটি নির্দিষ্ট URL এর সাথে যুক্ত।

পেজের তৈরি প্রক্রিয়া:

• pages/ ফোল্ডারের মধ্যে একটি .js, .jsx, .ts, অথবা .tsx ফাইল তৈরি করলে এটি একটি পেজ হিসেবে ব্যবহৃত হবে।
• Next.js স্বয়ংক্রিয়ভাবে URL ম্যানেজমেন্ট করে, তাই পেজ ফাইলগুলির নামই তাদের URL নির্ধারণ করে।
• index.js হল ডিফল্ট পেজ, যা মূল রুট URL (/) এ রেন্ডার হবে।

উদাহরণ:

1. pages/index.js: হোম পেজের জন্য। এটি / রাউটের জন্য ব্যবহৃত হবে।

   // pages/index.js
   export default function Home() {
     return (
       <div>
         <h1>Welcome to Next.js</h1>
       </div>
     );
   }
   

2. pages/about.js: About পেজের জন্য। এটি /about রাউটের জন্য ব্যবহৃত হবে।

   // pages/about.js
   export default function About() {
     return (
       <div>
         <h1>About Us</h1>
       </div>
     );
   }
   

3. ডাইনামিক রাউট: যদি আপনার URL প্যারামিটার থাকতে পারে, তাহলে আপনি ডাইনামিক রাউট ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

   // pages/posts/[id].js
   export default function Post({ id }) {
     return (
       <div>
         <h1>Post {id}</h1>
       </div>
     );
   }
   

   এখানে id একটি ডাইনামিক প্যারামিটার হবে যা URL এর মাধ্যমে গ্রহণ করা হবে, যেমন /posts/1, /posts/2 ইত্যাদি।

২. Next.js কম্পোনেন্টস (Components)

Next.js এ কম্পোনেন্টস হল পুনঃব্যবহারযোগ্য UI ব্লক যা সাধারণত React কম্পোনেন্টস হয়ে থাকে। এই কম্পোনেন্টসকে আপনি আপনার বিভিন্ন পেজ এবং ফিচারে ব্যবহার করতে পারেন।

কম্পোনেন্টস তৈরির প্রক্রিয়া:

• সাধারণত components/ নামক একটি ফোল্ডার তৈরি করে সেখানে সমস্ত UI কম্পোনেন্ট রাখা হয়।
• কম্পোনেন্টগুলো সাধারণভাবে পেজের মধ্যে অন্তর্ভুক্ত (import) করা হয়।
• পেজগুলোতে এই কম্পোনেন্টগুলো ব্যবহার করা হয়, যার ফলে আপনার অ্যাপ্লিকেশন অনেক বেশি মডুলার এবং রিইউজেবল হয়।

উদাহরণ:

1. কম্পোনেন্ট তৈরির উদাহরণ:

   components/Header.js: একটি হেডার কম্পোনেন্ট।

   // components/Header.js
   export default function Header() {
     return (
       <header>
         <h1>My Next.js App</h1>
       </header>
     );
   }
   

2. পেজে কম্পোনেন্ট ব্যবহার:

   pages/index.js: হোম পেজে হেডার কম্পোনেন্ট ব্যবহার।

   // pages/index.js
   import Header from '../components/Header';
   
   export default function Home() {
     return (
       <div>
         <Header />
         <h2>Welcome to Next.js</h2>
       </div>
     );
   }
   

৩. পেজ এবং কম্পোনেন্টস এর মধ্যে পার্থক্য

৪. React এর মতো কম্পোনেন্ট এবং পেজ রেন্ডারিং

Next.js এ, পেজ এবং কম্পোনেন্ট দুটোই React ভিত্তিক, এবং এখানে স্ট্যাটিক সাইট জেনারেশন (SSG), সার্ভার সাইড রেন্ডারিং (SSR) এবং ইনক্রিমেন্টাল স্ট্যাটিক রিফ্রেশ (ISR) এর মতো শক্তিশালী ফিচার রয়েছে। আপনি পেজের লেভেলে স্ট্যাটিক ডাটা ফেচিং বা সার্ভার সাইড রেন্ডারিং এর কৌশল ব্যবহার করতে পারেন, এবং সেই ডাটা কম্পোনেন্টে পাস করে ডিসপ্লে করতে পারেন।

সারাংশ

• Next.js পেজ: প্রতিটি .js ফাইল যা pages/ ফোল্ডারে থাকে, একটি রাউট হিসেবে কাজ করে।
• Next.js কম্পোনেন্টস: পুনঃব্যবহারযোগ্য UI ব্লক যা পেজের মধ্যে ইমপোর্ট করে ব্যবহার করা হয়।
• পেজ এবং কম্পোনেন্টস এর মধ্যে পার্থক্য: পেজের মাধ্যমে রাউট তৈরি হয়, কম্পোনেন্টগুলি UI কন্টেন্টের ব্লক হিসেবে কাজ করে।

Next.js এর এই পেজ এবং কম্পোনেন্টস ব্যবস্থাপনা আপনাকে দ্রুত এবং কার্যকরীভাবে অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

Next.js এ পেজ এবং কম্পোনেন্ট তৈরি করা খুবই সহজ এবং স্বয়ংক্রিয়ভাবে রাউটিং সিস্টেমের সাথে কাজ করে। Next.js রাউটিং এবং কম্পোনেন্ট সিস্টেম ব্যবহারে React এর প্রথাগত পদ্ধতি অনুসরণ করে, কিন্তু কিছু অতিরিক্ত সুবিধা প্রদান করে যেমন পেজ রাউটিং, ডাইনামিক রাউটিং, ইত্যাদি।

এখানে আমরা দেখব কীভাবে Next.js এ পেজ এবং কম্পোনেন্ট তৈরি করতে হয়।

১. Next.js এ পেজ তৈরি করা

Next.js এ প্রতিটি ফাইল pages/ ফোল্ডারে রাখলে এটি একটি পেজ হিসেবে কাজ করবে এবং সেই পেজের URL স্বয়ংক্রিয়ভাবে নির্ধারিত হবে। এর মানে হলো, আপনি যদি pages/about.js ফাইল তৈরি করেন, তাহলে এটি /about রাউটে পাওয়া যাবে।

পেজ তৈরি করার উদাহরণ:

1. pages/index.js: হোম পেজ

// pages/index.js

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App!</h1>
      <p>This is the home page.</p>
    </div>
  );
}

এই পেজটি আপনার অ্যাপ্লিকেশনের হোম পেজ হিসেবে কাজ করবে, এবং এটি http://localhost:3000/ URL এ অ্যাক্সেস করা যাবে।

2. pages/about.js: একটি অতিরিক্ত পেজ

// pages/about.js

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

এই পেজটি http://localhost:3000/about URL এ অ্যাক্সেস করা যাবে।

২. Next.js এ ডাইনামিক পেজ তৈরি করা

Next.js আপনাকে ডাইনামিক রাউটিংও করতে দেয়। এটি একটি গুরুত্বপূর্ণ ফিচার যা আপনাকে পেজের URL প্যারামিটার অনুযায়ী ডেটা রেন্ডার করতে সহায়তা করে।

ডাইনামিক পেজ তৈরি করার উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ অ্যাপ তৈরি করছেন, যেখানে প্রতিটি পোস্টের জন্য একটি ডাইনামিক পেজ তৈরি করতে হবে। আপনি pages/posts/[id].js ফাইল তৈরি করতে পারেন, যেখানে [id] একটি ডাইনামিক প্যারামিটার হিসেবে কাজ করবে।

1. pages/posts/[id].js: ডাইনামিক পেজ

// pages/posts/[id].js

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;  // URL থেকে id প্যারামিটার সংগ্রহ করা

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is the dynamic post page.</p>
    </div>
  );
}

এই পেজটি http://localhost:3000/posts/1, http://localhost:3000/posts/2, ইত্যাদি URL দ্বারা এক্সেস করা যাবে, যেখানে প্রতিটি URL এর জন্য ভিন্ন ভিন্ন পেজ রেন্ডার হবে।

৩. Next.js এ কম্পোনেন্ট তৈরি করা

Next.js এ কম্পোনেন্ট তৈরি করা খুব সহজ। আপনি সাধারণ React কম্পোনেন্ট ব্যবহার করবেন যা পুনঃব্যবহারযোগ্য এবং স্ট্যাটিক বা ডাইনামিক কনটেন্ট রেন্ডার করতে সক্ষম।

কম্পোনেন্ট তৈরি করার উদাহরণ:

1. components/Header.js: একটি হেডার কম্পোনেন্ট

// components/Header.js

export default function Header() {
  return (
    <header>
      <h1>My Next.js App</h1>
    </header>
  );
}

এই কম্পোনেন্টটি আপনি বিভিন্ন পেজ বা কম্পোনেন্টে ইমপোর্ট করে ব্যবহার করতে পারবেন।

2. pages/index.js: হোম পেজে হেডার কম্পোনেন্ট ব্যবহার করা

// pages/index.js

import Header from '../components/Header';

export default function Home() {
  return (
    <div>
      <Header />
      <p>Welcome to my app!</p>
    </div>
  );
}

এখন, Header কম্পোনেন্টটি Home পেজে রেন্ডার হবে।

৪. Next.js এ স্টাইলিং এবং CSS

Next.js CSS স্টাইলিং অনেক সহজ, এবং আপনি বিভিন্ন পদ্ধতিতে স্টাইলিং করতে পারেন: CSS, CSS Modules, এবং স্টাইলড কম্পোনেন্ট।

উদাহরণ:

1. styles/Home.module.css: মডিউল CSS ব্যবহার

/* styles/Home.module.css */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.heading {
  color: blue;
  text-align: center;
}

2. pages/index.js: CSS মডিউল ব্যবহার

// pages/index.js

import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.heading}>Welcome to My Next.js App!</h1>
      <p>This is the home page.</p>
    </div>
  );
}

এখানে Home.module.css ফাইলটি index.js পেজে স্টাইল প্রয়োগ করছে।

৫. _app.js এবং গ্লোবাল লেআউট

Next.js এর _app.js ফাইলটি অ্যাপ্লিকেশনের মূল কনটেইনার কম্পোনেন্ট। এটি সমস্ত পেজে গ্লোবাল লেআউট, স্টাইল, অথবা গ্লোবাল স্টেট ব্যবহারের জন্য উপযোগী।

// pages/_app.js

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <h2>Global Header</h2>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

এখানে _app.js ফাইলটি সকল পেজে গ্লোবাল হেডার এবং গ্লোবাল CSS প্রয়োগ করছে।

সারাংশ

Next.js এ পেজ এবং কম্পোনেন্ট তৈরি করা খুবই সহজ এবং স্বয়ংক্রিয় রাউটিং সিস্টেমের মাধ্যমে এটি পরিচালিত হয়। আপনি pages/ ফোল্ডারে প্রতিটি ফাইল দিয়ে একটি নতুন পেজ তৈরি করতে পারেন, এবং কম্পোনেন্টগুলো পুনঃব্যবহারযোগ্য হয়, যেগুলি আপনি পেজের মধ্যে ইমপোর্ট করে ব্যবহার করতে পারেন। Next.js এর কাস্টম অ্যাপ কনফিগারেশন এবং গ্লোবাল লেআউট ব্যবহারের মাধ্যমে অ্যাপ্লিকেশন আরো সুসংগঠিত ও ফ্লেক্সিবল হয়ে ওঠে।

Next.js একটি React ভিত্তিক ফ্রেমওয়ার্ক যা আপনাকে সহজে ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এর অন্যতম শক্তিশালী ফিচার হল ডিফল্ট পেজ সিস্টেম এবং কাস্টম কম্পোনেন্ট তৈরি করার সহজ পদ্ধতি। এই টিউটোরিয়ালে আমরা ডিফল্ট পেজ এবং কাস্টম কম্পোনেন্ট কীভাবে তৈরি করতে হয়, তা বিস্তারিতভাবে আলোচনা করব।

১. ডিফল্ট পেজ (Default Page)

Next.js-এর অন্যতম সুবিধা হল এর ডিফল্ট পেজ রাউটিং সিস্টেম। আপনি যখন Next.js প্রজেক্ট তৈরি করেন, তখন pages/ ফোল্ডারে একটি index.js ফাইল ডিফল্টভাবে থাকে, যা আপনার অ্যাপের হোম পেজ হিসেবে কাজ করে।

pages/index.js ফাইলের উদাহরণ:

// pages/index.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <p>This is the default home page of your Next.js app.</p>
    </div>
  );
};

export default Home;

এই index.js ফাইলটি অ্যাপের হোম পেজ হিসেবে কাজ করবে এবং এটি http://localhost:3000/ রাউটে এক্সেস করা যাবে।

২. কাস্টম কম্পোনেন্ট তৈরি করা (Creating Custom Components)

Next.js একটি React ফ্রেমওয়ার্ক, তাই এখানে আপনি React এর মতোই কম্পোনেন্ট তৈরি করতে পারেন। কাস্টম কম্পোনেন্ট তৈরি করতে আপনাকে সাধারণ React কম্পোনেন্ট ফাইল তৈরি করতে হবে এবং সেই ফাইলগুলোকে প্রয়োজন অনুযায়ী অন্য পেজ বা কম্পোনেন্টে ব্যবহার করতে হবে।

কাস্টম কম্পোনেন্ট উদাহরণ:

ধরা যাক, আমরা একটি সাধারণ Header কম্পোনেন্ট তৈরি করব যা আমাদের অ্যাপের সব পেজে দেখা যাবে।

components/Header.js:

// components/Header.js
import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My Next.js App</h1>
      <nav>
        <a href="/">Home</a> | <a href="/about">About</a>
      </nav>
    </header>
  );
};

export default Header;

এখন, এই Header কম্পোনেন্টটি আমরা আমাদের পেজে ব্যবহার করতে পারি। উদাহরণস্বরূপ, pages/index.js পেজে এই Header কম্পোনেন্টটি যুক্ত করি।

pages/index.js ফাইলটি আপডেট করা:

// pages/index.js
import React from 'react';
import Header from '../components/Header';

const Home = () => {
  return (
    <div>
      <Header />
      <h1>Welcome to My Next.js App</h1>
      <p>This is the default home page of your Next.js app.</p>
    </div>
  );
};

export default Home;

এখন, Header কম্পোনেন্টটি হোম পেজে দেখা যাবে এবং এটি প্রতিটি পেজে রিইউজ করা যাবে।

৩. _app.js এবং গ্লোবাল কম্পোনেন্ট ব্যবহার

Next.js আপনাকে _app.js ফাইল ব্যবহার করে গ্লোবাল লেআউট এবং কম্পোনেন্ট ব্যবস্থাপনার সুযোগ দেয়। এটি মূলত আপনার অ্যাপের সব পেজে সাধারণভাবে কম্পোনেন্ট বা লেআউট যোগ করতে ব্যবহৃত হয়। আপনি যদি চান যে কোনো কম্পোনেন্ট বা লেআউট প্রতিটি পেজে দেখাক, তবে আপনি এটি _app.js ফাইলে ইনক্লুড করতে পারেন।

উদাহরণ: pages/_app.js

// pages/_app.js
import React from 'react';
import Header from '../components/Header';
import '../styles/globals.css';

const MyApp = ({ Component, pageProps }) => {
  return (
    <div>
      <Header />
      <Component {...pageProps} />
    </div>
  );
};

export default MyApp;

এখানে, Header কম্পোনেন্টটি _app.js ফাইলে যুক্ত করা হয়েছে, যার ফলে এটি আপনার অ্যাপের প্রতিটি পেজে দেখাবে।

৪. ডাইনামিক পেজ তৈরি করা (Dynamic Page Creation)

Next.js এর একটি শক্তিশালী ফিচার হল ডাইনামিক রাউটিং, যেখানে আপনি URL প্যারামিটার ব্যবহার করে ডাইনামিক পেজ তৈরি করতে পারেন। উদাহরণস্বরূপ, যদি আপনি চান যে /posts/[id] URL এ প্রতিটি পোস্টের জন্য আলাদা পেজ তৈরি হোক, তাহলে আপনাকে [id].js ফাইল তৈরি করতে হবে।

pages/posts/[id].js ফাইল উদাহরণ:

// pages/posts/[id].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;  // URL থেকে প্যারামিটার নেওয়া

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is a dynamic post page. The ID is: {id}</p>
    </div>
  );
};

export default Post;

এখন, আপনি http://localhost:3000/posts/1 অথবা http://localhost:3000/posts/2 এই ধরনের URL এ ডাইনামিক পেজ দেখতে পাবেন যেখানে id প্যারামিটার অনুযায়ী কনটেন্ট শো হবে।

৫. কাস্টম 404 পেজ

Next.js ডিফল্টভাবে একটি 404 পেজ প্রদান করে, কিন্তু আপনি চাইলে নিজের কাস্টম 404 পেজ তৈরি করতে পারেন। কাস্টম 404 পেজ তৈরি করার জন্য pages/404.js ফাইল তৈরি করতে হয়।

pages/404.js উদাহরণ:

// pages/404.js
import React from 'react';

const Custom404 = () => {
  return (
    <div>
      <h1>Oops! Page not found.</h1>
      <p>Sorry, we couldn't find the page you're looking for.</p>
    </div>
  );
};

export default Custom404;

এখন, যদি ব্যবহারকারী কোনো অবৈধ URL এ যান, তবে এটি কাস্টম 404 পেজ দেখাবে।

সারাংশ

Next.js এ ডিফল্ট পেজ এবং কাস্টম কম্পোনেন্ট তৈরি করা খুবই সহজ। আপনি pages/ ফোল্ডারে পেজ তৈরি করে রাউটিং পরিচালনা করতে পারেন, এবং components/ ফোল্ডারে কাস্টম কম্পোনেন্ট তৈরি করে সেগুলিকে অ্যাপের বিভিন্ন অংশে রিইউজ করতে পারেন। এছাড়া, _app.js এবং _document.js ফাইল ব্যবহার করে গ্লোবাল লেআউট এবং কাস্টম 404 পেজ তৈরি করা সম্ভব।

Next.js এ ডেটা ফেচিং করার জন্য কয়েকটি গুরুত্বপূর্ণ ফাংশন রয়েছে, যার মাধ্যমে আপনি পেজ রেন্ডার করার আগে ডেটা প্রিপেয়ার করতে পারেন। এই ফাংশনগুলো হল:

• getStaticProps
• getServerSideProps
• getStaticPaths

এগুলো React কম্পোনেন্টের বাইরের ফাংশন হিসেবে কাজ করে এবং পেজ রেন্ডার করার সময় ডেটা বা কনটেন্ট লোড করতে সাহায্য করে।

১. getStaticProps

getStaticProps ফাংশনটি Static Generation এর জন্য ব্যবহৃত হয়, যেখানে ডেটা কম্পাইল করার সময় একবার ফেচ করা হয় এবং তারপর সেই ডেটা এক্সপোর্ট করা হয়। এটি এমন পেজের জন্য ব্যবহার করা হয় যেগুলো স্থির বা সময়মত আপডেট হয় না। পেজটি তৈরি করার সময় (Build Time) একবার ডেটা ফেচ করা হয়, এবং তারপর সেই ডেটা ব্যবহারকারীকে প্রদান করা হয়।

ব্যবহারের উদাহরণ:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts
    },
  };
}

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

কাজের প্রক্রিয়া:

• getStaticProps একটি asynchronous function যা সার্ভার সাইডে ডেটা ফেচ করে।
• ডেটা প্রাপ্তি হলে, এটি props হিসেবে পেজ কম্পোনেন্টে পাঠানো হয়।
• পেজটি কেবল একবার build হওয়ার সময়ই ডেটা ফেচ হবে এবং সেগুলো সারা বিশ্বে সবার কাছে একইভাবে থাকবে।
• এর ফলে, Static Site Generation (SSG) প্রক্রিয়া ঘটে।

২. getServerSideProps

getServerSideProps ফাংশনটি Server-Side Rendering (SSR) এর জন্য ব্যবহৃত হয়। এর মাধ্যমে, পেজ রেন্ডার করার সময় প্রতি রিকোয়েস্টে ডেটা ফেচ করা হয়। এর মানে হল, প্রতিবার যখন ব্যবহারকারী পেজটি ভিজিট করবে, তখন সার্ভার থেকে নতুন ডেটা ফেচ করা হবে।

ব্যবহারের উদাহরণ:

// pages/posts/[id].js
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post
    },
  };
}

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

কাজের প্রক্রিয়া:

• getServerSideProps হল একটি asynchronous function যা প্রতিটি রিকোয়েস্টের জন্য রান হয়।
• প্রতিবার ব্যবহারকারী পেজটি ভিজিট করলে, এটি সার্ভার থেকে নতুন ডেটা ফেচ করে এবং পেজের কম্পোনেন্টে পাঠায়।
• এতে করে ডেটা runtime-এ, ব্যবহারকারীর রিকোয়েস্টের সময় ফেচ হয়।

এটি সাধারণত তখন ব্যবহৃত হয় যখন ডেটা পরিবর্তিত হতে থাকে এবং সব ব্যবহারকারীর জন্য সেগুলো এক্সপোজ করা উচিত নয়।

৩. getStaticPaths

getStaticPaths ফাংশনটি Static Generation এর জন্য ব্যবহৃত হয়, কিন্তু এটি dynamic routes (যেমন [id].js) এর জন্য। আপনি যখন একটি ডাইনামিক রাউট তৈরি করেন, তখন Next.js জানে না কোন পেজগুলো স্ট্যাটিকভাবে জেনারেট করতে হবে। এখানে getStaticPaths ফাংশনটি কাজ করে এবং সেটি বলে দেয় কোন রাউটগুলোকে Static Generation এর জন্য প্রস্তুত করা উচিত।

ব্যবহারের উদাহরণ:

// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

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

  return {
    paths,
    fallback: false,  // fallback false means no other paths will be generated.
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post
    },
  };
}

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

কাজের প্রক্রিয়া:

• getStaticPaths ফাংশনটি ডাইনামিক রাউটের জন্য সম্ভাব্য সব পাথগুলির একটি তালিকা তৈরি করে।
• এই পাথগুলো getStaticProps ফাংশনের মাধ্যমে স্ট্যাটিক পেজ তৈরি করতে ব্যবহৃত হয়।
• fallback: false মানে হল যে শুধুমাত্র যে পাথগুলো getStaticPaths এ উল্লেখ করা হয়েছে, সেগুলোই স্ট্যাটিকভাবে তৈরি হবে, অন্য পাথগুলোর জন্য 404 পেজ দেখানো হবে।

এটি ডাইনামিক পেজগুলোকে স্ট্যাটিক জেনারেট করার জন্য ব্যবহৃত হয় যখন আপনি জানেন যে কিছু নির্দিষ্ট রাউটগুলো ডেটা দিয়ে পূর্ণ করতে হবে।

Summary

• getStaticProps: Static Generation (SSG) এর জন্য ব্যবহৃত হয়, যেখানে ডেটা build time এ ফেচ করা হয়।
• getServerSideProps: Server-Side Rendering (SSR) এর জন্য ব্যবহৃত হয়, যেখানে ডেটা request time এ ফেচ করা হয়।
• getStaticPaths: Dynamic Routes এর জন্য ব্যবহৃত হয়, যেখানে আপনি ডাইনামিক পেজের জন্য স্ট্যাটিক পাথ গুলো প্রস্তুত করতে পারেন।

এই তিনটি ফাংশন ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের ডেটা ফেচিং কৌশল নির্বাচন করতে পারেন, যেমন Static Generation বা Server-Side Rendering, যা আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করা যেতে পারে।

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

Next.js-এ পেজ ভিত্তিক ডেটা ফেচিং মূলত তিনটি প্রধান কৌশলের মাধ্যমে করা হয়:

1. getStaticProps (SSG - Static Site Generation)
2. getServerSideProps (SSR - Server Side Rendering)
3. getInitialProps (SSR/SSG - পূর্ববর্তী সংস্করণে ব্যবহৃত)

১. getStaticProps (SSG - Static Site Generation)

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

কিভাবে ব্যবহার করবেন:

// pages/index.js

export async function getStaticProps() {
  // API বা ডাটাবেস থেকে ডেটা ফেচ করুন
  const res = await fetch('https://api.example.com/posts');
  const data = await res.json();

  return {
    props: { posts: data },  // পেজের প্রপ্স হিসেবে ডেটা পাঠান
  };
}

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

getStaticProps ফাংশনটি তখন রান হয় যখন পেজটি প্রথমবার বিল্ড হয় এবং সেই ডেটা ব্যবহার করে স্ট্যাটিক HTML তৈরি হয়। এর ফলে পেজটি খুব দ্রুত লোড হয়, কারণ ডেটা আগে থেকেই পাওয়া যায় এবং সার্ভারে এক্সিকিউট করার প্রয়োজন হয় না।

সুবিধা:

• দ্রুত লোডিং
• স্কেলেবিলিটি

সীমাবদ্ধতা:

• ডেটা যদি পরিবর্তিত হয়, তবে নতুন বিল্ড করতে হবে।

২. getServerSideProps (SSR - Server Side Rendering)

getServerSideProps ফাংশনটি সার্ভার সাইড রেন্ডারিং (SSR) কৌশল ব্যবহার করে। এটি প্রতিটি রিকোয়েস্টের জন্য ডেটা ফেচ করে এবং সেই ডেটা ব্যবহার করে পেজটি রেন্ডার করে। অর্থাৎ, যখনই ব্যবহারকারী পেজে প্রবেশ করবে, তখন সার্ভার থেকে ডেটা নেওয়া হবে এবং রেন্ডারিং হবে।

কিভাবে ব্যবহার করবেন:

// pages/index.js

export async function getServerSideProps() {
  // API বা ডাটাবেস থেকে ডেটা ফেচ করুন
  const res = await fetch('https://api.example.com/posts');
  const data = await res.json();

  return {
    props: { posts: data },  // পেজের প্রপ্স হিসেবে ডেটা পাঠান
  };
}

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

getServerSideProps ফাংশনটি প্রতিটি রিকোয়েস্টের জন্য রান হয়, অর্থাৎ যখনই ব্যবহারকারী পেজটি অ্যাক্সেস করবে, সার্ভার থেকে নতুন ডেটা নেওয়া হবে এবং পেজটি রেন্ডার হবে। এটি বিশেষভাবে উপকারী যখন আপনার ডেটা সার্ভার সাইডে সেন্ট্রালাইজড থাকে বা ডেটা প্রায়ই পরিবর্তিত হয়।

সুবিধা:

• সর্বশেষ ডেটা রেন্ডারিং
• সার্ভার সাইডে কাস্টম লগিক প্রয়োগ করা যেতে পারে

সীমাবদ্ধতা:

• প্রতি রিকোয়েস্টে সার্ভার সাইডে ডেটা ফেচ করা হয়, যার ফলে কিছুটা লেটেন্সি থাকতে পারে।
• সার্ভারের উপর বেশি চাপ পড়ে।

৩. getInitialProps (SSR/SSG)

getInitialProps ফাংশনটি একটি পেজ কম্পোনেন্টের জন্য ডেটা ফেচ করতে ব্যবহৃত হয়। এটি আগের Next.js সংস্করণে বেশ জনপ্রিয় ছিল, তবে বর্তমানে getStaticProps এবং getServerSideProps এর বিকল্প হিসেবে ব্যবহার করা হয়। getInitialProps ডেটা ফেচ করার জন্য সার্ভার সাইড এবং ক্লায়েন্ট সাইড উভয়ই ব্যবহার করা যায়, তবে এটি সেরা পদ্ধতি নয় কারণ এটি রেন্ডারিং প্রক্রিয়াকে ধীর করে দেয়।

উদাহরণ:

// pages/index.js

HomePage.getInitialProps = async () => {
  const res = await fetch('https://api.example.com/posts');
  const data = await res.json();
  return { posts: data };
};

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

সুবিধা:

• ডেটা ফেচিং ক্লায়েন্ট এবং সার্ভার সাইড উভয়ই করা যায়।

সীমাবদ্ধতা:

• বর্তমানে getStaticProps এবং getServerSideProps এর তুলনায় কম কার্যকরী।

সারাংশ

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

• getStaticProps: স্ট্যাটিক সাইট জেনারেশন, ডেটা বিল্ড টাইমে ফেচ করা হয়।
• getServerSideProps: সার্ভার সাইড রেন্ডারিং, রিকোয়েস্ট প্রতি ডেটা ফেচ করা হয়।
• getInitialProps: পুরনো পদ্ধতি, সার্ভার সাইড এবং ক্লায়েন্ট সাইড উভয় জায়গায় ডেটা ফেচ করা যায়।

আপনার অ্যাপ্লিকেশনের প্রয়োজন অনুসারে উপযুক্ত পদ্ধতি নির্বাচন করুন।