Cách kết nối PostgreSQL với ứng dụng Next.js bằng Prisma

Tương tác với cơ sở dữ liệu PostgreSQL hoặc bất kỳ cơ sở dữ liệu nào khác sẽ trực tiếp làm tăng lượng SQL bạn viết. Điều này có thể gây ra các vấn đề bảo mật như tấn công SQL injection và hạn chế tính di động của cơ sở dữ liệu của bạn. Bạn nên sử dụng ORM (Trình ánh xạ quan hệ đối tượng) như Prisma cung cấp lớp trừu tượng trên cơ sở dữ liệu của bạn.

Tìm hiểu cách sử dụng Prisma trong Next.js để kết nối và tương tác với cơ sở dữ liệu PostgreSQL.

Tạo ứng dụng Next.js

Trước khi tạo ứng dụng Next.js, hãy đảm bảo bạn đã cài đặt Node và npm trong môi trường phát triển của mình.

Tạo một ứng dụng Next.js có tên là prisma-next bằng cách chạy lệnh này trong thiết bị đầu cuối của bạn:

 npx create-next-app prisma-next
 

Thao tác này sẽ tạo một thư mục mới có tên prisma-next với các tệp cơ bản để bắt đầu.

Điều hướng đến thư mục prisma-next và khởi động máy chủ phát triển bằng lệnh này:

 npm run dev 

Điều này bắt đầu một máy chủ phát triển tại http://localhost:3000.

Đây là các bước cơ bản để tạo một ứng dụng Next.js mới. Bạn có thể tìm hiểu thêm về các tính năng của Next.js bằng cách tham khảo bài viết này về lý do chuyển sang Next.js.

Cài đặt máy khách Prisma

Để bắt đầu sử dụng Prisma, bạn sẽ cần các gói prisma và @prisma/client. prisma là công cụ Prisma CLI trong khi @prisma/client là trình tạo truy vấn được tạo tự động sẽ giúp bạn truy vấn cơ sở dữ liệu của mình.

Cài đặt hai gói này qua npm.

 npm install prisma @prisma/client
 

Tiếp theo, khởi tạo prisma bằng cách chạy lệnh npx prisma init trên terminal.

 npx prisma init
 

Điều này sẽ tạo ra một tập tin mới gọi là lược đồ.prisma chứa lược đồ cơ sở dữ liệu và một .env tệp mà bạn sẽ thêm URL kết nối cơ sở dữ liệu.

Thêm URL kết nối

Bạn cần một URL kết nối để kết nối lăng kính với cơ sở dữ liệu PostgreSQL của mình. Định dạng chung cho một URL kết nối là:

 postgres://{username}:{password}@{hostname}:{port}/{database-name}
 

Thay thế các phần tử trong dấu ngoặc nhọn bằng chi tiết cơ sở dữ liệu của riêng bạn, sau đó lưu nó vào tệp .env:

 DATABASE_URL = ”your connection string”
 

Sau đó, trong lược đồ.prisma, chỉ định URL kết nối cơ sở dữ liệu:

 datasource db {
  provider = "PostgreSQL"
  url = env("DATABASE_URL")
}
 

Xác định lược đồ cơ sở dữ liệu

Lược đồ cơ sở dữ liệu là một cấu trúc xác định mô hình dữ liệu của cơ sở dữ liệu của bạn. Nó chỉ định các bảng, cột và mối quan hệ giữa các bảng trong cơ sở dữ liệu, cũng như mọi ràng buộc và chỉ mục mà cơ sở dữ liệu nên sử dụng.

Để tạo lược đồ cho cơ sở dữ liệu với bảng người dùng, hãy mở tệp schema.prisma và thêm mô hình Người dùng.

 model User {
  id String @default(cuid()) @id
  name String?
  email String @unique
}
 

Mô hình Người dùng có một cột id là khóa chính, một cột tên của loại chuỗi và một cột email phải là duy nhất.

Sau khi xác định mô hình dữ liệu, bạn cần triển khai lược đồ của mình tới cơ sở dữ liệu bằng cách sử dụng npx lăng kính db xô yêu cầu.

 npx prisma db push
 

Lệnh này tạo các bảng thực tế trong cơ sở dữ liệu.

Sử dụng Prisma trong Next.js

Để sử dụng Prisma trong Next.js, bạn cần tạo một phiên bản máy khách prisma.

