Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Bir PostgreSQL veri tabanı veya başka herhangi bir veri tabanı ile etkileşimde bulunmak, yazdığınız SQL miktarını doğrudan artırır. Bu, SQL enjeksiyon saldırıları gibi güvenlik sorunlarını ortaya çıkarabilir ve veritabanınızın taşınabilirliğini sınırlayabilir. Veritabanınızın üstünde bir soyutlama katmanı sağlayan Prisma gibi bir ORM (Nesne İlişkisi Eşleyici) kullanmanız önerilir.

Bir PostgreSQL veritabanına bağlanmak ve onunla etkileşim kurmak için Next.js'de Prisma'yı nasıl kullanacağınızı öğrenin.

Next.js Uygulaması Oluşturma

Bir Next.js uygulaması oluşturmadan önce, sahip olduğunuzdan emin olun. Düğüm ve npm kurulu geliştirme ortamınızda.

Terminalinizde şu komutu çalıştırarak prisma-next adında bir Next.js uygulaması oluşturun:

npx sonraki uygulama oluştur prisma sonraki

Bu, başlamak için temel dosyalarla prisma-next adında yeni bir dizin yaratacaktır.

instagram viewer

prisma-next dizinine gidin ve geliştirme sunucusunu şu komutu kullanarak başlatın:

npm geliştiriciyi çalıştır

Bu, şu adreste bir geliştirme sunucusu başlatır: http://localhost: 3000.

Bunlar, yeni bir Next.js uygulaması oluşturmak için temel adımlardır. Şu makaleye başvurarak Next.js özellikleri hakkında daha fazla bilgi edinebilirsiniz: neden Next.js'ye geçmeli?.

Prisma İstemcisini Kurma

kullanmaya başlamak için prizmaprisma ve @prisma/client paketlerine ihtiyacınız olacak. prisma, Prisma CLI aracıdır, @prisma/client ise veritabanınızı sorgulamanıza yardımcı olacak otomatik olarak oluşturulmuş bir sorgu oluşturucudur.

Bu iki paketi npm aracılığıyla kurun.

npm kurulum prisma @prisma/client

Ardından, terminalde npx prisma init komutunu çalıştırarak prisma'yı başlatın.

npx prizma başlangıcı

Bu, adlı yeni bir dosya oluşturacaktır. şema.prisma veritabanı şemasını içeren ve .env veritabanı bağlantı URL'sini ekleyeceğiniz dosya.

Bağlantı URL'sini Ekleme

prisma'yı cihazınıza bağlamak için bir bağlantı URL'sine ihtiyacınız var. PostgreSQL veritabanı. Bir bağlantı URL'sinin genel biçimi şudur:

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

Süslü parantez içindeki öğeleri kendi veritabanı ayrıntılarınızla değiştirin ve ardından .env dosyasına kaydedin:

DATABASE_URL = "bağlantı dizginiz"

Ardından schema.prisma'da veritabanı bağlantı URL'sini belirtin:

veri kaynağı veritabanı {
 sağlayıcı = "PostgreSQL"
 url = env("DATABASE_URL")
}

Veritabanı Şemasını Tanımlama

Veritabanı şeması, veritabanınızın veri modelini tanımlayan bir yapıdır. Veritabanındaki tablolar, sütunlar ve tablolar arasındaki ilişkilerin yanı sıra veritabanının kullanması gereken kısıtlamaları ve dizinleri belirtir.

Kullanıcılar tablosu içeren bir veritabanı için şema oluşturmak üzere schema.prisma dosyasını açın ve bir Kullanıcı modeli ekleyin.

modeli Kullanıcı {
 id Dizgi @varsayılan (cuid()) @id
 adı Dize?
 e-posta Dize @benzersiz
}

Kullanıcı modelinde, birincil anahtar olan bir kimlik sütunu, dize türünde bir ad sütunu ve benzersiz olması gereken bir e-posta sütunu bulunur.

Veri modelini tanımladıktan sonra, şemanızı kullanarak veritabanına dağıtmanız gerekir. npx prizma dbitmek emretmek.

npx prisma db itme

Bu komut, veritabanındaki gerçek tabloları oluşturur.

Next.js'de Prisma'yı kullanma

Prisma'yı Next.js'de kullanmak için bir prisma istemci örneği oluşturmanız gerekir.

İlk olarak, Prisma istemcisini oluşturun.

npx prizma oluşturma

