Next.js এ Mongoose ব্যবহার করে MongoDB কানেকশন ও CRUD অপারেশন (Full Guide)
about 4 hours ago
38
0
0
programming

Next.js এ Mongoose ব্যবহার করে MongoDB কানেকশন ও CRUD অপারেশন (Full Guide)

🧠 Mongoose কী?

Mongoose হলো একটি ODM (Object Data Modeling) লাইব্রেরি যা Node.js এর মাধ্যমে MongoDB ডাটাবেসের সাথে সহজভাবে কাজ করার সুযোগ দেয়।
এটি JavaScript অবজেক্টকে MongoDB ডকুমেন্টে রূপান্তর করে এবং স্কিমা-ভিত্তিক ডাটা মডেলিং সাপোর্ট দেয়।

এক কথায়, Mongoose দিয়ে তুমি MongoDB-এর মধ্যে একটি structure enforce করতে পারো, যাতে ডাটা এলোমেলোভাবে না যায়।

🔹 উদাহরণ:

যদি তুমি “User” নামে একটি কালেকশন রাখতে চাও যেখানে name এবং email থাকবে, তাহলে Mongoose দিয়ে এটি এমনভাবে তৈরি করা যায়:

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
});

এটি দিয়ে তুমি নির্দিষ্ট ডাটার ধরণ (type), আবশ্যিকতা (required), ডিফল্ট মান ইত্যাদি নির্ধারণ করতে পারবে।

⚡ কেন Mongoose ব্যবহার করব?

MongoDB নিজেই স্কিমাহীন, অর্থাৎ এটি যেকোনো রকম ডাটা সংরক্ষণ করতে পারে। তবে প্রোডাকশন অ্যাপে এটি ঝুঁকিপূর্ণ, কারণ inconsistent ডাটা পরে সমস্যা তৈরি করে।

Mongoose ব্যবহারের প্রধান সুবিধাগুলো হলো:

✅ Schema validation — ডাটার স্ট্রাকচার নির্ধারণ করা যায়। ✅ Built-in query helpers — find(), findById(), create(), updateOne() ইত্যাদি ফাংশন পাওয়া যায়। ✅ Middleware support — ডাটা save/update এর আগে/পরে কাস্টম লজিক চালানো যায়। ✅ Relationship support (populate) — একাধিক কালেকশনকে সংযুক্ত করা যায়।

⚙️ Next.js প্রজেক্ট সেটআপ

🔹 Step 1: নতুন প্রজেক্ট তৈরি

npx create-next-app@latest nextjs-mongoose-demo
cd nextjs-mongoose-demo

🔹 Step 2: Mongoose ইনস্টল করা

npm install mongoose

🔹 Step 3: .env.local ফাইল তৈরি

তোমার MongoDB Atlas কানেকশন URL যোগ করো:

MONGODB_URI=mongodb+srv://username:password@cluster0.mongodb.net/myDatabase

👉 username, password, myDatabase পরিবর্তন করো নিজের অনুযায়ী।

🔌 MongoDB কানেকশন কনফিগারেশন

এখন আমরা MongoDB এর সাথে কানেকশন সেট করবো।

lib/mongodb.js নামে ফাইল তৈরি করো:

import mongoose from "mongoose";

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error("Please define the MONGODB_URI environment variable");
}

let isConnected = false;

export const connectDB = async () => {
  if (isConnected) {
    console.log("=> using existing database connection");
    return;
  }

  try {
    const db = await mongoose.connect(MONGODB_URI);
    isConnected = db.connections[0].readyState;
    console.log("✅ MongoDB connected successfully");
  } catch (error) {
    console.error("❌ MongoDB connection failed:", error);
  }
};

এই ফাইলটি নিশ্চিত করবে যে MongoDB শুধুমাত্র একবারই কানেক্ট হবে, বারবার নয়।

🧩 Schema ও Model তৈরি

আমরা একটি “Post” মডেল তৈরি করবো, যেখানে title ও content থাকবে।

models/Post.js

import mongoose from "mongoose";

const postSchema = new mongoose.Schema(
  {
    title: {
      type: String,
      required: [true, "Title is required"],
    },
    content: {
      type: String,
      required: [true, "Content is required"],
    },
  },
  { timestamps: true }
);

export default mongoose.models.Post || mongoose.model("Post", postSchema);

✅ mongoose.models.Post || ... ব্যবহার করার মানে হলো: Next.js এর হট-রিলোডিং এ একই মডেল বারবার রেজিস্টার হয়ে এরর যেন না দেয়।

🚀 API Route সেটআপ (CRUD অপারেশন)

Next.js 13/14 এর app ডিরেক্টরি অনুযায়ী app/api/posts/ ফোল্ডার তৈরি করো।

🟢 POST — নতুন ডাটা তৈরি (Create)

app/api/posts/route.js

import { connectDB } from "@/lib/mongodb";
import Post from "@/models/Post";
import { NextResponse } from "next/server";

