Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Kategoriler
Son Yazılar

Modern Emlak Uygulamaları Neden Bu Kadar Önemli ve Neden Bu Teknolojilerle Geliştirilmeli?

Next.js, Prisma, BetterAuth ve ShadCN/UI ile Emlak Uygulaması Geliştirme

Günümüz rekabetçi dijital dünyasında, emlak sektöründe faaliyet gösteren işletmelerin başarılı olabilmesi için hızlı, güvenli ve kullanıcı dostu web uygulamalarına sahip olması artık bir zorunluluk haline geldi. Peki, sıfırdan başlayarak modern web teknolojileriyle, hem geliştirici deneyimini hem de son kullanıcı memnuniyetini en üst düzeye çıkaran bir emlak uygulamasını nasıl inşa edebilirsiniz? Bu rehberde, popüler ve güçlü araçlar olan Next.js, Prisma, BetterAuth ve ShadCN/UI’ın sunduğu imkanları keşfederek, hayalinizdeki emlak uygulamasını adım adım hayata geçirme sürecini detaylı bir şekilde inceleyeceğiz. Bu teknoloji yığını, size sadece bir web sitesi değil, geleceğe hazır, ölçeklenebilir ve yönetimi kolay bir platform sunacak.

Emlak sektörü, son yıllarda dijitalleşmenin en hızlı yaşandığı alanlardan biri haline geldi. Potansiyel alıcılar veya kiracılar artık bir emlak ofisine gitmeden önce internet üzerinden kapsamlı araştırmalar yapıyor, ilanları karşılaştırıyor ve sanal turlar talep ediyorlar. Bu bağlamda, bir emlak web uygulamasının performansı, arayüzünün kullanım kolaylığı ve sunduğu özellikler, doğrudan müşteri çekme ve işlem tamamlama oranlarını etkiliyor. Geleneksel web siteleri genellikle yavaş yüklenme süreleri, güncel olmayan tasarımlar ve yetersiz güvenlik önlemleri nedeniyle kullanıcıları kaçırma riski taşırken, modern bir yaklaşım bu dezavantajları ortadan kaldırıyor.

Bu noktada, Next.js, Prisma, BetterAuth ve ShadCN/UI gibi yenilikçi teknolojilerin bir araya gelmesi, geliştiricilere ve işletmelere eşsiz avantajlar sunar. Next.js, özellikle SEO performansını artıran sunucu tarafı render (SSR) ve statik site oluşturma (SSG) yetenekleriyle, emlak ilanlarının arama motorlarında daha görünür olmasını sağlar. Ayrıca, hızlı sayfa geçişleri ve optimize edilmiş görseller sayesinde kullanıcıların uygulamada daha uzun süre kalmasına yardımcı olur. Bir emlak uygulamasında binlerce hatta yüz binlerce ilan olabileceği düşünüldüğünde, performans kritik bir öneme sahiptir. Kullanıcılar, bir ilanı incelerken yavaş bir yükleme deneyimiyle karşılaştıklarında, genellikle başka bir siteye yönelirler. Next.js’in sağladığı performans optimizasyonları, bu riski minimize eder.

Veritabanı yönetimi, emlak uygulamalarının temelini oluşturur. İlanlar, kullanıcı bilgileri, rezervasyonlar, mesajlar ve daha birçok veri, güvenli ve verimli bir şekilde depolanmalı ve erişilebilir olmalıdır. Prisma, bu karmaşık süreci basitleştiren güçlü bir ORM (Object-Relational Mapper) aracıdır. Type-safe (tür güvenli) yapısı sayesinde, geliştirme sürecinde oluşabilecek birçok hatayı önler ve veri modelleri üzerinde çalışmayı çok daha keyifli hale getirir. Örneğin, bir ilanın fiyat alanı sayısal bir değer beklerken metin girilmeye çalışıldığında, Prisma bunu derleme aşamasında yakalayarak, üretim ortamında yaşanabilecek potansiyel hataları engeller. Bu da geliştirme süresini kısaltır ve daha sağlam bir uygulama ortaya koyar. Veritabanı şeması değişikliklerini yönetmek için kullanılan migrasyon özellikleri de, uygulamanın evrimi boyunca veritabanının tutarlı kalmasını garanti eder. Bu sayede, yeni özellikler eklemek veya mevcutları değiştirmek çok daha güvenli ve kontrollü bir süreç haline gelir.

