Node.js, API,GetStaticProps,GetServerSideProps,Next js সম্পূর্ণ কোর্স - বাংলা টিউটোরিয়াল

Описание: Node.js, API,GetStaticProps,GetServerSideProps,Next js সম্পূর্ণ কোর্স - বাংলা টিউটোরিয়াল
নোড.জেএস, API, GetStaticProps, এবং GetServerSideProps এসেছে সম্পূর্ণ ওয়েব ডেভেলপমেন্টের একটি নতুন দিকে। এই টিউটোরিয়ালে, আমি আপনাকে ব্যক্তিগত এবং পেশাদার উদ্দেশ্যে এই তাত্ত্বিক বিষয়গুলি শেখাতে সাহায্য করবো। আমরা ব্যক্তিগত ওয়েব অ্যাপ্লিকেশন বা প্রোজেক্ট তৈরি করব, যা নোড.জেএস এবং নেক্স্ট.জেএস এর সাথে সম্পর্কিত। আমরা API ডেভেলপমেন্টের জন্য Express.js ব্যবহার করব, এবং উদাহরণ স্ট্যাটিক এবং সার্ভার সাইড পেজ রেন্ডারিং জন্য Next.js ব্যবহার করব। আসুন শুরু করা যাক!

বিষয়বস্তু

1. *Node.js এবং NPM ইনস্টলেশন*
2. *Express.js সেটআপ এবং এপ্লিকেশন তৈরি*
3. *রাউটিং এবং এপিআই তৈরি*
4. *GetStaticProps এবং GetServerSideProps পরিচিতি*
5. *নেক্স্ট.জেএস এপ্লিকেশন তৈরি*
6. *GetStaticProps এবং GetServerSideProps এর ব্যবহার*

1. Node.js এবং NPM ইনস্টলেশন

নোড.জেএস হলো জাভাস্ক্রিপ্টের একটি সার্ভার সাইড রানটাইম, যা আপনাকে সার্ভার সাইড কোড লেখার সুযোগ দেয়। NPM (Node Package Manager) হলো নোড.জেএস প্যাকেজ ম্যানেজমেন্ট সিস্টেম, যা প্যাকেজ ইনস্টল করতে এবং প্রজেক্ট সেটআপ করতে ব্যবহৃত হয়।

