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:
- Paket Kurulumu: BetterAuth veya benzeri bir kütüphaneyi (örneğin NextAuth.js),
npm install betterauthveyanpm install next-authkomutuyla projenize ekleyin. - 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.
- 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.
- 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.
- 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 && (
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 (
);
}
Bu örnekte, Label bileşeni ile Input ve Textarea bileşenlerini birleştirerek anlamlı ve erişilebilir form alanları oluşturuyoruz. Tailwind CSS'in grid sistemi sayesinde, form alanlarını farklı ekran boyutlarına göre otomatik olarak düzenleyebiliriz. Örneğin, md:grid-cols-2 ifadesi, orta boyutlu ekranlardan itibaren iki sütunlu bir düzen sağlar.
Navigasyon ve İlan Gösterimi İçin Kartlar ve Modallar
Bir emlak uygulamasının ana gezinme (navigation) menüsü, kullanıcıların farklı sayfalara (Ana Sayfa, İlanlar, Hesabım, İlan Oluştur) hızlıca ulaşmasını sağlamalıdır. ShadCN/UI'ın Menubar, DropdownMenu veya NavigationMenu gibi bileşenleri, bu tür menüleri şık ve işlevsel bir şekilde oluşturmak için kullanılabilir.
Emlak ilanlarının ana listeleme sayfasında, her bir ilanı gösteren kartlar hayati öneme sahiptir. Bu kartlar, ilanın temel bilgilerini (resim, başlık, fiyat, konum) özetlemeli ve tıklanabilir olmalıdır. ShadCN/UI'ın Card bileşeni bu amaç için idealdir:
// components/listing-card.tsx import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import Image from "next/image"; import Link from "next/link"; import { Badge } from "@/components/ui/badge"; interface ListingCardProps { listing: { id: string; title: string; description: string; price: number; city: string; imageUrl: string[]; bedrooms: number; bathrooms: number; area: number; }; } export function ListingCard({ listing }: ListingCardProps) { return ( /listings/${listing.id}} passHref> {listing.imageUrl.length > 0 && ()} {listing.title} {listing.description}{listing.price.toLocaleString('tr-TR', { style: 'currency', currency: 'TRY' })}
{listing.city}
); }
Bu ListingCard bileşeni, ilanın birincil görselini, başlığını, kısa açıklamasını, ana özelliklerini (Badge kullanarak) ve fiyatını gösterir. Link bileşeni ile tıklanabilir hale getirilir. İlan silme onayı gibi durumlarda, AlertDialog veya Dialog (modal) bileşenleri kullanarak kullanıcılardan onay alabiliriz. Bu, hatalı silme işlemlerini önler ve kullanıcıya geri bildirim sağlar.
Responsive Tasarım: Mobil Uyumlu Emlak Uygulaması
Mobil cihazlar üzerinden emlak araması yapan kullanıcı sayısı giderek arttığı için, uygulamanızın responsive (duyarlı) olması zorunludur. ShadCN/UI, temel aldığı Tailwind CSS sayesinde bu konuda mükemmel bir destek sunar. Tailwind'in utility-first yaklaşımı, doğrudan HTML işaretlemesinde media query benzeri sınıflar tanımlamanıza olanak tanır.
Uzman İpucu: Tailwind CSS'in responsive sınıflarını (örneğin sm:, md:, lg:) kullanarak her bir bileşenin farklı ekran boyutlarındaki davranışını kolayca kontrol edebilirsiniz. Bu, özel CSS media query yazma ihtiyacını büyük ölçüde azaltır ve geliştirme hızınızı artırır. Örneğin, bir grid düzeninde grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 sınıflarını kullanarak, küçük ekranlarda tek sütun, orta ekranlarda iki sütun ve büyük ekranlarda üç sütunlu bir düzen elde edebilirsiniz.
Yukarıdaki ListingCard örneğinde, ilan kartlarının ana listeleyici sayfasında grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 gibi bir sınıf kombinasyonu kullanarak otomatik responsive düzen elde ettik. Bu, CSS'te manuel olarak @media kuralları yazmak yerine, doğrudan Tailwind sınıflarıyla bileşenlerin nasıl davranacağını belirtmenizi sağlar. Böylece, uygulamanız masaüstü bilgisayarlardan tablet ve akıllı telefonlara kadar tüm cihazlarda sorunsuz ve optimize edilmiş bir kullanıcı deneyimi sunar.
ShadCN/UI ile oluşturulan bileşenler, sadece görsel olarak çekici olmakla kalmaz, aynı zamanda erişilebilirlik (WCAG standartları) göz önünde bulundurularak tasarlanmıştır. Bu da, uygulamanızın daha geniş bir kullanıcı kitlesi tarafından kullanılabilir olmasını sağlar. Bu sayede emlak uygulamanız, sadece modern görünmekle kalmaz, aynı zamanda her kullanıcı için kolayca erişilebilir ve anlaşılır olur.
Güvenliğe Odaklanma: BetterAuth ile Kimlik Doğrulama ve Yetkilendirme
Herhangi bir web uygulamasında, özellikle kullanıcı verileri ve hassas bilgilere erişimin olduğu bir emlak uygulamasında güvenlik en temel önceliklerden biridir. BetterAuth, bu karmaşık alanı basitleştirerek, güçlü kimlik doğrulama ve yetkilendirme mekanizmalarını uygulamanıza entegre etmenizi sağlar. Bu bölümde, BetterAuth ile kullanıcı kayıt, giriş, rol tabanlı erişim kontrolü ve API rotalarında yetkilendirme süreçlerini nasıl yöneteceğimizi inceleyeceğiz.
Kayıt Olma ve Giriş Yapma Akışları
Kullanıcıların emlak uygulamanıza güvenli bir şekilde kaydolabilmesi ve giriş yapabilmesi BetterAuth'ın temel işlevlerinden biridir. BetterAuth, e-posta/şifre kombinasyonunun yanı sıra, Google, Facebook gibi sosyal medya hesaplarıyla veya sihirli bağlantılar (magic links) aracılığıyla girişi destekleyebilir. Bu, kullanıcılara esneklik sunarken, geliştiricilere de farklı kimlik doğrulama stratejilerini kolayca entegre etme imkanı tanır.
Örneğin, bir kullanıcı giriş sayfasında, kullanıcının e-posta ve şifresini alacak ShadCN/UI tabanlı bir form oluşturabiliriz. Bu formun gönderilmesiyle, BetterAuth'ın sağladığı API endpoint'lerine bir POST isteği gönderilir:
// app/auth/login/page.tsx (Örnek bir giriş sayfası)
'use client';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
// import { signIn } from '@/lib/betterauth-client'; // BetterAuth'un client-side signIn fonksiyonu
export default function LoginPage() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState(null);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError(null);
try {
// Bu kısım BetterAuth'un client-side SDK'sına göre değişecektir.
// Örnek olarak, NextAuth.js'deki signIn fonksiyonuna benzer bir çağrı
// const result = await signIn('credentials', {
// redirect: false,
// email,
// password,
// });
// if (result?.error) {
// setError(result.error);
// } else {
// window.location.href = '/dashboard'; // Başarılı giriş sonrası yönlendirme
// }
// Geçici olarak başarılı mesajı gösterelim
console.log('Giriş isteği gönderildi:', { email, password });
alert('Giriş denemesi başarılı! (BetterAuth entegrasyonu simüle edildi)');
window.location.href = '/';
} catch (err) {
setError('Bir hata oluştu. Lütfen tekrar deneyin.');
console.error(err);
}
};
return (
Hesabınıza Giriş Yapın
Hesabınız yok mu? Kaydolun
);
}
Benzer bir yapıyla kayıt olma sayfası da oluşturulabilir. BetterAuth, bu süreçlerde şifreleri güvenli bir şekilde hash'leme, oturum token'larını oluşturma ve yönetme gibi kritik güvenlik adımlarını otomatik olarak ele alır.
Kullanıcı Rolleri ve Rol Bazlı Erişim Kontrolü (RBAC)
Emlak uygulamasında farklı türde kullanıcılar bulunabilir: normal kullanıcılar (ilanları arayanlar), emlakçılar (ilanları yayınlayanlar) ve yöneticiler (tüm uygulamayı yönetenler). Her rolün, uygulamanın farklı bölümlerine veya fonksiyonlarına erişim yetkisi farklı olmalıdır. BetterAuth, bu rol tabanlı erişim kontrolünü (RBAC) kolayca uygulamanıza olanak tanır.
Prisma şemamızda User modeline bir role alanı ekleyerek başlayabiliriz:
// prisma/schema.prisma
enum Role {
USER
AGENT
ADMIN
}
model User {
// ... diğer alanlar ...
role Role @default(USER)
}
Bu şema değişikliğini veritabanına uygulamak için npx prisma migrate dev komutunu çalıştırmayı unutmayın.
BetterAuth ile oturum açmış kullanıcının rol bilgisini alabilir ve bu bilgiye göre UI'da veya API rotalarında yetkilendirme kontrolü yapabiliriz. Örneğin, "İlan Oluştur" butonunu sadece AGENT veya ADMIN rolüne sahip kullanıcılara göstermek isteyebiliriz:
// components/main-nav.tsx (Örnek bir navigasyon bileşeni)
'use client';
import Link from 'next/link';
// import { useSession } from '@/lib/betterauth-client'; // BetterAuth'un client-side session hook'u
export function MainNav() {
// const { data: session } = useSession(); // BetterAuth oturumunu al
// const userRole = session?.user?.role; // Kullanıcının rolü
// BetterAuth entegrasyonu olmadığı için mock bir rol kullanalım
const userRole = 'AGENT'; // 'USER', 'AGENT', 'ADMIN'
return (
);
}
API Rotalarında Yetkilendirme Kontrolü
Kullanıcı arayüzünde belirli öğeleri gizlemek veya göstermek yeterli değildir; asıl güvenlik, sunucu tarafında API rotalarında yetkilendirme kontrolü yaparak sağlanır. Daha önce ilan güncelleme ve silme API rotalarında gördüğümüz gibi, BetterAuth ile kullanıcının oturum bilgilerini alıp, bu bilgileri bir ilanın authorId'si ile karşılaştırarak veya kullanıcının rolünü kontrol ederek yetkilendirme yapabiliriz.
// app/api/admin/users/route.ts (Sadece yöneticinin erişebileceği bir API rotası örneği)
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { auth } from '@/lib/betterauth'; // BetterAuth entegrasyonunuzu buradan import edin
export async function GET(req: Request) {
try {
const session = await auth();
// Kullanıcının oturum açmış olup olmadığını kontrol et
if (!session || !session.user) {
return NextResponse.json({ message: 'Yetkisiz erişim' }, { status: 401 });
}
// Kullanıcının yönetici rolüne sahip olup olmadığını kontrol et
// session.user BetterAuth'tan gelen kullanıcı bilgilerini içerir ve rol alanı varsayılan olarak yoktur,
// BetterAuth'u Prisma ile entegre ettiğinizde bu bilgiyi oturum nesnesine eklemeniz gerekir.
// Varsayalım ki session.user.role alanı var.
const user = await prisma.user.findUnique({
where: { id: session.user.id },
select: { role: true },
});
if (!user || user.role !== 'ADMIN') {
return NextResponse.json({ message: 'Bu kaynağa erişim yetkiniz yok.' }, { status: 403 });
}
const users = await prisma.user.findMany({
select: {
id: true,
email: true,
name: true,
role: true,
createdAt: true,
},
});
return NextResponse.json(users, { status: 200 });
} catch (error) {
console.error('Kullanıcıları getirme hatası:', error);
return NextResponse.json({ message: 'Kullanıcılar getirilirken bir hata oluştu.' }, { status: 500 });
}
}
Bu örnekte, /api/admin/users rotasına yapılan isteklerde, öncelikle kullanıcının oturum açıp açmadığı, ardından da ADMIN rolüne sahip olup olmadığı kontrol ediliyor. Sadece yetkili kullanıcıların bu tür hassas verilere erişmesine izin verilerek, uygulamanın genel güvenliği sağlanır. BetterAuth'ın sağladığı bu kolay entegrasyon, güvenlik katmanlarını doğru ve tutarlı bir şekilde uygulamaya dahil etmeyi mümkün kılar, böylece geliştiriciler çekirdek iş mantığına daha fazla odaklanabilir.
İleri Düzey Uygulamalar ve Optimizasyon Stratejileri
Bir emlak uygulamasını temel CRUD operasyonlarının ötesine taşımak ve onu daha verimli, ölçeklenebilir ve kullanıcı dostu hale getirmek için ileri düzey teknikler ve optimizasyon stratejileri uygulamak kritik öneme sahiptir. Bu bölümde, performans, veri yönetimi ve dağıtım konularında uygulamanızı bir sonraki seviyeye taşıyacak ipuçlarını ve püf noktalarını ele alacağız.
Next.js'in Veri Getirme Yöntemlerini Akıllıca Kullanma
Next.js, farklı veri getirme stratejileri sunarak her senaryoya uygun bir çözüm sağlar:
-
Statik Site Oluşturma (SSG) -
getStaticProps(Sayfa Yönlendirici): Emlak ilanları gibi nispeten statik içerikler için idealdir. Sayfa, derleme zamanında oluşturulur ve CDN üzerinden çok hızlı bir şekilde sunulur. Bu, özellikle arama motorları için mükemmel SEO sağlar. İlanlar sık güncellenmiyorsa, ana ilan listeleme sayfaları için kullanılabilir.// pages/listings/index.tsx (Sayfa Yönlendirici için örnek) import { prisma } from '@/lib/prisma'; export async function getStaticProps() { const listings = await prisma.listing.findMany({ where: { isPublished: true }, orderBy: { createdAt: 'desc' }, }); return { props: { listings: JSON.parse(JSON.stringify(listings)) }, // Tarih objeleri için serialize etme revalidate: 60, // Her 60 saniyede bir yeniden oluştur }; } export default function ListingsPage({ listings }) { // ... İlanları render et ... } -
Sunucu Tarafı Render (SSR) -
getServerSideProps(Sayfa Yönlendirici) veya Sunucu Bileşenleri (Uygulama Yönlendirici): Her istekte güncel veriyi almak gerektiğinde kullanılır. Örneğin, kullanıcının oturum bilgisine veya konumuna göre kişiselleştirilmiş ilanlar göstermek için. Uygulama Yönlendirici'de (/appdizini), varsayılan olarak sunucu bileşenleri kullanılır ve bu, otomatik olarak sunucu tarafında veri getirme yeteneği sunar, bu dagetServerSideProps'a benzer bir mantık sağlar.// app/user-dashboard/page.tsx (Uygulama Yönlendirici için sunucu bileşeni) import { prisma } from '@/lib/prisma'; // import { auth } from '@/lib/betterauth'; // Auth session'ını almak için export default async function UserDashboardPage() { // const session = await auth(); // Sunucu tarafında oturum bilgisini al // if (!session?.user) { // // Yönlendirme veya hata mesajı // } // const userListings = await prisma.listing.findMany({ // where: { authorId: session.user.id }, // }); const userListings = []; // Geçici boş dizi return (); }Emlaklarım
{/* Kulanıcının ilanlarını listele */} - Artımlı Statik Yenileme (ISR): SSG ile SSR'nin birleşimi gibidir. Statik olarak oluşturulmuş sayfaları belirli aralıklarla veya on-demand olarak yeniden oluşturur. Bu, hem hız hem de güncellik arasında iyi bir denge sağlar.
Uzman İpucu: Büyük emlak uygulamalarında, ilan listeleme sayfaları için ISR, tekil ilan detay sayfaları için ise SSG (eğer ilan verisi çok sık değişmiyorsa) veya SSR (gerçek zamanlı fiyat/durum güncellemeleri varsa) kullanmak en iyi performansı sağlar. Ana sayfa gibi sık erişilen ve kişiselleştirme gerektirmeyen sayfaları SSG ile oluşturmak, sunucu yükünü azaltır.
Prisma Performansı: İlişkisel Veriler, İndeksler ve Sorgu Optimizasyonu
Prisma, kullanımı kolay olsa da, büyük veri kümeleriyle çalışırken performans optimizasyonları yapmak önemlidir:
-
İlişkisel Veri Yükleme (
includeveselect): Veritabanından sadece ihtiyacınız olan verileri çekin. Örneğin, bir ilanı çekerken yazar bilgilerini de istiyorsanızincludekullanın. Sadece belirli alanları istiyorsanızselectkullanın.// Tüm yazar bilgilerini getir const listingWithAuthor = await prisma.listing.findUnique({ where: { id: 'listing-id' }, include: { author: true }, }); // Yazarın sadece adını ve e-postasını getir const listingWithSelectedAuthor = await prisma.listing.findUnique({ where: { id: 'listing-id' }, include: { author: { select: { name: true, email: true }, }, }, }); -
İndeksler: Sıkça sorguladığınız alanlara (örneğin
listing.city,listing.price,user.email) veritabanı indeksleri ekleyerek sorgu performansını artırın. Bu,schema.prismadosyanızda@uniqueveya@indexanahtar kelimeleriyle yapılabilir.model Listing { // ... city String price Float @@index([city]) // Şehir alanına indeks ekle @@index([price]) // Fiyat alanına indeks ekle } -
Sayfalama (Pagination): Binlerce ilanınız olduğunda, tümünü tek seferde çekmek yerine sayfalama (
skipvetakeveyacursortabanlı sayfalama) kullanın.const listings = await prisma.listing.findMany({ skip: 0, // İlk 0 kaydı atla take: 10, // Sonraki 10 kaydı al orderBy: { createdAt: 'desc' }, });
Resim Optimizasyonu ve Önbellekleme Mekanizmaları
Emlak uygulamalarında görseller, sayfa boyutunun ve yükleme süresinin büyük bir kısmını oluşturur. Next.js'in next/image bileşeni, bu konuda otomatik optimizasyonlar sunar. Resimleri doğru boyutlandırma, lazy loading (tembel yükleme) ve farklı formatlara (WebP gibi) dönüştürme gibi işlemlerle performansı önemli ölçüde artırır.
import Image from 'next/image';
Önbellekleme, sunucu yükünü azaltmak ve yanıt sürelerini hızlandırmak için hayati öneme sahiptir. Veritabanından sıkça çekilen ancak nadiren değişen veriler için Redis gibi bir önbellekleme katmanı kullanabilirsiniz. Next.js'in API rotalarında veya veri getirme fonksiyonlarında, önbellek kontrol başlıklarını (Cache-Control) kullanarak HTTP önbelleklemesini etkinleştirebilirsiniz.
Hata Yönetimi ve Loglama
Üretim ortamındaki hataları hızlıca tespit etmek ve düzeltmek için kapsamlı hata yönetimi ve loglama stratejileri uygulanmalıdır. Sentry, DataDog veya kendi özel loglama sisteminizi (örneğin, Pino ile) entegre edebilirsiniz. Next.js API rotalarında try...catch blokları kullanarak hataları yakalayın ve loglayın. Kullanıcılara da anlaşılır hata mesajları gösterin.
Dağıtım (Deployment)
Uygulamanızı canlıya almak için Vercel, AWS Amplify veya Netlify gibi platformları kullanabilirsiniz. Next.js, Vercel tarafından geliştirildiği için Vercel ile en sorunsuz entegrasyonu sunar. Otomatik dağıtım, sunucusuz fonksiyonlar ve CDN entegrasyonu gibi avantajlardan yararlanabilirsiniz. Prisma kullanıyorsanız, veritabanı bağlantılarınızın ortam değişkenleri aracılığıyla güvenli bir şekilde yapılandırıldığından emin olun.
Bu ileri düzey stratejiler, emlak uygulamanızın sadece çalışmasını sağlamakla kalmaz, aynı zamanda yüksek performanslı, güvenli ve ölçeklenebilir bir platform olmasını garantiler. Bu sayede hem geliştiriciler hem de son kullanıcılar için daha iyi bir deneyim sunulmuş olur.
Sonuç: Geleceğe Yönelik Emlak Uygulamaları
Bu kapsamlı makale boyunca, Next.js, Prisma, BetterAuth ve ShadCN/UI teknolojilerini kullanarak modern bir emlak web uygulaması geliştirmenin tüm aşamalarını detaylı bir şekilde inceledik. Görüldüğü üzere, bu dörtlü, birlikte çalışarak geliştiricilere hızlı, güvenli, performanslı ve kullanıcı dostu uygulamalar oluşturma konusunda eşsiz bir güç ve esneklik sunuyor. Next.js'in sunucu tarafı render ve statik site oluşturma yetenekleri sayesinde SEO avantajı ve yıldırım hızında sayfa yüklemeleri sağlarken, Prisma tür güvenli ORM yapısıyla veritabanı yönetimini basitleştiriyor ve hataları minimize ediyor. BetterAuth, kimlik doğrulama ve yetkilendirme süreçlerini güvenli ve zahmetsiz hale getirirken, ShadCN/UI ise özelleştirilebilir ve erişilebilir bileşenleriyle görsel açıdan çarpıcı bir kullanıcı deneyimi sunuyor.
Emlak sektörü gibi dinamik ve rekabetçi bir alanda, teknolojinin sağladığı bu avantajları kullanmak, işletmelerin dijital varlıklarını güçlendirmesi ve müşteri memnuniyetini artırması için kritik öneme sahiptir. Bu teknoloji yığını ile oluşturulan bir uygulama, sadece bugünün değil, geleceğin de ihtiyaçlarına cevap verebilecek kapasitede olacaktır. Ölçeklenebilirlik, bakım kolaylığı ve geliştirici verimliliği sayesinde, uygulamanızı sürekli olarak geliştirebilir, yeni özellikler ekleyebilir ve pazarın değişen taleplerine hızla uyum sağlayabilirsiniz. Artık modern bir emlak uygulaması geliştirmek için ihtiyacınız olan tüm bilgilere ve araçlara sahipsiniz. Bu rehberi bir başlangıç noktası olarak kullanarak kendi özgün ve başarılı projenizi hayata geçirebilirsiniz.
Sıkça Sorulan Sorular (SSS)
1. Next.js mi yoksa sadece React mı tercih edilmeli?
Eğer uygulamanızın SEO performansı, ilk yükleme hızı ve genel kullanıcı deneyimi kritikse, Next.js tercih edilmelidir. Sunucu tarafı render (SSR), statik site oluşturma (SSG) ve API rotaları gibi özellikler, sadece React ile elde edilmesi zor veya ek yapılandırma gerektiren önemli avantajlar sunar. Tek sayfalık, basit bir istemci tarafı uygulama geliştiriyorsanız saf React yeterli olabilir.
2. Prisma hangi veritabanlarını destekler?
Prisma, geniş bir veritabanı desteği sunar. Başlıca desteklenenler arasında PostgreSQL, MySQL, SQLite, SQL Server ve MongoDB (deneysel) bulunmaktadır. Projenizin ihtiyaçlarına ve tercihlerinize göre bu veritabanlarından herhangi birini seçebilirsiniz. Şema tanımı ve migrasyon araçları sayesinde, veritabanı geçişleri de nispeten kolaylaşır.
3. BetterAuth yerine NextAuth.js kullanılabilir mi?
Evet, BetterAuth yerine NextAuth.js (yeni adıyla Auth.js) Next.js uygulamaları için popüler ve güçlü bir kimlik doğrulama kütüphanesidir. Benzer işlevsellikler sunar ve Prisma gibi ORM'lerle sorunsuz bir şekilde entegre edilebilir. Hatta BetterAuth gibi isimler genellikle kendi geliştirilen veya belirli bir amaca yönelik özelleştirilmiş Auth çözümlerini ifade edebilir. Genel olarak, Next.js ekosisteminde Auth.js, geniş topluluk desteği ve kapsamlı dokümantasyonu nedeniyle sıkça tercih edilir.
4. ShadCN/UI performansı nasıl etkiler?
ShadCN/UI, doğrudan projenize kopyalanan ve bu sayede tam kontrol sağlayan bileşenler sunduğu için, genellikle performansa olumsuz bir etkisi olmaz, aksine olumlu yönde katkıda bulunabilir. Bileşenlerinizi sadece ihtiyacınız olan kısımları alarak ve gereksiz bağımlılıklardan kaçınarak optimize edebilirsiniz. Tailwind CSS ile entegrasyonu, gereksiz CSS yükünü azaltarak daha küçük dosya boyutları ve daha hızlı yükleme süreleri sağlar. Radix UI primitives üzerine inşa edilmesi ise erişilebilirlik ve performans optimizasyonlarını temelden sağlar.
5. Bu uygulamayı üretim ortamına dağıtırken nelere dikkat etmeliyim?
Üretim ortamında dikkat etmeniz gerekenler şunlardır: ortam değişkenlerini güvenli bir şekilde yönetin (örneğin veritabanı URL'leri, API anahtarları), güvenlik başlıklarını yapılandırın (CSP, HSTS), HTTPS kullanın, hata izleme ve loglama araçları entegre edin (Sentry, DataDog), veritabanı yedekleme stratejileri uygulayın, önbellekleme mekanizmalarını doğru yapılandırın ve Next.js uygulamanızı Vercel, AWS Amplify gibi platformlarda optimize edilmiş şekilde dağıtın. Ayrıca, performans testleri ve güvenlik denetimleri yapmayı ihmal etmeyin.