Emlak uygulamalarında kullanıcı güvenliği ve kimlik doğrulama süreçleri hayati öneme sahiptir. Kullanıcıların kişisel bilgilerini, ilan detaylarını ve hatta ödeme bilgilerini içeren hassas veriler, kötü niyetli saldırılara karşı korunmalıdır. BetterAuth, bu noktada devreye girerek, geliştiricilerin kimlik doğrulama ve yetkilendirme süreçlerini kolayca entegre etmesini sağlar. Geleneksel kullanıcı adı/şifre, sosyal medya entegrasyonları, sihirli bağlantılar (magic links) gibi farklı kimlik doğrulama yöntemlerini destekleyebilir. Ayrıca, rol tabanlı erişim kontrolü (RBAC) ile yöneticilerin, emlak danışmanlarının ve normal kullanıcıların uygulamadaki farklı bölümlere erişim yetkilerini hassas bir şekilde tanımlamayı mümkün kılar. Bu, özellikle bir emlak danışmanının yalnızca kendi ilanlarını düzenleyebilmesi veya bir yöneticinin tüm ilanları yönetebilmesi gibi senaryolarda büyük kolaylık sağlar. Uygulama genelinde güvenliği artırırken, geliştiricilerin güvenlik açıklarını manuel olarak ele alma yükünü hafifletir.

Son olarak, kullanıcı deneyimi, bir uygulamanın başarısını doğrudan etkileyen bir faktördür. ShadCN/UI, geliştiricilere modern, erişilebilir ve yüksek performanslı kullanıcı arayüzleri oluşturma konusunda benzersiz bir esneklik sunar. Klasik UI kütüphanelerinin aksine, ShadCN/UI size önceden derlenmiş bileşenler yerine, kopyalayıp projenize entegre edebileceğiniz, özelleştirilebilir bileşen kodları sağlar. Bu yaklaşım, uygulamanın tasarım dilini tamamen kontrol etmenize ve markanıza özgü bir görünüm elde etmenize olanak tanır. Tailwind CSS ile mükemmel entegrasyonu sayesinde, hızla prototip oluşturabilir ve responsive tasarımları kolayca uygulayabilirsiniz. Örneğin, emlak ilanlarını listeleyen kartların farklı ekran boyutlarına göre düzenini otomatik olarak ayarlaması, mobil cihazlarda da sorunsuz bir deneyim sunar. Bir emlak uygulamasında görsellik ön planda olduğundan, ShadCN/UI ile oluşturulan şık ve tutarlı arayüz, kullanıcıların uygulamanızda daha fazla zaman geçirmesini ve ilanları daha rahat incelemesini sağlar. Bu dört teknolojinin birleşimi, modern emlak uygulaması geliştirme sürecini hem daha verimli hem de daha keyifli hale getirir.

Teknolojinin Temel Taşları: Next.js, Prisma, BetterAuth ve ShadCN/UI Nedir?

Bir emlak uygulaması geliştirmeye başlamadan önce, kullanacağımız araçların temel özelliklerini ve neden bu kadar popüler olduklarını anlamak büyük önem taşır. Bu bölümde, projemizin temelini oluşturan bu dört teknolojiyi yakından tanıyacağız.

Next.js: React Geliştirmede Yeni Bir Standart mı Sunuyor?

Next.js, Vercel tarafından geliştirilen açık kaynaklı bir React çerçevesidir. Geliştiricilere, React uygulamalarını sunucu tarafında render etme (SSR), statik site oluşturma (SSG) ve artımlı statik yenileme (ISR) gibi gelişmiş render yetenekleriyle geliştirmeleri için güçlü bir platform sunar. Bu yetenekler, özellikle SEO performansı, başlangıç yükleme hızı ve genel kullanıcı deneyimi açısından geleneksel istemci tarafı render (CSR) yaklaşımlarına göre önemli avantajlar sağlar.

Bir emlak uygulamasında, binlerce ilanın Google gibi arama motorlarında iyi sıralanması kritik bir pazarlama stratejisidir. Next.js’in SSR ve SSG özellikleri, bu ilanların HTML içeriğini sunucuda oluşturarak arama motoru botlarının sayfaları daha kolay taramasını ve indekslemesini sağlar. Örneğin, bir ilanın detay sayfası SSG ile önceden oluşturulabilir ve CDN’den çok hızlı bir şekilde sunularak ultra düşük yükleme süreleri elde edilebilir. Eğer ilanlar sıkça güncelleniyorsa, ISR (Incremental Static Regeneration) ile belirli aralıklarla arka planda sayfaların yeniden oluşturulmasını sağlayarak, her zaman güncel veriyi, statik bir sayfanın performansı ile sunabiliriz. Ayrıca, Next.js’in dosya tabanlı yönlendirme sistemi, URL yapılarını yönetmeyi basitleştirir; her dosya veya klasör, belirli bir rota ile eşleşerek geliştiricilerin kod organizasyonunu kolaylaştırır. Dahili API Rotaları ise, ayrı bir backend sunucusuna ihtiyaç duymadan doğrudan Next.js projesi içinde API endpoint’leri oluşturmanıza olanak tanır, bu da monolitik bir geliştirme deneyimi sunar ve özellikle küçük ve orta ölçekli projelerde geliştirme hızını artırır.

