Trong quá trình phát triển ứng dụng web hiện đại với Next.js, việc kết nối với cơ sở dữ liệu là bước quan trọng để xây dựng các tính năng động như quản lý người dùng, sản phẩm hay nội dung. Bài viết dưới đây FPT Polytechnic TP HCM sẽ hướng dẫn chi tiết cách kết nối với MongoDB, tạo API CRUD và hiển thị dữ liệu trong ứng dụng.
Cài đặt dự án Next.js
Nếu bạn chưa có project, tạo mới bằng:
npx create-next-app my-next-mongo
cd my-next-mongo
Cài đặt MongoDB driver hoặc Mongoose
Cách 1 – Dùng Mongoose (phổ biến, dễ quản lý Schema)
npm install mongoose
Cách 2 – Dùng MongoDB driver gốc
npm install mongodb
Gợi ý: nên dùng Mongoose nếu bạn làm CRUD, validation, schema rõ ràng.
Tạo file kết nối MongoDB
Tạo thư mục /lib/dbConnect.js (hoặc /utils/dbConnect.js):
// lib/dbConnect.js
Tạo file .env.local
Trong thư mục gốc của dự án:
MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/myDatabase
Thay <username>, <password>, và myDatabase bằng thông tin của bạn (lấy từ MongoDB Atlas).
Tạo model ví dụ (User)
Tạo file /models/User.js:
// models/User.js
Tạo API route để thao tác dữ liệu
Tạo file /app/api/users/route.js (Next.js 13 trở lên):
// app/api/users/route.js
Gọi API trong component
Ví dụ hiển thị danh sách user trong app/page.js:
async function getUsers() {
const res = await fetch(“http://localhost:3000/api/users”, {
cache: “no-store”,
});
return res.json();
}
export default async function Home() {
const users = await getUsers();
return (
<main>
<h1>Danh sách người dùng</h1>
<ul>
{users.map((u) => (
<li key={u._id}>{u.name} – {u.email}</li>
))}
</ul>
</main>
);
}
Chạy thử
npm run dev
Truy cập: http://localhost:3000/api/users
→ Nếu thấy JSON dữ liệu, nghĩa là đã kết nối thành công
Việc kết nối giữa Next.js và MongoDB giúp bạn xây dựng nhanh các ứng dụng fullstack hiện đại. Với Mongoose, bạn có thể dễ dàng quản lý schema, xử lý dữ liệu và phát triển các API CRUD một cách rõ ràng, hiệu quả. Đây cũng là nền tảng quan trọng để phát triển các hệ thống lớn hơn như CMS, e-commerce hay SaaS trong tương lai.
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
