Next.js এ ডুবে যান: প্রোফেশনাল স্টাইল ও রাউট তৈরি করার কৌশল (পর্ব ১)

devsiam · October 9, 2024, 4:07pm

Step 1: Next.js কী এবং কেন ব্যবহার করবেন?

Next.js হল React-এর উপর ভিত্তি করে তৈরি একটি ফ্রেমওয়ার্ক যা আপনাকে সার্ভার সাইড রেন্ডারিং (SSR), স্ট্যাটিক সাইট জেনারেশন (SSG), এবং Client Side Rendering (CSR) সুবিধা দেয়।

SSR (Server-Side Rendering) এবং SSG (Static Site Generation) হলো Next.js এর দুইটি গুরুত্বপূর্ণ ফিচার, যা ওয়েব পেজ রেন্ডারিংয়ের পদ্ধতি নির্ধারণ করে।

SSR (Server-Side Rendering)

Server-Side Rendering হল এমন একটি পদ্ধতি যেখানে প্রতিবার একটি পেজ রিকোয়েস্ট করা হলে, সেই পেজ সার্ভার থেকে রেন্ডার করা হয় এবং HTML আকারে ক্লায়েন্টকে পাঠানো হয়।

SSR এর বৈশিষ্ট্য:

Dynamic Data: প্রতিবার ক্লায়েন্ট যখন রিকোয়েস্ট করে, সার্ভার তখন ডাটাবেস থেকে ডাটা নিয়ে পেজটি তৈরি করে।
SEO-Friendly: সার্ভার থেকে সম্পূর্ণ HTML পেজ সরাসরি পাঠানোর ফলে সার্চ ইঞ্জিনগুলো সহজেই পেজ ইন্ডেক্স করতে পারে।
Real-time Content: ডাটা বা কনটেন্ট রিয়েল টাইমে আপডেট হয় এবং প্রতিটি রিকোয়েস্টে নতুন HTML পেজ তৈরি হয়।

SSR উদাহরণ (Next.js):

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

  return {
    props: { data }, // এই ডাটা পেজ কম্পোনেন্টে পাঠানো হবে
  };
}

এটি প্রতিবার রিকোয়েস্টে সার্ভার থেকে নতুন HTML তৈরি করে পাঠায়।

SSG (Static Site Generation)

Static Site Generation হল এমন একটি পদ্ধতি যেখানে পেজটি বিল্ড টাইমে একবার তৈরি হয় এবং এরপর সেই পেজটি স্ট্যাটিক HTML আকারে সংরক্ষণ করা হয়। ভবিষ্যতে যেকোনো ক্লায়েন্ট সেই পেজ রিকোয়েস্ট করলে স্ট্যাটিক HTML ক্লায়েন্টের কাছে পাঠানো হয়।

SSG এর বৈশিষ্ট্য:

Static Content: পেজটি একবার তৈরি হলে, তা বিল্ড টাইমে স্ট্যাটিক HTML হিসেবে জমা থাকে এবং সার্ভার থেকে প্রতিবার এটি সার্ভ করতে পারে।
High Performance: স্ট্যাটিক ফাইল হওয়ায়, সার্ভার দ্রুত পেজ সরবরাহ করতে পারে।
SEO-Friendly: SSR এর মতোই, সার্চ ইঞ্জিনগুলো এই পেজগুলো সহজেই ইন্ডেক্স করতে পারে।

SSG উদাহরণ (Next.js):

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

  return {
    props: { data }, // পেজ তৈরি করার সময় একবার ডাটা এনে এখানে পাঠানো হয়
  };
}

এটি বিল্ড টাইমে একবার HTML তৈরি করে এবং পরে রিকোয়েস্ট এলে সেই HTML পাঠায়।

SSR এবং SSG এর মধ্যে পার্থক্য:

SSR: প্রতিবার রিকোয়েস্টের সময় সার্ভার থেকে পেজ রেন্ডার হয়। ডাটা প্রতিবার আপডেট হয়।
SSG: পেজ একবার তৈরি হলে তা স্ট্যাটিক HTML হিসেবে জমা থাকে, ফলে রিকোয়েস্টের সময় নতুন করে পেজ রেন্ডার করার প্রয়োজন হয় না।