Prisma: Veritabanı Yönetimini Nasıl Basitleştirir ve Geliştirici Verimliliğini Artırır?

Prisma, Node.js ve TypeScript uygulamaları için yeni nesil bir ORM (Object-Relational Mapper) aracıdır. Geleneksel ORM’lere kıyasla daha modern bir yaklaşım sunarak, veritabanı işlemlerini daha tür güvenli, verimli ve sezgisel hale getirir. Prisma, geliştiricilerin veritabanı şemalarını deklaratif bir şekilde tanımlamalarına olanak tanıyan özel bir şema dili kullanır. Bu şema dosyası, uygulamanızın veritabanı modellerini ve aralarındaki ilişkileri tek bir merkezden yönetmenizi sağlar.

Emlak uygulamasında kullanıcılar, ilanlar, emlakçılar ve hatta rezervasyonlar gibi birçok farklı veri modeli bulunur. Prisma, bu modelleri TypeScript entegrasyonu sayesinde tür güvenli bir şekilde yönetmenizi sağlar. Yani, veritabanından bir “İlan” nesnesi çektiğinizde, o nesnenin hangi özelliklere (başlık, açıklama, fiyat, fotoğraflar vb.) sahip olduğunu ve bu özelliklerin veri tiplerini (string, number, boolean, Date) TypeScript otomatik olarak bilir. Bu, geliştirme sırasında potansiyel hataları (örneğin, bir sayıyı string olarak kullanmaya çalışmak) derleme aşamasında yakalamaya yardımcı olur, böylece çalışma zamanı hataları azalır. Prisma ayrıca, veritabanı şemasındaki değişiklikleri uygulamanıza taşıyan migrasyon sistemine sahiptir. Örneğin, bir ilana yeni bir “banyo_sayısı” alanı eklemek istediğinizde, Prisma CLI (Komut Satırı Arayüzü) aracılığıyla kolayca bir migrasyon dosyası oluşturabilir ve bu değişikliği veritabanınıza uygulayabilirsiniz. Desteklediği veritabanları arasında PostgreSQL, MySQL, SQLite, SQL Server ve MongoDB gibi popüler seçenekler bulunur, bu da projenizin ihtiyaçlarına göre esneklik sağlar.

BetterAuth: Kimlik Doğrulamayı Neden Daha Güvenli ve Daha Hızlı Hale Getirir?

Kimlik doğrulama (authentication) ve yetkilendirme (authorization), modern web uygulamalarının olmazsa olmazıdır. BetterAuth (veya benzeri robust bir kimlik doğrulama çözümü), kullanıcıların güvenli bir şekilde kaydolmasını, giriş yapmasını ve yetkilerine göre uygulamadaki belirli kaynaklara erişmesini sağlamak için tasarlanmıştır. Bu tür çözümler, geliştiricilerin sıfırdan bir kimlik doğrulama sistemi kurma yükünü ortadan kaldırarak, güvenlik en iyi uygulamalarını otomatik olarak projenize entegre etmenizi sağlar.

Emlak uygulamasında, farklı kullanıcı rolleri (örneğin, yönetici, emlakçı, normal kullanıcı) ve bu rollere özgü erişim yetkileri bulunur. BetterAuth, bu rol tabanlı erişim kontrolünü kolayca yapılandırmanıza olanak tanır. Bir emlakçı, yalnızca kendi ilanlarını oluşturabilir, düzenleyebilir veya silebilirken, bir yönetici tüm ilanlar üzerinde tam kontrole sahip olabilir. Kullanıcıların güvenli şifre saklama, token tabanlı oturum yönetimi (JWT gibi), çok faktörlü kimlik doğrulama (MFA) ve şifre sıfırlama gibi özellikler, BetterAuth tarafından otomatik olarak sağlanır. Ayrıca, Google, Facebook gibi üçüncü taraf servislerle sosyal medya girişlerini entegre etme yeteneği, kullanıcıların kayıt ve giriş sürecini daha da basitleştirir. Bu, geliştiricilerin güvenlik açıklarını manuel olarak ele alma endişesini azaltır ve uygulamanın çekirdek özelliklerine odaklanmalarını sağlar. Sonuç olarak, BetterAuth projenize hem sağlam bir güvenlik katmanı ekler hem de kullanıcıların kolayca erişim sağlamasına olanak tanır.

