Hướng dẫn Xây dựng Fullstack Cơ bản: Node.js Backend & Next.js Frontend (Lab 1)
Trong bài viết này, chúng ta sẽ cùng nhau đi qua các bước cơ bản để thiết lập một hệ thống Fullstack đơn giản. Cụ thể, chúng ta sẽ xây dựng một API Backend bằng Node.js kết nối cơ sở dữ liệu MongoDB và hiển thị dữ liệu đó lên giao diện hiện đại với Next.js.
Phần 1: Thiết lập Backend với Node.js & MongoDB
1. Chuẩn bị môi trường
Trước tiên, hãy đảm bảo máy tính của bạn đã cài đặt:
Node.js: Download tại đây
MongoDB Community Server: Download tại đây
2. Khởi tạo Database
Tạo database có tên FE2_db và thêm 2 bộ sưu tập (Collections):
categories: Lưu trữ danh mục sản phẩm (Category 1, Category 2...).
products: Lưu trữ thông tin chi tiết sản phẩm và liên kết với categoryId.
3. Cấu trúc Project Backend
Sử dụng express-generator để tạo nhanh cấu trúc dự án:
express --view=ejs backend
cd backend
npm install nodemon mongodb
Kết nối Database (model/db.js)
Chúng ta sẽ tạo một helper để quản lý kết nối MongoDB:
const { MongoClient } = require('mongodb');
const url = "mongodb://localhost:27017";
const dbName = 'FE2_db';
async function connectDb() {
const client = new MongoClient(url);
await client.connect();
console.log('Kết nối thành công đến server');
return client.db(dbName);
}
module.exports = connectDb;
Xây dựng API (routes/index.js)
Tạo các Endpoint để lấy danh sách sản phẩm:
const express = require('express');
const router = express.Router();
const connectDb = require('../model/db');
const { ObjectId } = require('mongodb');
// API: Lấy tất cả sản phẩm
router.get('/products', async(req, res) => {
const db = await connectDb();
const productCollection = db.collection('products');
const products = await productCollection.find().toArray();
products ? res.status(200).json(products) : res.status(404).json({message: "Không tìm thấy"});
});
// API: Lấy sản phẩm theo Category ID
router.get('/productbycate/:idcate', async(req, res) => {
const db = await connectDb();
const productCollection = db.collection('products');
const products = await productCollection.find({categoryId: req.params.idcate}).toArray();
products ? res.status(200).json(products) : res.status(404).json({message: "Không tìm thấy"});
});
module.exports = router;
Phần 2: Xây dựng Frontend với Next.js
- Khởi tạo Project
npx create-next-app@latest frontend
cd frontend
npm run dev
2. Tích hợp Bootstrap và Giao diện chung
Để ứng dụng có giao diện đẹp và đáp ứng (responsive), chúng ta nhúng Bootstrap vào app/layout.js.
Lưu ý: Bạn cần tải Bootstrap về và đặt trong thư mục public/bootstrap.
import { Inter } from "next/font/google";
import "../../public/bootstrap/css/bootstrap.min.css";
import Header from "./header.jsx";
import Footer from "./footer.jsx";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
</head>
<body className={inter.className}>
<Header />
<main>{children}</main>
<Footer />
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
);
}
3. Thành phần Header & Footer (Components)
Header: Chứa thanh điều hướng (Navbar) và thanh tìm kiếm. Sử dụng "use client" để hỗ trợ các tương tác phía client.
Footer: Chứa thông tin liên hệ và các liên kết mạng xã hội.
4. Tối ưu SEO với Metadata
Next.js cho phép chúng ta định nghĩa Metadata cho từng trang một cách dễ dàng để tối ưu hóa công cụ tìm kiếm:
export const metadata = {
title: "Cửa hàng thời trang ABC",
description: "Mua sắm quần áo thời trang nam nữ chất lượng cao từ thương hiệu uy tín.",
};
Tổng kết
Qua Lab 1 này, chúng ta đã nắm vững:
Cách thiết lập server Node.js và kết nối MongoDB.
Cách viết API trả về dữ liệu JSON.
Cách cấu trúc một dự án Next.js, nhúng thư viện CSS bên ngoài và quản lý Layout chung cho toàn bộ ứng dụng.
Chúc các bạn thành công trên con đường trở thành Fullstack Developer!
All Rights Reserved
