Thiết lập môi trường Full-Stack với Next.js, Prisma & PostgreSQL
Xây dựng một ứng dụng full-stack có thể nghe có vẻ đáng sợ ngay từ đầu, nhưng với cách thiết lập đúng, bạn sẽ sẵn sàng bắt đầu trong thời gian ngắn. Trong hướng dẫn này, chúng ta sẽ thiết lập Next.js cho frontend, Prisma làm ORM và PostgreSQL làm cơ sở dữ liệu — mọi thứ bạn cần để bắt đầu xây dựng một ứng dụng CRUD.
Mục lục
- Cài đặt Node.js và Next.js
- Cài đặt PostgreSQL
- Cài đặt và cấu hình Prisma
- Định nghĩa mô hình Prisma đầu tiên
- Chạy di chuyển đầu tiên
- Kiểm tra Prisma Client
- Thực tiễn tốt nhất
- Cạm bẫy thường gặp
- Mẹo hiệu suất
- Giải quyết sự cố
Cài đặt Node.js và Next.js
Trước tiên, hãy đảm bảo rằng Node.js đã được cài đặt:
bash
node -v
npm -vNếu bạn chưa có Node.js, hãy tải nó từ nodejs.org.
Tiếp theo, tạo một dự án Next.js mới:
bash
npx create-next-app@latest next-prisma-crud
cd next-prisma-crud
npm run devMở trình duyệt và truy cập http://localhost:3000. Nếu bạn thấy trang chào mừng của Next.js, chúc mừng — môi trường frontend của bạn đã sẵn sàng! 🎉
Cài đặt PostgreSQL
Bạn sẽ cần một cơ sở dữ liệu PostgreSQL để lưu trữ dữ liệu. Bạn có thể cài đặt nó cục bộ hoặc sử dụng dịch vụ đám mây như Railway hoặc Supabase.
Ví dụ cài đặt cục bộ (macOS):
bash
brew install postgresql
brew services start postgresql
psql postgresTạo một cơ sở dữ liệu mới:
sql
CREATE DATABASE next_prisma_crud;Ghi nhớ tên người dùng, mật khẩu, host và tên cơ sở dữ liệu của bạn — bạn sẽ cần những thông tin này để kết nối Prisma.
Cài đặt và cấu hình Prisma
Trong dự án Next.js của bạn, cài đặt Prisma và khởi tạo nó:
bash
npm install prisma --save-dev
npx prisma initĐiều này sẽ tạo ra:
prisma/schema.prisma— nơi chứa các mô hình dữ liệu của bạn.env— nơi chứa URL kết nối cơ sở dữ liệu của bạn
Cập nhật .env với URL cơ sở dữ liệu của bạn:
plaintext
DATABASE_URL="postgresql://username:password@localhost:5432/next_prisma_crud"Định nghĩa mô hình Prisma đầu tiên
Mở prisma/schema.prisma và định nghĩa mô hình Task đơn giản:
plaintext
model Task {
id Int @id @default(autoincrement())
title String
completed Boolean @default(false)
createdAt DateTime @default(now())
}Mô hình này đại diện cho một nhiệm vụ với tiêu đề, trạng thái hoàn thành và dấu thời gian.
Chạy di chuyển đầu tiên
Đẩy schema của bạn lên PostgreSQL và tạo Prisma Client:
bash
npx prisma migrate dev --name init
npx prisma generatePrisma sẽ tạo một bảng Task trong cơ sở dữ liệu của bạn và tạo client để truy vấn nó trong mã.
Kiểm tra Prisma Client
Tạo một script kiểm tra nhỏ để xác minh thiết lập:
javascript
// prisma/test.js
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
async function main() {
const tasks = await prisma.task.findMany();
console.log(tasks);
}
main()
.catch(e => console.error(e))
.finally(() => prisma.$disconnect());Chạy:
bash
node prisma/test.jsBạn sẽ thấy một mảng rỗng ([]), có nghĩa là kết nối hoạt động hoàn hảo! ✅
Thực tiễn tốt nhất
- Đặt tên rõ ràng cho mô hình và trường: Điều này giúp dễ dàng bảo trì và mở rộng ứng dụng.
- Sử dụng các loại dữ liệu phù hợp: Chọn kiểu dữ liệu đúng cho từng trường trong mô hình để tối ưu hóa truy vấn.
Cạm bẫy thường gặp
- Kết nối thất bại: Đảm bảo rằng thông tin kết nối trong
.envlà chính xác. - Lỗi di chuyển: Kiểm tra cú pháp trong schema.prisma nếu gặp lỗi khi chạy di chuyển.
Mẹo hiệu suất
- Sử dụng các truy vấn có điều kiện: Giảm khối lượng dữ liệu trả về bằng cách sử dụng các điều kiện trong truy vấn.
- Tối ưu hóa cơ sở dữ liệu: Thực hiện các chỉ số cho các trường thường xuyên được truy vấn.
Giải quyết sự cố
- Không tìm thấy mô hình: Kiểm tra xem bạn đã chạy di chuyển hay chưa.
- Lỗi khi chạy script kiểm tra: Đảm bảo rằng Prisma Client đã được tạo ra và mã không có lỗi cú pháp.
Kết luận
Bằng cách kết thúc bài viết này, bạn đã có:
- Một dự án Next.js chạy cục bộ
- PostgreSQL được cài đặt và kết nối
- Prisma được cấu hình với một mô hình đơn giản
- Kết nối cơ sở dữ liệu đã được xác minh
Hãy bắt đầu xây dựng ứng dụng CRUD của bạn ngay hôm nay! Nếu bạn gặp bất kỳ vấn đề gì, đừng ngần ngại để lại câu hỏi bên dưới.