ShadCN/UI: Geliştirici Deneyimini ve Tasarımı Nasıl İyileştirir?

ShadCN/UI, bir bileşen kütüphanesinden ziyade, Tailwind CSS ve Radix UI üzerine kurulu, tamamen özelleştirilebilir bileşenlerin bir koleksiyonudur. Geliştiricilere, kendi projelerine doğrudan kopyalayıp yapıştırabilecekleri, erişilebilir ve modern UI bileşenleri sunar. Bu yaklaşım, geleneksel UI kütüphanelerinin aksine, size tam bir tasarım özgürlüğü ve esneklik sağlar, çünkü her bileşenin koduna tam erişiminiz olur ve dilediğiniz gibi değiştirebilirsiniz.

Emlak uygulamalarında estetik ve işlevsellik el ele gitmelidir. ShadCN/UI ile oluşturulan bileşenler, modern ve şık bir görünüm sunarken, aynı zamanda erişilebilirlik standartlarına uygun olarak tasarlanmıştır. Butonlar, input alanları, kartlar, diyalog kutuları (modallar), navigasyon menüleri gibi temel UI elemanlarını hızlıca oluşturabilir ve projenizin tasarım diline uygun hale getirebilirsiniz. Örneğin, ilanları listeleyen kartlar, ShadCN/UI’ın Card bileşenleri kullanılarak hızlıca oluşturulabilir ve Tailwind CSS sınıflarıyla kolayca stilize edilebilir. Uygulamanızın renk paletini, tipografisini ve diğer görsel özelliklerini merkezi bir tema dosyasında tanımlayarak, tüm bileşenlerin tutarlı bir şekilde görünmesini sağlayabilirsiniz. Bu, özellikle büyük ölçekli projelerde veya birden fazla geliştiricinin çalıştığı ekiplerde tasarım tutarlılığını korumak için hayati öneme sahiptir. ShadCN/UI, size sadece güzel görünen değil, aynı zamanda bakımı kolay ve performanslı bir kullanıcı arayüzü oluşturma gücü verir.

Proje Kurulumu ve Temel Yapılandırma Adımları Nelerdir?

Herhangi bir büyük projeye başlarken, sağlam bir temel oluşturmak esastır. Emlak uygulamamızı bu güçlü teknoloji yığınıyla inşa etmek için ilk adımlarımız, projenin başlatılması ve temel bileşenlerin yapılandırılması olacaktır. Bu süreç, Next.js projesinin oluşturulmasından, veritabanı bağlantısına ve kullanıcı arayüzü entegrasyonuna kadar bir dizi önemli adımı içerir. Bu adımları doğru bir şekilde takip etmek, gelecekteki geliştirmelerin sorunsuz ilerlemesini sağlar.

Next.js Projesinin Başlatılması ve Temel Yapılandırma

Yeni bir Next.js projesi oluşturmak oldukça basittir. Terminalinizde aşağıdaki komutu çalıştırarak başlayabiliriz. Bu komut, bize projenin adı ve kullanılacak özellikler (TypeScript, ESLint, Tailwind CSS vb.) hakkında bazı sorular soracaktır. Tüm sorulara evet diyerek varsayılan seçenekleri kabul etmek genellikle iyi bir başlangıçtır, özellikle ShadCN/UI, Tailwind CSS ile iyi anlaştığı için bu kurulum bizim için idealdir.


npx create-next-app@latest emlak-uygulamasi --typescript --tailwind --eslint

Proje oluşturulduktan sonra, projenin dizinine geçiş yapın ve geliştirme sunucusunu başlatın:


cd emlak-uygulamasi
npm run dev

Artık tarayıcınızda http://localhost:3000 adresine giderek varsayılan Next.js uygulamasını görebilirsiniz. Projemizin temel yapısı artık hazır.

Prisma Kurulumu, Veritabanı Bağlantısı ve İlk Model Tanımı

Prisma'yı projemize entegre etmek için öncelikle gerekli paketleri kurmalıyız:


npm install prisma @prisma/client
npm install -D prisma
npx prisma init