Đầu tiên, tạo ứng dụng khách Prisma.

 npx prisma generate
 

Sau đó, tạo một thư mục mới có tên lib và thêm một tệp mới có tên prisma.js vào đó. Trong tệp này, hãy thêm đoạn mã sau để tạo phiên bản máy khách prisma.

 import { PrismaClient } from "@prisma/client";
let prisma;
if (typeof window === "undefined") {
    if (process.env.NODE_ENV === "production") {
        prisma = new PrismaClient();
    } else {
        if (!global.prisma) {
            global.prisma = new PrismaClient();
        }
        prisma = global.prisma;
    }
}
export default prisma;
 

Bây giờ, bạn có thể nhập ứng dụng khách prisma dưới dạng “prisma” vào các tệp của mình và bắt đầu truy vấn cơ sở dữ liệu.

Truy vấn Cơ sở dữ liệu trong Tuyến API Next.js

Prisma thường được sử dụng ở phía máy chủ, nơi nó có thể tương tác an toàn với cơ sở dữ liệu của bạn. Trong ứng dụng Next.js, bạn có thể thiết lập một tuyến API sử dụng Prisma để tìm nạp dữ liệu từ cơ sở dữ liệu và trả về máy khách. Sau đó, các trang hoặc thành phần có thể tìm nạp dữ liệu từ tuyến API bằng thư viện HTTP như Axios hoặc tìm nạp.

Tạo tuyến API bằng cách mở thư mục pages/api và tạo thư mục con mới có tên db. Trong thư mục này, tạo một tệp có tên người tạo.js và thêm chức năng xử lý sau.

 import prisma from "@/lib/prisma";
export default async function handler(req, res) {
    const { name, email } = req.query;
    try {
        const newUer = await prisma.User.create({
            data: {
                name,
                email,
            },
        });
        res.json({ user: newUer, error: null });
    } catch (error) {
        res.json({ error: error.message, user: null });
    }
}
 

Hàm này lấy tên và email từ phần thân yêu cầu. Sau đó, trong khối try/catch, nó sử dụng phương thức tạo do Prisma Client cung cấp để tạo người dùng mới. Hàm trả về một đối tượng JSON chứa người dùng và thông báo lỗi nếu có.

Tại một trong các thành phần của bạn, giờ đây bạn có thể đưa ra yêu cầu đối với tuyến API này. Để minh họa, hãy tạo một thư mục mới có tên là hồ sơ trong thư mục ứng dụng và thêm một tệp mới có tên là page.js. Sau đó, thêm một biểu mẫu đơn giản chứa hai hộp nhập tên và email và một nút gửi.

Trên biểu mẫu, hãy thêm một sự kiện khi gửi để gọi một hàm có tên là handleSubmit. Biểu mẫu sẽ trông như thế này:

 "use client";
import React, { useState } from "react";
export default function Page() {
    const [name, setname] = useState("");
    const [email, setemail] = useState("");
    const handleSubmit = async (e) => {
        e.preventDefault();
    };
    return (
        <form onSubmit={handleSubmit}>
            <input
                type={text}
                placeholder="Add name"
                value={name}
                onChange={setname((e) => e.target.value)}
            />
            <input
                type={text}
                placeholder="Add email"
                value={email}
                onChange={setemail((e) => e.target.value)}
            />
            <button type="submit">Submit</button>
        </form>
    );
}
 

Trong hàm handleSubmit, hãy sử dụng phương thức tìm nạp để đưa ra yêu cầu đối với tuyến đường /api/db/createuser.

 const handleSubmit = async (e) => {
    e.preventDefault();
    const user = await fetch("/api/db/createuser", {
        ContentType: "application/json",
        body: JSON.stringify({ name, email }),
    });
};
 

Bây giờ, khi biểu mẫu được gửi, Prisma sẽ tạo một bản ghi người dùng mới trong bảng Người dùng.

Làm được nhiều việc hơn với Prisma

Bạn có thể sử dụng Prisma để kết nối và truy vấn cơ sở dữ liệu PostgreSQL từ ứng dụng Next.js.

Bên cạnh việc thêm các bản ghi mới vào cơ sở dữ liệu, bạn cũng có thể chạy các lệnh SQL khác. Chẳng hạn, bạn có thể xóa hàng, chọn hàng dựa trên các điều kiện cụ thể và thậm chí cập nhật dữ liệu hiện có được lưu trữ trong cơ sở dữ liệu.