কোনটি কখন ব্যবহার করবেন?

SSR: যখন আপনার পেজের ডাটা প্রতিবার পরিবর্তিত হয় এবং রিয়েল-টাইম ডাটা দেখানো প্রয়োজন (যেমন: নিউজ সাইট, সোশ্যাল মিডিয়া পোস্ট ইত্যাদি)।
SSG: যখন পেজের ডাটা স্থিতিশীল থাকে এবং বারবার পরিবর্তনের প্রয়োজন হয় না (যেমন: ব্লগ পোস্ট, ডকুমেন্টেশন সাইট)।

আশা করি, SSR এবং SSG সম্পর্কে আপনার ধারণা পরিষ্কার হয়েছে!

কেন Next.js বেছে নিবেন:

SEO ফ্রেন্ডলি: সার্ভার সাইড রেন্ডারিংয়ের কারণে সার্চ ইঞ্জিন সহজে ইন্ডেক্স করতে পারে।
পারফরম্যান্স: স্ট্যাটিক জেনারেশন ও সার্ভার সাইড রেন্ডারিং এর মিশ্রণ দ্বারা পারফরম্যান্স ভালো হয়।
ইজি রাউটিং সিস্টেম: ফাইল বেসড রাউটিং সিস্টেম যা আপনাকে কোন অতিরিক্ত কনফিগারেশন ছাড়াই রাউট তৈরি করতে দেয়।
API Routes: সার্ভারলেস API তৈরির জন্য সহজ ইন্টিগ্রেশন দেয়।

Step 2: Next.js সেটআপ

প্রথমে আপনার মেশিনে Next.js সেটআপ করুন।

Node.js ইনস্টল করুন: আপনার সিস্টেমে Node.js না থাকলে Node.js ডাউনলোড করুন।
Next.js প্রজেক্ট তৈরি করুন:
```
npx create-next-app@latest
```
উপরের কমান্ডটি ব্যবহার করে Next.js এর ডিফল্ট টেমপ্লেট দিয়ে প্রজেক্ট তৈরি করুন।
প্রজেক্ট ডিরেক্টরি এ ঢুকুন:
```
cd your-project-name
```
ডেভেলপমেন্ট সার্ভার চালু করুন:
```
npm run dev
```
এখন ব্রাউজারে গিয়ে http://localhost:3000 ভিজিট করুন। Next.js অ্যাপটি চালু থাকবে।

Step 3: ফোল্ডার স্ট্রাকচার

Next.js এর ডিফল্ট ফোল্ডার স্ট্রাকচার সাধারণত নিচের মতো হয়। প্রতিটি ফোল্ডারের ভূমিকা এখানে উল্লেখ করা হল:

pages/: এখানে থাকা প্রতিটি ফাইল একটি রাউট হিসেবে কাজ করে। উদাহরণ: pages/index.js হবে হোম পেজ।
public/: এখানে আপনার সব স্ট্যাটিক ফাইল (যেমন: ইমেজ, ফন্ট, ভিডিও) রাখা হয় যা সরাসরি অ্যাক্সেস করা যায়।
components/: রিইউজেবল React কম্পোনেন্টগুলো এখানে রাখা হয়। উদাহরণ: Button.js, Navbar.js।
styles/: স্টাইলিংয়ের জন্য প্রয়োজনীয় CSS ফাইল রাখা হয়। আপনি এখানে গ্লোবাল CSS অথবা মডিউলভিত্তিক CSS রাখতে পারেন।
api/: API Routes রাখতে pages/api ফোল্ডারে API ফাইলগুলি রাখা হয়।
node_modules/: প্রজেক্টে ব্যবহৃত সব ডিপেন্ডেন্সির জন্য।
.next/: এটি কম্পাইল হওয়া কোড বা স্ট্যাটিক ফাইলগুলির জন্য একটি অটো জেনারেটেড ফোল্ডার (ইনপ্রোডাকশনে ব্যবহৃত)।
.gitignore: যেসব ফাইল বা ফোল্ডার গিট রিপোজিটরিতে ট্র্যাক করা হবে না, সেগুলি এখানে উল্লেখ করা হয়।
next.config.js: এই ফাইলটি Next.js এর কনফিগারেশন কাস্টমাইজ করতে ব্যবহার করা হয়।

