Created At: 2/15/2025

Next.js: The React Framework for Production

Next.js: The React Framework for Production (বাংলা ও ইংরেজি মিশ্রিত গাইড)

আধুনিক ওয়েব অ্যাপ্লিকেশনে হাই-পারফরম্যান্স এবং সার্চ ইঞ্জিন অপ্টিমাইজেশনের (SEO) জন্য Next.js বর্তমান বিশ্বের অন্যতম জনপ্রিয় React ফ্রেমওয়ার্ক। সাধারণ React (CRA) ক্লায়েন্ট-সাইড রেন্ডারিংয়ের (CSR) ওপর নির্ভরশীল হলেও, Next.js সার্ভার-সাইড ক্ষমতা যুক্ত করে অ্যাপ্লিকেশনকে আরও দ্রুত, স্কেলেবল এবং প্রোডাকশন-রেডি করে তোলে।

কেন Next.js ব্যবহার করবেন? (Key Features)

• Server-Side Rendering (SSR): প্রতিটি রিকোয়েস্টে পেজ সার্ভারেই রেন্ডার হয়ে ব্রাউজারে যায়, যা জটিল ডাইনামিক ডেটা লোড করার ক্ষেত্রে দারুণ পারফরম্যান্স এবং SEO সুবিধা দেয়।

• Static Site Generation (SSG): বিল্ড টাইমে (Build Time) এইচটিএমএল পেজ তৈরি হয়ে যায়, ফলে পেজ লোডিং স্পিড হয় অবিশ্বাস্য রকমের দ্রুত।

• Full-stack API Routes: আলাদা Node.js/Express ব্যাকএন্ড সেটআপ ছাড়াই একই প্রোজেক্টের ভেতর সার্ভারলেস ব্যাকএন্ড API তৈরি করা যায়।

• Image Optimization: বিল্ট-ইন next/image কম্পোনেন্ট স্বয়ংক্রিয়ভাবে ইমেজ রিসাইজ, কমপ্রেস এবং আধুনিক ফরম্যাটে (WebP/AVIF) কনভার্ট করে লোডিং স্পিড বাড়ায়।

• Automatic Code Splitting: শুধুমাত্র বর্তমান পেজের জন্য প্রয়োজনীয় JavaScript এবং CSS লোড হয়, ফলে অতিরিক্ত ডেটা লোড হয়ে সাইট স্লো হয় না।

ইন্সটলেশন ও প্রোজেক্ট সেটআপ

নতুন একটি Next.js প্রোজেক্ট শুরু করার কমান্ড:

Bash

npx create-next-app@latest my-next-app

প্রোজেক্ট ফোল্ডারে গিয়ে লোকাল ডেভেলপমেন্ট সার্ভার চালু করতে:

Bash

cd my-next-app
npm run dev

ব্রাউজারে http://localhost:3000 ওপেন করলে আপনার অ্যাপটি লাইভ দেখা যাবে।

কোর কনসেপ্ট ও কোড এক্সাম্পল

১. ফাইল-বেজড রাউটিং (File-based Routing)

Next.js-এ ম্যানুয়াল রাউটিং কনফিগার করতে হয় না; ডিরেক্টরি স্ট্রাকচার অনুযায়ী পেজ স্বয়ংক্রিয়ভাবে তৈরি হয়:

JavaScript

// pages/about.js অথবা app/about/page.js
export default function About() {
  return (
    <main>
      <h1>About Us</h1>
      <p>Welcome to our platform!</p>
    </main>
  );
}

ব্রাউজারে /about পাথে হিট করলেই পেজটি রেন্ডার হবে।

২. ডেটা ফেচিং মেথডস (Data Fetching)

সার্ভার-সাইড রেন্ডারিং (SSR)

প্রতিটি ইউজার রিকোয়েস্টে ফ্রেশ ডেটা ফেচ করার জন্য:

JavaScript

// Pages Router Syntax
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return { 
    props: { products } 
  };
}

স্ট্যাটিক সাইট জেনারেশন (SSG)

বিল্ড টাইমে একবার ডেটা ফেচ করে স্ট্যাটিক পেজ জেনারেট করার জন্য:

JavaScript

// Pages Router Syntax
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/blogs');
  const posts = await res.json();

  return { 
    props: { posts },
    revalidate: 60 // Incremental Static Regeneration (ISR)
  };
}

৩. ব্যাকএন্ড API রাউটস (API Routes)

সার্ভারলেস এন্ডপয়েন্ট তৈরি করা:

JavaScript

// pages/api/hello.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ status: 'success', message: 'Hello from Next.js API!' });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

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