Next.js, Prisma ve PostgreSQL ile Tam Yığın Web Uygulaması Geliştirme

Next.js, Prisma ve PostgreSQL ile Tam Yığın Web Uygulaması Geliştirme

Merhaba! Bu makalede, Next.js, Prisma ve PostgreSQL kullanarak tam yığın bir web uygulaması nasıl geliştirileceğini adım adım inceleyeceğiz. Bu güçlü üçlünün bir araya gelmesiyle, hızlı, ölçeklenebilir ve verimli uygulamalar oluşturmak mümkün. Öncelikle, her bir bileşenin rolünü ve neden bu teknolojileri tercih ettiğimizi açıklayalım.

Neden Next.js, Prisma ve PostgreSQL?

Next.js, React tabanlı bir framework olup, sunucu tarafı oluşturma (SSR) ve statik site oluşturma (SSG) özellikleriyle öne çıkıyor. Bu özellikler sayesinde, uygulamalarımız hızlı bir şekilde yüklenir ve SEO performansı artar. Aynı zamanda, geliştirmeyi kolaylaştıran birçok entegre özellik sunar.

Prisma, veritabanı işlemlerini kolaylaştıran bir ORM (Object-Relational Mapper) aracıdır. PostgreSQL veritabanıyla sorunsuz bir şekilde çalışır ve kod yazımını oldukça basitleştirir. Karmaşık SQL sorguları yazmak yerine, basit JavaScript kodlarıyla veritabanı işlemlerini yönetebiliriz.

PostgreSQL, güçlü ve güvenilir bir açık kaynak veritabanı sistemidir. Karmaşık veri yapıları ve büyük veri hacimleriyle rahatlıkla başa çıkabilir. Next.js ve Prisma ile birlikte kullanıldığında, sağlam ve verimli bir arka ucun temelini oluşturur.

Proje Kurulumu

Öncelikle, yeni bir proje dizini oluşturarak işe başlayalım. Ardından, aşağıdaki komutları kullanarak gerekli paketleri kuracağız:

npm create next-app my-app
cd my-app
npm install prisma @prisma/client pg

Bu komutlar, Next.js uygulamasını oluşturur ve Prisma ile PostgreSQL desteğini ekler. Sonrasında, Prisma şemasını tanımlayarak veritabanı modelimizi oluşturacağız.

Prisma Şeması ve Veritabanı Bağlantısı

prisma/schema.prisma dosyasında PostgreSQL veritabanı bağlantınızı ve model tanımlarınızı yapacaksınız. Örnek bir schema:

generator client {
  provider = "prisma-client-js"
}

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

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  posts     Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

DATABASE_URL ortam değişkenini doğru şekilde ayarladığınızdan emin olun. Daha sonra, Prisma şemasını oluşturmak ve veritabanını senkronize etmek için aşağıdaki komutları kullanın:

npx prisma init
npx prisma db push
npx prisma generate

Uygulama Geliştirme

Şimdi, Next.js uygulamanızda Prisma’yı kullanarak veritabanı işlemlerini gerçekleştirebilirsiniz. Örneğin, bir post oluşturmak için:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function createPost(title: string, content: string, authorId: number) {
  const post = await prisma.post.create({
    data: {
      title,
      content,
      author: { connect: { id: authorId } },
    },
  });
  return post;
}

export default createPost;

Bu örnekte, createPost fonksiyonu, verilen parametrelerle yeni bir post oluşturur ve veritabanına kaydeder. Benzer şekilde, okuma, güncelleme ve silme işlemleri de Prisma’nın sağladığı fonksiyonlar kullanılarak gerçekleştirilebilir.

Sonuç

Bu makalede, Next.js, Prisma ve PostgreSQL kullanarak tam yığın bir web uygulaması geliştirmenin temel adımlarını inceledik. Bu güçlü teknolojilerle, ölçeklenebilir ve yüksek performanslı uygulamalar geliştirmek oldukça kolaylaşır. Daha detaylı bilgi ve örnekler için fatihsoysal.com sitesini ziyaret edebilir, ayrıca Prisma dokümanlarını inceleyebilirsiniz. Umarım bu makale size yardımcı olmuştur!

#Etiketler: Next.js, Prisma, PostgreSQL, Tam Yığın, Web Uygulaması, Node.js, JavaScript, Veritabanı, Tutorial, Eğitim