export async function POST(req) {
  try {
    await connectDB();
    const { title, content } = await req.json();
    const newPost = await Post.create({ title, content });
    return NextResponse.json({ message: "Post created successfully", post: newPost }, { status: 201 });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

🔵 GET — সব পোস্ট দেখা (Read)

একই ফাইলের নিচে GET() ফাংশন যোগ করো:

export async function GET() {
  try {
    await connectDB();
    const posts = await Post.find().sort({ createdAt: -1 });
    return NextResponse.json(posts, { status: 200 });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

🟡 PUT — সম্পূর্ণ ডাটা আপডেট

app/api/posts/[id]/route.js

import { connectDB } from "@/lib/mongodb";
import Post from "@/models/Post";
import { NextResponse } from "next/server";

export async function PUT(req, { params }) {
  const { id } = params;
  const { title, content } = await req.json();

  try {
    await connectDB();
    const updatedPost = await Post.findByIdAndUpdate(id, { title, content }, { new: true });
    return NextResponse.json(updatedPost, { status: 200 });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

🟠 PATCH — আংশিক আপডেট (Partial Update)

export async function PATCH(req, { params }) {
  const { id } = params;
  const data = await req.json();

  try {
    await connectDB();
    const updated = await Post.findByIdAndUpdate(id, data, { new: true });
    return NextResponse.json(updated, { status: 200 });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

🔴 DELETE — পোস্ট ডিলিট করা

export async function DELETE(req, { params }) {
  const { id } = params;

  try {
    await connectDB();
    await Post.findByIdAndDelete(id);
    return NextResponse.json({ message: "Post deleted successfully" }, { status: 200 });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

🧑‍💻 Frontend থেকে API কল করা

এখন আমরা ফ্রন্টএন্ডে একটি ফর্ম তৈরি করবো, যেটি নতুন পোস্ট যোগ করবে।

app/create/page.jsx

"use client";
import { useState } from "react";

export default function CreatePost() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch("/api/posts", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title, content }),
    });
    const data = await res.json();
    alert(data.message);
  };

  return (
    <div className="max-w-md mx-auto mt-10 p-5 border rounded-lg shadow">
      <h1 className="text-2xl font-bold mb-4 text-center">Create New Post</h1>
      <form onSubmit={handleSubmit} className="space-y-3">
        <input
          type="text"
          placeholder="Enter title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          className="border p-2 w-full rounded"
          required
        />
        <textarea
          placeholder="Enter content"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          className="border p-2 w-full rounded"
          required
        />
        <button
          type="submit"
          className="bg-blue-500 text-white w-full py-2 rounded hover:bg-blue-600"
        >
          Submit
        </button>
      </form>
    </div>
  );
}

📂 ফোল্ডার স্ট্রাকচার ও বেস্ট প্র্যাকটিস

nextjs-mongoose-demo/
├─ app/
│  ├─ api/
│  │  └─ posts/
│  │     ├─ route.js
│  │     └─ [id]/
│  │        └─ route.js
│  ├─ create/
│  │  └─ page.jsx
│  ├─ page.js
├─ lib/
│  └─ mongodb.js
├─ models/
│  └─ Post.js
├─ .env.local
└─ package.json

💡 Tip:

  • Mongoose কানেকশনকে সর্বদা একটি আলাদা ফাইল (যেমন lib/mongodb.js) এ রাখো।
  • Next.js App Router ব্যবহার করলে NextResponse দিয়ে response ফেরত দাও।
  • Error Handling সবসময় try...catch দিয়ে করো।

🧠 সাধারণ সমস্যা ও সমাধান

নিচের সমস্যাগুলো Next.js ও Mongoose ব্যবহার করার সময় প্রায়ই দেখা যায়, এবং তাদের সমাধানও সহজ —

১. MongooseServerSelectionError: এই এরর সাধারণত ভুল MongoDB URI বা নেটওয়ার্ক সমস্যার কারণে হয়। .env.local ফাইলে থাকা MONGODB_URI ঠিক আছে কিনা যাচাই করো।

২. Cannot overwrite model once compiled: এই সমস্যা ঘটে যখন একই মডেল একাধিকবার রেজিস্টার করা হয়। সমাধান হলো — mongoose.models.Post || mongoose.model() ব্যবহার করা, যাতে একাধিক রেজিস্ট্রেশন না হয়।

৩. Invalid JSON body: এটি সাধারণত fetch রিকোয়েস্টে ভুল ফরম্যাটে ডাটা পাঠানোর কারণে ঘটে। headers: { "Content-Type": "application/json" } যোগ করে JSON ফরম্যাটে ডাটা পাঠাও।

৪. ডাটা দেখা যাচ্ছে না: যদি কোনো ডাটা না দেখা যায়, তাহলে সম্ভবত MongoDB কালেকশন ফাঁকা। আগে POST রিকোয়েস্ট পাঠিয়ে একটি ডকুমেন্ট ইনসার্ট করো, তারপর আবার GET দিয়ে চেক করো।

🧾 সারসংক্ষেপ টেবিল

কাজমেথডরুটব্যাখ্যা
CreatePOST/api/postsনতুন পোস্ট তৈরি
ReadGET/api/postsসব পোস্ট দেখা
UpdatePUT/api/posts/:idপুরো পোস্ট আপডেট
Partial UpdatePATCH/api/posts/:idআংশিক আপডেট
DeleteDELETE/api/posts/:idপোস্ট মুছে ফেলা

এই টিউটোরিয়ালে আমরা শিখলাম কিভাবে Next.js প্রজেক্টে Mongoose ব্যবহার করে MongoDB কানেকশন তৈরি করতে হয়, এবং কিভাবে API Route এর মাধ্যমে CRUD অপারেশন করা যায়।

এখন তুমি এই বেসিক স্ট্রাকচার ব্যবহার করে নিজের ব্লগ, টাস্ক ম্যানেজার বা যেকোনো ডাটাবেস-ড্রাইভেন ওয়েব অ্যাপ তৈরি করতে পারবে।

✨ প্র্যাকটিস করো, নিজের প্রজেক্টে এক্সপেরিমেন্ট করো, আর ধীরে ধীরে Full-Stack Developer হয়ে উঠো!

🔗 দরকারি রিসোর্স:

Next.jsMongooseMongoDBCRUDAPISchemaModelBackendDatabaseFullstack
Next.js এ Mongoose ব্যবহার করে MongoDB কানেকশন ও CRUD অপারেশন (Full Guide) - TrickBuzz