npx prisma init komutu, projemizin kök dizininde bir prisma klasörü ve içinde schema.prisma dosyasını oluşturur. Ayrıca, .env dosyanızı da güncelleyecektir. schema.prisma dosyasında veritabanı sağlayıcısını ve bağlantı URL'sini tanımlamamız gerekiyor. Örneğin, PostgreSQL kullanıyorsak:


// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql" // Veya "mysql", "sqlite", "mongodb"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(uuid())
  email     String   @unique
  password  String
  name      String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  listings  Listing[]
}

model Listing {
  id          String    @id @default(uuid())
  title       String
  description String
  price       Float
  address     String
  city        String
  country     String
  bedrooms    Int
  bathrooms   Int
  area        Float
  imageUrl    String[]
  isPublished Boolean   @default(false)
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
  author      User      @relation(fields: [authorId], references: [id])
  authorId    String
}

.env dosyanıza veritabanı bağlantı dizenizi ekleyin:


DATABASE_URL="postgresql://kullanici:sifre@localhost:5432/emlakdb?schema=public"

Modelleri tanımladıktan sonra, veritabanına uygulamak için migrasyon oluşturun ve çalıştırın:


npx prisma migrate dev --name init_schema

Bu komut, veritabanınızda User ve Listing tablolarını oluşturacaktır. Ardından, Prisma Client'ı oluşturmak için aşağıdaki komutu çalıştırın:


npx prisma generate

Artık Prisma, veritabanınızla etkileşim kurmaya hazır.

BetterAuth Entegrasyonu İçin Genel Adımlar

BetterAuth'un kurulumu, kullandığınız özel pakete veya hizmete göre değişiklik gösterebilir. Genellikle, bir kimlik doğrulama çözümünü entegre etmek için aşağıdaki adımlar izlenir:

  1. Paket Kurulumu: BetterAuth veya benzeri bir kütüphaneyi (örneğin NextAuth.js), npm install betterauth veya npm install next-auth komutuyla projenize ekleyin.
  2. API Rotaları Oluşturma: Next.js'in API rotalarını kullanarak kimlik doğrulama endpoint'lerini (giriş, kayıt, çıkış, şifre sıfırlama) oluşturun. BetterAuth genellikle bu rotaları otomatik olarak yönetmenizi sağlayan bir yapı sunar.
  3. Sağlayıcıları Yapılandırma: Veritabanı adaptörünü (Prisma ile çalışacak şekilde) ve kullanmak istediğiniz kimlik doğrulama sağlayıcılarını (e-posta/şifre, Google, GitHub vb.) yapılandırın.
  4. Oturum Yönetimi: Kullanıcının oturum bilgilerini (JWT veya oturum çerezleri) yönetmek için client-side'da Context API veya SWR gibi kütüphaneleri kullanarak küresel bir oturum durumu sağlayın.
  5. Korunan Rotalar: API rotalarında veya sayfalarda, kullanıcının oturum açmış olup olmadığını kontrol eden bir ara yazılım (middleware) veya yardımcı fonksiyonlar kullanarak yetkilendirme uygulayın.

BetterAuth ile ilgili detaylı dokümantasyona bakarak spesifik entegrasyon adımlarını takip etmek en doğrusu olacaktır. Ancak temel mantık, sunucu tarafında güvenli kimlik doğrulama akışlarını yönetmek ve istemci tarafında kullanıcı oturum durumunu takip etmektir.

ShadCN/UI Kurulumu ve İlk Bileşenlerin Eklenmesi

ShadCN/UI, önceden derlenmiş bir kütüphane olmadığı için, bileşenlerini projemize özel bir komutla ekleriz. Projenizde Tailwind CSS zaten yüklü olduğu için bu süreç daha da kolaydır:


npx shadcn-ui@latest init

Bu komut, components.json dosyasını oluşturacak ve Tailwind CSS yapılandırmanızda bazı değişiklikler yapmanızı isteyecektir. Ayarları varsayılan olarak kabul edebilirsiniz. Ardından, ilk bileşenlerimizi ekleyebiliriz. Örneğin, bir Button ve Input bileşenini ekleyelim:


npx shadcn-ui@latest add button
npx shadcn-ui@latest add input

Bu komutlar, components/ui klasörünün altına button.tsx ve input.tsx dosyalarını oluşturacaktır. Artık bunları herhangi bir React bileşeninizde kullanabilirsiniz:


// app/page.tsx (Örnek)
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export default function Home() {
  return (
    

      
Emlak Uygulamasına Hoş Geldiniz

      

        
        
      

      
    

  );
}