Step 4: রাউটিং সিস্টেম

Next.js এ রাউটিং ফাইলের উপর ভিত্তি করে করা হয়। যেমন:

নতুন পেজ তৈরি করুন:
pages/about.js নামে একটি ফাইল তৈরি করুন এবং নিচের কোডটি লিখুন:
```
const About = () => {
  return <h1>About Page</h1>;
};
export default About;
```
এখন আপনি ব্রাউজারে গিয়ে http://localhost:3000/about পেজটি দেখতে পাবেন।
Dynamic Routing: ডাইনামিক রাউটিং করতে, pages/blog/[id].js নামে ফাইল তৈরি করুন:
```
import { useRouter } from 'next/router';

const Blog = () => {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Blog ID: {id}</h1>;
};
export default Blog;
```
ব্রাউজারে গিয়ে http://localhost:3000/blog/123 এ গেলে আপনি “Blog ID: 123” দেখতে পাবেন।

Step 5: স্টাইলিং (CSS Integration)

Next.js এ বিভিন্ন স্টাইলিং মেথড ব্যবহার করা যায়। স্টাইল অ্যাপ্লাই করার কয়েকটি পদ্ধতি নিচে উল্লেখ করা হল:

গ্লোবাল CSS:
আপনার pages/_app.js ফাইল থেকে গ্লোবাল CSS অ্যাপ্লাই করতে পারেন:
```
import '../styles/globals.css';

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

export default MyApp;
```

CSS মডিউলস: প্রতিটি কম্পোনেন্টের জন্য আলাদা CSS স্কোপ করা যায়। উদাহরণস্বরূপ:

/* styles.module.css */
.title {
  color: blue;
}

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

const Home = () => {
  return <h1 className={styles.title}>Hello World</h1>;
};
export default Home;

**CSS Integration*

Next.js এ সাধারণ CSS এবং CSS মডিউল উভয়ই ব্যবহার করা যায়। নিচে দুইটি পদ্ধতির উদাহরণ দেওয়া হলো।

1. গ্লোবাল CSS

আপনার অ্যাপ্লিকেশনের জন্য গ্লোবাল স্টাইল ব্যবহার করতে হলে, Next.js এর গ্লোবাল CSS ফিচার ব্যবহার করতে পারেন।

Step-by-Step:

styles/ ফোল্ডারে একটি CSS ফাইল তৈরি করুন (যেমন globals.css):

css

/* styles/globals.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

এরপর pages/_app.js ফাইলের মাধ্যমে এই গ্লোবাল CSS অ্যাপ্লাই করুন:

js

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

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

export default MyApp;

এটি গ্লোবালভাবে সমস্ত পেজে প্রভাব ফেলবে।

2. CSS মডিউলস (Scoped CSS)

Next.js এ CSS মডিউল ব্যবহার করলে প্রতিটি কম্পোনেন্টের জন্য আলাদা স্টাইল স্কোপ তৈরি করা হয়, যার ফলে কোন স্টাইল কনফ্লিক্ট হয় না।

Step-by-Step:

styles/ ফোল্ডারে একটি CSS মডিউল ফাইল তৈরি করুন (যেমন Home.module.css):

css

/* styles/Home.module.css */
.title {
  color: blue;
  font-size: 2rem;
}

.description {
  color: grey;
  font-size: 1.2rem;
}

তারপর আপনার কম্পোনেন্টে CSS মডিউলটি ইমপোর্ট করে ব্যবহার করুন:

jsx

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

const Home = () => {
  return (
    <div>
      <h1 className={styles.title}>Welcome to My Next.js App</h1>
      <p className={styles.description}>This is a simple page with CSS modules.</p>
    </div>
  );
};

export default Home;

CSS মডিউল সুবিধা:

প্রতিটি কম্পোনেন্টের স্টাইল লোকাল স্কোপে থাকে, ফলে বিভিন্ন কম্পোনেন্টের স্টাইল একে অপরকে প্রভাবিত করে না।

এই দুইটি অংশে Next.js শেখার জন্য প্রাথমিক গাইডলাইন শেষ হল। Part 2 এ আরও অ্যাডভান্সড টপিক নিয়ে বিস্তারিত আলোচনা করা হবে।