نحوه اتصال PostgreSQL به یک برنامه Next.js با استفاده از Prisma

با این ORM نسل بعدی، از برنامه Next به پایگاه داده Postgres خود دسترسی پیدا کنید.

تعامل با پایگاه داده PostgreSQL یا هر پایگاه داده دیگری به طور مستقیم میزان SQL را که می نویسید افزایش می دهد. این می تواند مسائل امنیتی مانند حملات تزریق SQL را معرفی کند و قابلیت حمل پایگاه داده شما را محدود کند. توصیه می شود از یک ORM (Object Relation Mapper) مانند Prisma استفاده کنید که یک لایه انتزاعی در بالای پایگاه داده شما فراهم می کند.

نحوه استفاده از Prisma در Next.js برای اتصال و تعامل با پایگاه داده PostgreSQL را بیاموزید.

ایجاد یک برنامه Next.js

قبل از ایجاد یک برنامه Next.js، مطمئن شوید که Node و npm را در محیط توسعه خود نصب کرده اید.

با اجرای این دستور در ترمینال خود یک برنامه Next.js به نام prisma-next ایجاد کنید:

npx create-next-app prisma-next

این یک دایرکتوری جدید به نام prisma-next با فایل های اصلی برای شروع ایجاد می کند.

به دایرکتوری prisma-next بروید و سرور توسعه را با استفاده از این دستور راه اندازی کنید:

npm run dev

این یک سرور توسعه را در http://localhost:3000 راه اندازی می کند.

اینها مراحل اساسی برای ایجاد یک برنامه Next.js جدید هستند. با مراجعه به این مقاله در مورد چرایی مهاجرت به Next.js، می توانید درباره ویژگی های Next.js اطلاعات بیشتری کسب کنید.

نصب کلاینت Prisma

برای شروع استفاده از Prisma، به بسته های prisma و @prisma/client نیاز دارید. prisma ابزار Prisma CLI است در حالی که @prisma/client یک سازنده پرس و جو است که به صورت خودکار تولید می شود که به شما کمک می کند پایگاه داده خود را پرس و جو کنید.

این دو بسته را از طریق npm نصب کنید.

npm install prisma @prisma/client

سپس با اجرای دستور npx prisma init در ترمینال، prisma را مقداردهی اولیه کنید.

npx prisma init

این یک فایل جدید به نام schema.prisma ایجاد می کند که شامل طرح پایگاه داده و یک فایل .env است که URL اتصال پایگاه داده را به آن اضافه می کنید.

افزودن URL اتصال

برای اتصال prisma به پایگاه داده PostgreSQL خود به یک URL اتصال نیاز دارید. فرمت کلی URL اتصال به این صورت است:

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

عناصر موجود در براکت های فرفری را با جزئیات پایگاه داده خود جایگزین کنید و سپس آن را در فایل .env ذخیره کنید:

DATABASE_URL = ”your connection string”

سپس در schema.prisma، URL اتصال پایگاه داده را مشخص کنید:

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

تعریف طرحواره پایگاه داده

طرح واره پایگاه داده ساختاری است که مدل داده پایگاه داده شما را تعریف می کند. جداول، ستون‌ها و روابط بین جداول در پایگاه داده و همچنین محدودیت‌ها و شاخص‌هایی را که پایگاه داده باید استفاده کند را مشخص می‌کند.

برای ایجاد یک طرح برای یک پایگاه داده با جدول کاربران، فایل schema.prisma را باز کرده و یک مدل کاربر اضافه کنید.

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

مدل کاربر دارای یک ستون شناسه است که کلید اصلی است، یک ستون نام از نوع رشته، و یک ستون ایمیل که باید منحصر به فرد باشد.

پس از تعریف مدل داده، باید طرحواره خود را با استفاده از دستور npx prisma db push در پایگاه داده مستقر کنید.

npx prisma db push

این دستور جداول واقعی را در پایگاه داده ایجاد می کند.

استفاده از Prisma در Next.js

برای استفاده از Prisma در Next.js، باید یک نمونه مشتری prisma ایجاد کنید.

ابتدا کلاینت Prisma را تولید کنید.

npx prisma generate

سپس یک پوشه جدید به نام lib ایجاد کنید و یک فایل جدید به نام prisma.js را در آن اضافه کنید. در این فایل کد زیر را برای ایجاد یک نمونه مشتری 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;

اکنون، می‌توانید کلاینت پریسما را به‌عنوان «prisma» در فایل‌های خود وارد کنید و شروع به پرس‌وجو از پایگاه داده کنید.

پرس و جو از پایگاه داده در مسیر API Next.js

Prisma معمولاً در سمت سرور استفاده می شود، جایی که می تواند با خیال راحت با پایگاه داده شما تعامل داشته باشد. در یک برنامه Next.js، می توانید یک مسیر API راه اندازی کنید که از Prisma برای واکشی داده ها از پایگاه داده و برگرداندن آن به مشتری استفاده می کند. سپس صفحات یا مؤلفه‌ها می‌توانند داده‌ها را از مسیر API با استفاده از یک کتابخانه HTTP مانند Axios یا fetch دریافت کنند.

مسیر API را با باز کردن پوشه pages/api و ایجاد یک زیرپوشه جدید به نام db ایجاد کنید. در این پوشه فایلی به نام createuser.js ایجاد کنید و تابع handler زیر را اضافه کنید.

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 });
    }
}

این تابع نام و ایمیل را از بدنه درخواست دریافت می کند. سپس در بلوک try/catch از روش ایجاد ارائه شده توسط Prisma Client برای ایجاد یک کاربر جدید استفاده می کند. تابع یک شی JSON حاوی کاربر و در صورت وجود پیام خطا را برمی گرداند.

در یکی از کامپوننت‌های خود، اکنون می‌توانید به این مسیر API درخواست دهید. برای نشان دادن، یک پوشه جدید به نام پروفایل در فهرست برنامه ایجاد کنید و یک فایل جدید به نام page.js اضافه کنید. سپس یک فرم ساده حاوی دو کادر ورودی برای نام و ایمیل و یک دکمه ارسال اضافه کنید.

در فرم، یک رویداد در هنگام ارسال اضافه کنید که تابعی به نام handleSubmit را فراخوانی می کند. فرم باید به شکل زیر باشد:

"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>
    );
}

در تابع handleSubmit، از متد fetch برای ارسال درخواست به مسیر /api/db/createuser استفاده کنید.

const handleSubmit = async (e) => {
    e.preventDefault();

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

حالا وقتی فرم ارسال شد، Prisma یک رکورد کاربری جدید در جدول User ایجاد می کند.

انجام کارهای بیشتر با Prisma

می‌توانید از Prisma برای اتصال به پایگاه داده PostgreSQL و درخواست آن از برنامه Next.js استفاده کنید.

علاوه بر افزودن رکوردهای جدید به پایگاه داده، می توانید سایر دستورات SQL را نیز اجرا کنید. به عنوان مثال، می توانید ردیف ها را حذف کنید، ردیف ها را بر اساس شرایط خاص انتخاب کنید، و حتی داده های موجود ذخیره شده در پایگاه داده را به روز کنید.

منبع مقاله