Bu kurulum adımları, Next.js, Prisma, BetterAuth ve ShadCN/UI ile güçlü ve modern bir emlak uygulaması geliştirmek için sağlam bir başlangıç noktası sunar. Her bir bileşenin doğru şekilde yapılandırılması, uygulamanızın performansını, güvenliğini ve geliştirme verimliliğini doğrudan etkileyecektir.

Emlak İlanları Nasıl Yönetilir: Next.js ve Prisma ile CRUD Operasyonları

Emlak uygulamasının kalbi, ilanların oluşturulması, görüntülenmesi, güncellenmesi ve silinmesi gibi temel CRUD (Create, Read, Update, Delete) operasyonlarıdır. Bu bölümde, Next.js'in API rotalarını ve Prisma'yı kullanarak bu işlemleri nasıl gerçekleştireceğimizi adım adım inceleyeceğiz. Bu, uygulamanın dinamik veri yönetimi yeteneğini kazanmasını sağlayacaktır.

İlan Oluşturma (Create): Formlar ve API Rotası

Yeni bir emlak ilanı oluşturmak için, kullanıcılardan başlık, açıklama, fiyat, adres, görseller gibi bilgileri toplayan bir form arayüzüne ihtiyacımız var. Bu formu ShadCN/UI bileşenleriyle oluşturabiliriz. Formun gönderilmesiyle birlikte, veriler Next.js API rotasına gönderilecek ve Prisma aracılığıyla veritabanına kaydedilecektir.

İlk olarak, ilan oluşturma formunuzun bulunduğu bir sayfa oluşturalım (örneğin, /app/ilan-olustur/page.tsx). Bu sayfa, Input, Textarea, Button gibi ShadCN/UI bileşenlerini kullanabilir. Formun gönderilmesiyle bir POST isteği atılacak ve bu isteği karşılayacak bir API rotası (/app/api/listings/route.ts) oluşturmamız gerekecek.


// app/api/listings/route.ts
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma'; // Prisma client'ı doğru yoldan import ettiğinizden emin olun

export async function POST(req: Request) {
  try {
    const body = await req.json();
    const { title, description, price, address, city, country, bedrooms, bathrooms, area, imageUrl, authorId } = body;

    if (!title || !description || !price || !address || !city || !country || !authorId) {
      return NextResponse.json({ message: 'Eksik bilgiler var' }, { status: 400 });
    }

    // Gerçek bir uygulamada, burada BetterAuth ile kullanıcının yetkilendirmesi kontrol edilmelidir.
    // Örneğin, 'authorId' gerçekten oturum açmış kullanıcının ID'si mi?

    const newListing = await prisma.listing.create({
      data: {
        title,
        description,
        price: parseFloat(price),
        address,
        city,
        country,
        bedrooms: parseInt(bedrooms),
        bathrooms: parseInt(bathrooms),
        area: parseFloat(area),
        imageUrl: imageUrl || [], // Resim URL'leri bir dizi olarak
        authorId, // İlanı oluşturan kullanıcının ID'si
        isPublished: true, // Varsayılan olarak yayınlandı
      },
    });

    return NextResponse.json(newListing, { status: 201 });
  } catch (error) {
    console.error('İlan oluşturma hatası:', error);
    return NextResponse.json({ message: 'İlan oluşturulurken bir hata oluştu.' }, { status: 500 });
  }
}

Bu API rotası, gelen isteğin gövdesinden ilan bilgilerini alır, temel doğrulama yapar ve ardından Prisma'nın create metodu aracılığıyla veritabanına yeni bir ilan kaydı ekler. authorId alanının BetterAuth ile güvenli bir şekilde doğrulanması gerektiği unutulmamalıdır.

İlanları Listeleme (Read): Sunucu Tarafı Render (SSR) veya Statik Oluşturma (SSG)

Emlak ilanlarını listelemek için Next.js'in veri getirme stratejilerinden yararlanabiliriz. Eğer ilanlar çok sık güncellenmiyorsa ve SEO kritikse, statik oluşturma (SSG) harika bir seçenektir. Ancak ilanların sıkça güncellendiği ve her istekte en güncel veriyi göstermek istediğimiz senaryolarda sunucu tarafı render (SSR) daha uygun olabilir.

Örnek olarak, tüm ilanları listeleyecek bir ana sayfa (/app/page.tsx) düşünelim. Bu sayfada, doğrudan sunucu tarafında Prisma'yı kullanarak ilanları çekebiliriz (Next.js 13+ ile server components):