প্রথমে আপনার মেশিনে Node.js এবং NPM ইনস্টল করতে হবে। আপনি [এখানে](https://nodejs.org/) থেকে Node.js ইনস্টল করতে পারেন, এবং NPM টি নোড.জেএস ইনস্টলেশনের একটি অংশ।

ইনস্টলেশন পরীক্ষা করতে নিম্নলিখিত কমান্ড গুলি টার্মিনালে লিখুন:

```shell
node -v
npm -v
```

যদি আপনি Node.js এবং NPM সফলভাবে ইনস্টল করেন তাদের সংস্করণ নাম্বার দেখা যাবে।

2. Express.js সেটআপ এবং এপ্লিকেশন তৈরি

Express.js হলো নোড.জেএস এর একটি পপুলার ওয়েব ফ্রেমওয়ার্ক, যা সার্ভার সাইড ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। নিম্নলিখিত কমান্ড

দিয়ে একটি নতুন Express.js প্রজেক্ট তৈরি করা যায়:

```shell
mkdir my-express-app
cd my-express-app
npm init -y
npm install express
```

উপরের কমান্ডগুলি দিয়ে আপনি একটি নতুন ডিরেক্টরি তৈরি করেন (আপনি যে নাম দিতে চান তা ব্যবহার করতে পারেন) এবং সেই ডিরেক্টরিতে ন্যূনতম একটি প্যাকেজ ফাইল (`package.json`) তৈরি করেন। তারপর, Express.js প্যাকেজ ইনস্টল করেন।

3. রাউটিং এবং এপিআই তৈরি

Express.js ব্যবহার করে আমরা একটি সাদা এপিআই (API) তৈরি করতে পারি। আমরা একটি সিম্পল API তৈরি করব, যা "Hello, World!" ম্যাসেজ রিটার্ন করবে।

প্রথমে, আপনার প্রজেক্ট ফোল্ডারে একটি নতুন ফাইল তৈরি করুন এবং সেটির নাম সেট করুন `app.js`:

```shell
touch app.js
```

এখন `app.js` ফাইলে নিম্নলিখিত কোডটি যোগ দিন:


উপরের কোডে, আমরা Express.js ব্যবহার করে একটি সাদা সার্ভার তৈরি করেছি, যা `/` রুটে GET অনুরোধের জন্য "Hello, World!" ম্যাসেজ রিটার্ন করে। সার্ভারটি 3000 পোর্টে চালিয়েছে, এবং টার্মিনালে সার্ভার চালু হলে একটি স্ট্রিং প্রিন্ট করবে।

আপনি এই সার্ভারটি চালাতে নিম্নলিখিত কমান্ড গুলি ব্যবহার করতে পারেন:

```shell
node app.js
```

এখন আপনি ব্রাউজারে যেতে পারেন এবং `http://localhost:3000` ঠিকানায় "Hello, World!" ম্যাসেজটি দেখতে পাবেন।

4. GetStaticProps এবং GetServerSideProps পরিচিতি

Next.js হলো একটি পপুলার রিয়্যাক্ট ফ্রেমওয়ার্ক, যা স্ট্যাটিক সাইট জেনারেট এবং সার্ভার সাইড রেন্ডারিং সহ বিভিন্ন ধরণের ওয়েব পেজ তৈরি করতে সাহায্য করে। GetStaticProps এবং GetServerSideProps হলো Next.js এর দুটি জনপ্রিয় ফাংশন, যা ডাটা লোডিং এবং পেজ রেন্ডারিং এর জন্য ব্যবহৃত হয়।

**GetStaticProps**: এই ফাংশনটি স্ট্যাটিক পেজ জেনারেট করার সময় ডাটা লোড করতে ব্যবহৃত হয়। এটি সার্ভার সাইড

ডাটা হ্যান্ডলিং না করে এবং পেজ লোড হলে ক্লায়েন্ট সাইডে ডাটা স্ট্যাটিকভাবে ক্যাচ করে।
**GetServerSideProps**: এই ফাংশনটি প্রতিটি রিকোয়েস্টে সার্ভার সাইডে ডাটা লোড করতে ব্যবহৃত হয়। এটি ডাইনামিক ডাটা লোডিং এর জন্য ব্যবহৃত হয় এবং প্রতিটি রিকোয়েস্টে সার্ভার সাইডে ডাটা পুনরায় লোড করে।

5. নেক্স্ট.জেএস এপ্লিকেশন তৈরি

Next.js এপ্লিকেশন তৈরি করতে প্রথমে আপনার প্রজেক্ট ফোল্ডারে যান এবং নিম্নলিখিত কমান্ড গুলি চালান:

```shell
npx create-next-app my-next-app
cd my-next-app
```

উপরের কমান্ডগুলি Next.js এপ্লিকেশন তৈরি করতে সাহায্য করে। আমরা এখানে "my-next-app" নামের একটি Next.js প্রজেক্ট তৈরি করেছি। এটি একটি সাধারণ Next.js প্রজেক্ট, যা প্রথমত একটি ডিফল্ট হোম পেজ দেখায়।

6. GetStaticProps এবং GetServerSideProps এর ব্যবহার

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

প্রথম পেজ: স্ট্যাটিক ডাটা লোডিং (GetStaticProps)

প্রথমত, আমরা একটি স্ট্যাটিক পেজ তৈরি করব এবং GetStaticProps ব্যবহার করে ডাটা লোড করব।

1. আমরা `pages` ফোল্ডারে যান এবং একটি নতুন ফোল্ডার তৈরি করুন `static-page` নামে।
2. `static-page` ফোল্ডারে একটি নতুন ফাইল তৈরি করুন `index.js` নামে।
3. `index.js` ফাইলে নিম্নলিখিত কোড যোগ দিন:

উপরের কোডে, আমরা একটি রিয়েক্ট কম

্পোনেন্ট `StaticPage` তৈরি করেছি, যা স্ট্যাটিক পেজ হিসেবে ব্যবহার হবে। `getStaticProps` ফাংশন স্ট্যাটিক পেজের সাথে সম্পর্কিত, এটি স্ট্যাটিক ডাটা লোড করে এবং পেজের প্রোপার্টিস হিসেবে পাস করে।

দ্বিতীয় পেজ: সার্ভার সাইড ডাটা লোডিং (GetServerSideProps)

এবার আমরা একটি দ্বিতীয় পেজ তৈরি করব, যেখানে GetServerSideProps ব্যবহার করে সার্ভার সাইডে ডাটা লোড করব।