Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Berinteraksi dengan database PostgreSQL atau database lainnya secara langsung meningkatkan jumlah SQL yang Anda tulis. Ini dapat menimbulkan masalah keamanan seperti serangan injeksi SQL dan membatasi portabilitas database Anda. Dianjurkan untuk menggunakan ORM (Object Relation Mapper) seperti Prisma yang menyediakan lapisan abstraksi di atas database Anda.

Pelajari cara menggunakan Prisma di Next.js untuk terhubung dan berinteraksi dengan database PostgreSQL.

Membuat Aplikasi Next.js

Sebelum membuat aplikasi Next.js, pastikan Anda sudah memilikinya Node dan npm diinstal di lingkungan pengembangan Anda.

Buat aplikasi Next.js bernama prisma-next dengan menjalankan perintah ini di terminal Anda:

npx buat-berikutnya-aplikasi prisma-berikutnya

Ini akan membuat direktori baru bernama prisma-next dengan file dasar untuk memulai.

Arahkan ke direktori prisma-next dan mulai server pengembangan menggunakan perintah ini:

instagram viewer 
npm menjalankan dev

Ini memulai server pengembangan di http://localhost: 3000.

Ini adalah langkah dasar untuk membuat aplikasi Next.js baru. Anda dapat mempelajari lebih lanjut tentang fitur Next.js dengan mengacu pada artikel ini mengapa harus bermigrasi ke Next.js.

Menginstal Klien Prisma

Untuk mulai menggunakan Prisma, Anda memerlukan paket prisma dan @prisma/klien. prisma adalah alat Prisma CLI sementara @prisma/client adalah pembuat kueri yang dibuat secara otomatis yang akan membantu Anda menanyakan basis data Anda.

Instal kedua paket ini melalui npm.

npm instal prisma @prisma/klien

Selanjutnya, inisialisasi prisma dengan menjalankan perintah npx prisma init di terminal.

npx prisma init

Ini akan menghasilkan file baru bernama schema.prisma yang berisi skema database dan a .env file tempat Anda akan menambahkan URL koneksi basis data.

Menambahkan URL Koneksi

Anda memerlukan URL koneksi untuk menghubungkan prisma ke basis data PostgreSQL. Format umum untuk URL koneksi adalah sebagai berikut:

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

Ganti elemen dalam kurung kurawal dengan detail database Anda sendiri lalu simpan di file .env:

DATABASE_URL = "string koneksi Anda"

Kemudian di schema.prisma, tentukan URL koneksi database:

sumber data db {
 penyedia = "PostgreSQL"
 url = env("DATABASE_URL")
}

Mendefinisikan Skema Database

Skema database adalah struktur yang mendefinisikan model data database Anda. Ini menentukan tabel, kolom, dan hubungan antar tabel dalam database, serta batasan dan indeks apa pun yang harus digunakan database.

Untuk membuat skema database dengan tabel users, buka file schema.prisma, dan tambahkan model User.

pengguna model {
 id String @default (cuid()) @id
 nama String?
 Email String @unique
}

Model Pengguna memiliki kolom id yang merupakan kunci utama, kolom nama tipe string, dan kolom email yang harus unik.

Setelah menentukan model data, Anda perlu menerapkan skema Anda ke database menggunakan npx prisma dbdorongan memerintah.

npx prisma db push

Perintah ini membuat tabel aktual dalam database.

Menggunakan Prisma di Next.js

Untuk menggunakan Prisma di Next.js, Anda perlu membuat instance klien prisma.

Pertama, buat klien Prisma.

npx prisma menghasilkan

Kemudian, buat folder baru bernama lib dan tambahkan file baru bernama prisma.js di dalamnya. Dalam file ini, tambahkan kode berikut untuk membuat instance klien prisma.

impor { Klien Prisma } dari"@prisma/klien";
membiarkan prisma;
jika (jenisjendela"belum diartikan") {
jika (proses.env. NODE_ENV "produksi") {
 prisma = baru PrismaClient();
 } kalau tidak {
jika (!global.prisma) {
 global.prisma = baru PrismaClient();
 }


 prisma = global.prisma;
 }
}
eksporbawaan prisma;

Sekarang, Anda dapat mengimpor klien prisma sebagai "prisma" di file Anda, dan mulai membuat kueri database.

Meminta Database di Rute Next.js API

Prisma biasanya digunakan di sisi server, tempat Prisma dapat berinteraksi dengan database Anda dengan aman. Dalam aplikasi Next.js, Anda dapat menyiapkan rute API yang menggunakan Prisma untuk mengambil data dari database dan mengembalikannya ke klien. Halaman atau komponen kemudian dapat mengambil data dari rute API menggunakan Pustaka HTTP seperti Axios atau ambil.

Buat rute API dengan membuka folder pages/api dan membuat subfolder baru bernama db. Di folder ini, buat file bernama buat pengguna.js dan tambahkan fungsi penangan berikut.

impor prisma dari"@/lib/prisma";
eksporbawaanasinkronfungsipawang(req, res) {
const { nama, email } = req.query;


mencoba {
const pengguna baru = menunggu prisma. Pengguna.buat({
 data: {
 nama,
 surel,
 },
 });
 res.json({ pengguna: newUer, kesalahan: batal });
 } menangkap (kesalahan) {
 res.json({ kesalahan: pesan eror, pengguna: batal });
 }
}

Fungsi ini mendapatkan nama dan email dari badan permintaan. Kemudian, di blok coba/tangkap, ia menggunakan metode buat yang disediakan oleh Klien Prisma untuk membuat pengguna baru. Fungsi mengembalikan objek JSON yang berisi pengguna dan pesan kesalahan jika ada.

Di salah satu komponen Anda, kini Anda dapat membuat permintaan ke rute API ini. Untuk mendemonstrasikan, buat folder baru bernama profile di direktori aplikasi dan tambahkan file baru bernama page.js. Kemudian tambahkan formulir sederhana yang berisi dua kotak input untuk nama dan email serta tombol kirim.

Pada formulir, tambahkan event on-submit yang memanggil fungsi yang disebut handleSubmit. Bentuknya akan terlihat seperti ini:

"gunakan klien";
impor Bereaksi, { useState } dari"reaksi";
eksporbawaanfungsiHalaman() {
const [nama, setname] = useState("");
const [email, setemail] = useState("");


const handleSubmit = asinkron (e) => {
 e.preventDefault();
 };


kembali (




 ketik={teks}
 placeholder="Tambahkan nama"
 nilai={nama}
 onChange={namaset((e) => e.target.nilai)}
 />


 ketik={teks}
 placeholder="Tambah email"
 nilai={email}
 onChange={setemail((e) => e.target.nilai)}
 />

Dalam fungsi handleSubmit, gunakan metode pengambilan untuk membuat permintaan ke rute /api/db/createuser.

const handleSubmit = asinkron (e) => {
 e.preventDefault();
const pengguna = menunggu mengambil("/api/db/buat pengguna", {
 Jenis konten: "aplikasi/json",
 tubuh: JSON.stringify({ nama, email }),
 });
};

Sekarang, saat formulir dikirimkan, Prisma akan membuat catatan pengguna baru di tabel Pengguna.

Melakukan Lebih Banyak Dengan Prisma

Anda dapat menggunakan Prisma untuk menghubungkan dan menanyakan database PostgreSQL dari aplikasi Next.js.

Selain menambahkan record baru ke database, Anda juga dapat menjalankan perintah SQL lainnya. Misalnya, Anda dapat menghapus baris, memilih baris berdasarkan kondisi tertentu, dan bahkan memperbarui data yang ada yang tersimpan di database.