Next.js এর হাতেখড়ি (পর্ব ১) – পরিচিতি ও প্রথম প্রজেক্ট সেটআপ

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

Next.js কী?

Next.js হলো React-এর ওপর বানানো একটা ফ্রেমওয়ার্ক। React নিজে শুধু UI বানানোর একটা লাইব্রেরি — রাউটিং, সার্ভার-সাইড রেন্ডারিং, ফাইল বান্ডলিং, এসবের জন্য আলাদা টুল জোড়া লাগাতে হয় (যেমন React এর হাতেখড়ি সিরিজে আমরা এসব ম্যানুয়ালি বা ভিন্ন লাইব্রেরি দিয়ে সামলেছি)। Next.js এই সবকিছু একসাথে বান্ডল করে দেয় — রাউটিং, রেন্ডারিং কৌশল, ইমেজ অপটিমাইজেশন, API রুট — সব বিল্ট-ইন।

React vs Next.js — মূল পার্থক্য

বিষয়	প্লেইন React	Next.js
রাউটিং	আলাদা লাইব্রেরি লাগে (react-router)	বিল্ট-ইন, ফাইল-ভিত্তিক
রেন্ডারিং	শুধু ব্রাউজারে (CSR)	সার্ভার ও ব্রাউজার দুটোতেই, নমনীয়ভাবে
API/ব্যাকএন্ড	আলাদা সার্ভার লাগে (Worker, Express)	একই প্রজেক্টে API Routes বিল্ট-ইন
SEO	দুর্বল (খালি HTML প্রথমে লোড হয়)	শক্তিশালী (সার্ভারে পূর্ণ HTML রেন্ডার হয়)

সহজ কথায় — React হলো ইঞ্জিন, Next.js হলো পুরো গাড়ি, রাস্তায় নামার জন্য প্রস্তুত।

App Router — এই সিরিজে যা ব্যবহার হবে

Next.js-এর বর্তমান প্রজন্মের রাউটিং সিস্টেমকে বলে App Router (একটা পুরনো সিস্টেমও আছে, Pages Router, কিন্তু নতুন প্রজেক্টে App Router-ই এখন স্ট্যান্ডার্ড)। এই সিরিজের পুরোটাই App Router দিয়ে হবে।

প্রথম প্রজেক্ট তৈরি করা

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

# কিছু প্রশ্ন আসবে:
# TypeScript?              → শেখার শুরুতে "No" দিয়ে শুরু করা যায় (পরের সিরিজে TypeScript শিখব)
# ESLint?                  → Yes
# Tailwind CSS?            → Yes (CSS এর হাতেখড়ি সিরিজের সাথে মিলিয়ে ঐচ্ছিক)
# App Router?              → অবশ্যই Yes
# Import alias কাস্টমাইজ? → No (ডিফল্ট রাখাই সহজ)

cd my-first-app
npm run dev

npm run dev চালালে http://localhost:3000-এ একটা ডিফল্ট Next.js পেজ দেখা যাবে।

ফোল্ডার স্ট্রাকচার — এক নজরে

my-first-app/
├── app/
│   ├── layout.js      # পুরো অ্যাপের কমন লেআউট (হেডার, ফুটার ইত্যাদি)
│   ├── page.js        # হোমপেজ ("/")
│   └── globals.css    # গ্লোবাল স্টাইল
├── public/            # স্ট্যাটিক ফাইল (ছবি, ফেভিকন)
├── next.config.js     # Next.js কনফিগারেশন
└── package.json

লক্ষ্য করুন — app/ ফোল্ডারটাই মূল কেন্দ্র। এই সিরিজে আমরা প্রায় সবকিছু এই ফোল্ডারের ভেতরেই করব।

সবচেয়ে সহজ পেজ — app/page.js

React এর হাতেখড়ি সিরিজের চেনা JSX সিনট্যাক্স, কিন্তু এখানে কোনো ReactDOM.createRoot বা import React লাগে না — Next.js নিজে থেকেই সবকিছু সেটআপ করে দেয়।

// app/page.js
export default function HomePage() {
  return (
    <div>
      <h1>ArifStack-এ স্বাগতম!</h1>
      <p>এটাই Next.js-এর হোমপেজ।</p>
    </div>
  );
}

এই ফাইলটা সেভ করলেই ব্রাউজারে সাথে সাথে পরিবর্তন দেখা যাবে — এটাকে বলে Fast Refresh, রিফ্রেশ ছাড়াই কোড বদলানোর সাথে সাথে UI আপডেট হয়।

layout.js — সব পেজের কমন কাঠামো

layout.js একটা বিশেষ ফাইল, যা প্রতিটা পেজকে "মুড়িয়ে" রাখে — HTML-এর <html>, <body> ট্যাগ, নেভবার, ফুটারের মতো জিনিস এখানে রাখা হয়।

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="bn">
      <body>
        <header>
          <h2>ArifStack</h2>
        </header>

        {children} {/* এখানে প্রতিটা পেজের কনটেন্ট বসবে */}

        <footer>
          <p>© ২০২৬ ArifStack</p>
        </footer>
      </body>
    </html>
  );
}

children এখানে React এর হাতেখড়ি সিরিজের চেনা props.children প্যাটার্নই — যেকোনো পেজ (page.js) এই {children}-এর জায়গায় বসে যায়।

ইন্টারেক্টিভ — Next.js Request Flow

নিচে দেখো ইউজার একটা URL ভিজিট করলে Next.js-এর ভেতরে কী ঘটে, ধাপে ধাপে।

শেষ ধাপের hydration শব্দটা এই সিরিজে বারবার আসবে — এটাই Next.js-এর সবচেয়ে গুরুত্বপূর্ণ ধারণাগুলোর একটা, পরের কয়েক পর্বে এটা আরও গভীরভাবে বুঝব।

ভালো অভ্যাস

শেখার শুরুতে TypeScript ছাড়াই শুরু করুন — React এর হাতেখড়ি সিরিজের মতোই প্লেইন JS-এ concept-এ ফোকাস করা সহজ
app/ ফোল্ডারের বাইরে কোড না রাখাই ভালো — Next.js-এর কনভেনশন মেনে চললে ভবিষ্যতে টিমের সাথে কাজ করাও সহজ হয়
Fast Refresh কাজ না করলে সার্ভার রিস্টার্ট করুন — মাঝেমধ্যে next.config.js বদলালে ম্যানুয়াল রিস্টার্ট লাগে

নিজে চেষ্টা করো

Exercise:

create-next-app দিয়ে নিজের প্রথম প্রজেক্ট বানাও, npm run dev দিয়ে চালাও।
app/page.js এডিট করে নিজের নাম আর একটা ছোট পরিচিতি লেখো, Fast Refresh দেখো।
app/layout.js-এ একটা সাধারণ হেডার-ফুটার যোগ করো, দেখো সব পেজে এটা কীভাবে দেখা যায়।
Browser-এর "View Page Source" দিয়ে দেখো — পেজে সত্যিই পূর্ণ HTML কনটেন্ট আছে কিনা (React এর হাতেখড়ি সিরিজের সাধারণ CSR অ্যাপে এটা খালি দেখাতো, এখানে না)।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব File-based Routing — কীভাবে নতুন ফোল্ডার আর ফাইল বানিয়ে নতুন পেজ তৈরি করতে হয়, নেস্টেড রুট, আর একাধিক লেআউট কীভাবে একসাথে কাজ করে।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