// app/page.tsx
import { prisma } from '@/lib/prisma';
import { ListingCard } from '@/components/listing-card'; // Kendi ListingCard bileşeninizi oluşturmalısınız

export default async function HomePage() {
  const listings = await prisma.listing.findMany({
    where: {
      isPublished: true,
    },
    include: {
      author: {
        select: {
          name: true,
          email: true,
        },
      },
    },
    orderBy: {
      createdAt: 'desc',
    },
  });

  return (
    

      
Güncel Emlak İlanları

      

        {listings.map((listing) => (
          
        ))}
        {listings.length === 0 && (
          
Henüz hiç ilan bulunmuyor.

        )}
      

    

  );
}

Burada prisma.listing.findMany ile tüm yayınlanmış ilanları çekiyoruz ve her ilan için bir ListingCard bileşeni render ediyoruz. include özelliği sayesinde, ilanın yazar bilgilerini de tek bir sorguda alabiliriz, bu da sorgu sayısını azaltarak performansı artırır.

İlan Detayları (Read): Dinamik Rotalar

Her bir ilanın kendi detay sayfasına sahip olması gerekir (örneğin, /app/listings/[id]/page.tsx). Next.js'in dinamik rotaları bu senaryo için mükemmeldir. [id] şeklinde tanımladığınız bir klasör, URL'deki dinamik parametreyi yakalar.


// app/listings/[id]/page.tsx
import { prisma } from '@/lib/prisma';
import { notFound } from 'next/navigation';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import Image from 'next/image';

interface ListingDetailPageProps {
  params: {
    id: string;
  };
}

export default async function ListingDetailPage({ params }: ListingDetailPageProps) {
  const listing = await prisma.listing.findUnique({
    where: {
      id: params.id,
      isPublished: true,
    },
    include: {
      author: {
        select: {
          name: true,
          email: true,
        },
      },
    },
  });

  if (!listing) {
    notFound(); // İlan bulunamazsa 404 sayfası göster
  }

  return (
    

      
        
          {listing.title}
          
{listing.address}, {listing.city}, {listing.country}

          

            {listing.bedrooms} Yatak Odası
            {listing.bathrooms} Banyo
            {listing.area} m²
          

        
        
          {listing.imageUrl.length > 0 && (
            

              {listing.title}
            

          )}
          
Açıklama

          
{listing.description}

          
          
Fiyat

          
{listing.price.toLocaleString('tr-TR', { style: 'currency', currency: 'TRY' })}


          {listing.author && (
            

              
Emlakçı Bilgileri

              
Adı: {listing.author.name || 'Bilinmiyor'}

              
E-posta: {listing.author.email}

            

          )}
        
      
    

  );
}

Bu sayfada, params.id ile gelen ilan ID'sini kullanarak prisma.listing.findUnique ile ilgili ilanı veritabanından çekiyoruz. Eğer ilan bulunamazsa, notFound() fonksiyonu ile Next.js'in 404 sayfasını tetikleyebiliriz. İlanı bulduktan sonra, ShadCN/UI'ın Card bileşenlerini ve Next.js'in Image bileşenini kullanarak şık bir detay sayfası oluştururuz.

İlan Güncelleme (Update) ve Silme (Delete): Yetkilendirme Kontrolü

İlan güncelleme ve silme işlemleri, güvenlik açısından özellikle önemlidir. Sadece ilanın sahibi veya bir yönetici bu işlemleri gerçekleştirebilmelidir. Bu, BetterAuth ile entegrasyonu gerektiren bir yetkilendirme katmanı eklemeyi gerektirir.

Güncelleme için de bir API rotası (/app/api/listings/[id]/route.ts) ve bir düzenleme formu gerekir. PUT veya PATCH metodu kullanılarak gelen isteği işleyebiliriz:


// app/api/listings/[id]/route.ts
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { auth } from '@/lib/betterauth'; // BetterAuth entegrasyonunuzu buradan import edin