Ardından lib adlı yeni bir klasör oluşturun ve içine prisma.js adlı yeni bir dosya ekleyin. Bu dosyada, bir prisma istemci örneği oluşturmak için aşağıdaki kodu ekleyin.

içe aktarmak { PrismaClient } itibaren"@prisma/istemci";
izin vermek prizma;
eğer (bir çeşitpencere"Tanımsız") {
eğer (işlem.env. NODE_ENV "üretme") {
 prizma = yeni PrismaClient();
 } başka {
eğer (!global.prisma) {
 global.prizma = yeni PrismaClient();
 }


 prizma = global.prizma;
 }
}
ihracatvarsayılan prizma;

Artık prisma client'ı dosyalarınıza “prisma” olarak import edebilir ve veritabanını sorgulamaya başlayabilirsiniz.

Bir Next.js API Rotasında Veritabanını Sorgulama

Prisma, genellikle veritabanınızla güvenli bir şekilde etkileşime girebileceği sunucu tarafında kullanılır. Bir Next.js uygulamasında, veritabanından veri alıp istemciye döndürmek için Prisma'yı kullanan bir API yolu ayarlayabilirsiniz. Sayfalar veya bileşenler daha sonra bir API yolu kullanarak verileri getirebilir. Axios veya getirme gibi HTTP kitaplığı.

Pages/api klasörünü açıp db adlı yeni bir alt klasör oluşturarak API rotasını oluşturun. Bu klasörde, adlı bir dosya oluşturun. kullanıcı oluştur.js ve aşağıdaki işleyici işlevini ekleyin.

içe aktarmak prizma itibaren"@/lib/prizma";
ihracatvarsayılanzaman uyumsuzişlevişleyici(talep, res) {
sabit { ad, e-posta } = talep.sorgu;


denemek {
sabit yeniUer = beklemek prizma. User.create({
 veri: {
 isim,
 e-posta,
 },
 });
 res.json({ kullanıcı: yeni Kullanıcı, hata: hükümsüz });
 } yakalamak (hata) {
 res.json({ hata: hata mesajı, kullanıcı: hükümsüz });
 }
}

Bu işlev, istek gövdesinden adı ve e-postayı alır. Ardından, try/catch bloğunda, yeni bir kullanıcı oluşturmak için Prisma Client tarafından sağlanan create yöntemini kullanır. İşlev, kullanıcıyı ve varsa hata mesajını içeren bir JSON nesnesi döndürür.

Bileşenlerinizden birinde artık bu API yoluna istekte bulunabilirsiniz. Göstermek için, uygulama dizininde profile adlı yeni bir klasör oluşturun ve page.js adlı yeni bir dosya ekleyin. Ardından ad ve e-posta için iki giriş kutusu ve bir gönder düğmesi içeren basit bir form ekleyin.

Formda, handleSubmit adlı bir işlevi çağıran bir gönderme olayı ekleyin. Form şöyle görünmelidir:

"müşteri kullan";
içe aktarmak Tepki, { useState } itibaren"tepki";
ihracatvarsayılanişlevSayfa() {
sabit [isim, setname] = useState("");
sabit [email, setemail] = useState("");


sabit işlemeGönder = zaman uyumsuz (e) => {
 e.preventDefault();
 };


geri dönmek (




 yazın={metin}
 yer tutucu="Ad ekle"
 değer={isim}
 onChange={setname((e) => e.hedef.değer)}
 />


 yazın={metin}
 yer tutucu="E-posta ekle"
 değer={e-posta}
 onChange={posta adresi((e) => e.hedef.değer)}
 />

/api/db/createuser yoluna bir istekte bulunmak için handleSubmit işlevinde fetch yöntemini kullanın.

sabit işlemeGönder = zaman uyumsuz (e) => {
 e.preventDefault();
sabit kullanıcı = beklemek gidip getirmek("/api/db/createuser", {
 İçerik türü: "uygulama/json",
 vücut: JSON.stringify({ ad, e-posta }),
 });
};

Artık form gönderildiğinde, Prisma Kullanıcı tablosunda yeni bir kullanıcı kaydı oluşturacaktır.

Prisma ile Daha Fazlasını Yapmak

Bir Next.js uygulamasından PostgreSQL veritabanına bağlanmak ve sorgulamak için Prisma'yı kullanabilirsiniz.

Veritabanına yeni kayıtlar eklemenin yanı sıra diğer SQL komutlarını da çalıştırabilirsiniz. Örneğin, satırları silebilir, belirli koşullara göre satırları seçebilir ve hatta veritabanında depolanan mevcut verileri güncelleyebilirsiniz.