export async function PUT(req: Request, { params }: { params: { id: string } }) {
  try {
    const session = await auth(); // BetterAuth ile oturum kontrolü
    if (!session || !session.user) {
      return NextResponse.json({ message: 'Yetkisiz erişim' }, { status: 401 });
    }

    const listingId = params.id;
    const body = await req.json();
    const { title, description, price, address, city, country, bedrooms, bathrooms, area, imageUrl, isPublished } = body;

    const existingListing = await prisma.listing.findUnique({
      where: { id: listingId },
    });

    if (!existingListing) {
      return NextResponse.json({ message: 'İlan bulunamadı' }, { status: 404 });
    }

    // İlanı sadece sahibi veya yönetici güncelleyebilir
    // Gerçek bir uygulamada, kullanıcının rolünü de kontrol etmelisiniz.
    if (existingListing.authorId !== session.user.id) {
        return NextResponse.json({ message: 'Bu ilanı güncelleme yetkiniz yok' }, { status: 403 });
    }

    const updatedListing = await prisma.listing.update({
      where: { id: listingId },
      data: {
        title: title ?? existingListing.title,
        description: description ?? existingListing.description,
        price: price ? parseFloat(price) : existingListing.price,
        address: address ?? existingListing.address,
        city: city ?? existingListing.city,
        country: country ?? existingListing.country,
        bedrooms: bedrooms ? parseInt(bedrooms) : existingListing.bedrooms,
        bathrooms: bathrooms ? parseInt(bathrooms) : existingListing.bathrooms,
        area: area ? parseFloat(area) : existingListing.area,
        imageUrl: imageUrl ?? existingListing.imageUrl,
        isPublished: isPublished ?? existingListing.isPublished,
      },
    });

    return NextResponse.json(updatedListing, { status: 200 });
  } catch (error) {
    console.error('İlan güncelleme hatası:', error);
    return NextResponse.json({ message: 'İlan güncellenirken bir hata oluştu.' }, { status: 500 });
  }
}

export async function DELETE(req: Request, { params }: { params: { id: string } }) {
  try {
    const session = await auth();
    if (!session || !session.user) {
      return NextResponse.json({ message: 'Yetkisiz erişim' }, { status: 401 });
    }

    const listingId = params.id;

    const existingListing = await prisma.listing.findUnique({
        where: { id: listingId },
    });

    if (!existingListing) {
        return NextResponse.json({ message: 'İlan bulunamadı' }, { status: 404 });
    }

    if (existingListing.authorId !== session.user.id) {
        return NextResponse.json({ message: 'Bu ilanı silme yetkiniz yok' }, { status: 403 });
    }

    await prisma.listing.delete({
      where: { id: listingId },
    });

    return NextResponse.json({ message: 'İlan başarıyla silindi' }, { status: 200 });
  } catch (error) {
    console.error('İlan silme hatası:', error);
    return NextResponse.json({ message: 'İlan silinirken bir hata oluştu.' }, { status: 500 });
  }
}

Bu API rotalarında auth() fonksiyonu (BetterAuth'tan geldiği varsayılan) ile kullanıcının oturum bilgilerini alıyoruz. session.user.id ile mevcut ilanın authorId değerini karşılaştırarak, sadece ilanı oluşturan kullanıcının veya bir yöneticinin (ek rol kontrolüyle) bu işlemleri yapmasına izin veriyoruz. Bu, uygulamanızın güvenliğini artırır ve veri bütünlüğünü korur. Görüldüğü üzere, Next.js API rotaları ve Prisma, emlak ilanları gibi dinamik verileri yönetmek için güçlü ve esnek bir yapı sunar.

Kullanıcı Deneyimini Zenginleştirme: ShadCN/UI ile Modern Bir Arayüz

Bir emlak web uygulamasında, kullanıcı arayüzü (UI), kullanıcıların uygulamayla etkileşimini, ilanları keşfetme kolaylığını ve genel memnuniyeti doğrudan etkiler. ShadCN/UI, bu noktada geliştiricilere hem estetik hem de işlevsel açıdan zengin bir deneyim sunan modern ve özelleştirilebilir bileşenler oluşturma imkanı tanır. Tailwind CSS ile entegrasyonu sayesinde, responsive tasarımları hızlıca uygulayabilir ve markanıza özgü bir görünüm elde edebilirsiniz.

Emlak Uygulamasında Form Bileşenlerinin Kullanımı

Emlak ilanları oluşturmak, kullanıcı profili güncellemek veya iletişim formları doldurmak gibi birçok senaryoda form bileşenlerine ihtiyaç duyarız. ShadCN/UI, bu amaçla Input, Textarea, Select, Checkbox ve Button gibi temel form elemanlarını sunar. Bu bileşenler, erişilebilirlik standartlarına uygun olarak tasarlanmıştır ve Tailwind CSS sınıflarıyla kolayca stilize edilebilir.


// components/ui/listing-form.tsx (Örnek bir form bileşeni)
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; // Label bileşenini de eklemelisiniz

export function ListingForm() {
  return (

Aşağıdaki içerikler de ilgilinizi çekebilir:

E-posta Bülteni
Yazılım Topluluğuna Katılın
En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim.