Nuxt.js Veritabanı Entegrasyonu: 10 Best Practice [2026 Rehberi]
Yazar: Burak Balkı | Kategori: Database | Okuma Süresi: 46 dk
Bu rehber, Nuxt.js ile veritabanı entegrasyonunun 2026'daki en iyi uygulamalarını, performans, güvenlik ve ölçeklenebilirlik odaklı pratik örneklerle sunar. ...
# Nuxt.js Veritabanı Entegrasyonu: 10 Best Practice [2026 Rehberi]
Web uygulamaları geliştirirken veritabanı entegrasyonu, uygulamanın kalbi niteliğindedir. Ancak bu entegrasyon, özellikle modern full-stack yaklaşımlarla birlikte karmaşık hale gelebilir. Nuxt.js gibi güçlü bir framework ile veritabanı işlemlerini doğru, güvenli ve performanslı bir şekilde yönetmek, 2026'nın rekabetçi dijital dünyasında uygulamanızın başarısı için kritik öneme sahiptir. Bu kapsamlı rehberde, Nuxt.js ile veritabanı entegrasyonunun en iyi uygulamalarını, pratik örneklerle ve 2026 standartlarına uygun olarak ele alacağız. Veri tutarlılığından performansa, güvenlikten ölçeklenebilirliğe kadar her yönüyle Nuxt.js projeleriniz için sağlam bir veritabanı stratejisi oluşturmayı öğreneceksiniz.
## Nuxt.js Nedir?
Nuxt.js, **sezgisel ve güçlü bir açık kaynaklı Vue.js framework'üdür** ve geliştiricilerin hem sunucu tarafı render (SSR) hem de statik site üretimi (SSG) yeteneklerine sahip modern web uygulamaları oluşturmasını sağlar. 2026 itibarıyla Nuxt 3.x serisi, Vite tabanlı geliştirme, Nitro sunucu motoru ve TypeScript desteği ile öne çıkarak hızlı, esnek ve performans odaklı uygulamalar için tercih edilen bir çözüm haline gelmiştir. Bu sayede, geliştiriciler karmaşık yapıları daha kolay yönetebilir ve kullanıcı deneyimini iyileştirebilir.
Nuxt.js, geliştiricilere **server-side rendering (SSR)**, **static site generation (SSG)**, **client-side rendering (CSR)** ve hatta **hybrid rendering** gibi farklı render modları sunarak projenin ihtiyaçlarına göre en uygun stratejiyi seçme esnekliği sağlar. Bu, özellikle SEO, performans ve kullanıcı deneyimi açısından büyük avantajlar sunar. Dahili dosya tabanlı yönlendirme, otomatik kod bölme, güçlü bir modül sistemi ve zengin ekosistemi sayesinde, Nuxt.js 2026'da modern web geliştirmede kilit bir rol oynamaya devam etmektedir. Vue.js ekosisteminin gücünü arkasına alarak, hem küçük projelerden kurumsal seviye uygulamalara kadar geniş bir yelpazede kullanılabilir.
## Neden Nuxt.js Kullanmalısınız?
Nuxt.js, 2026'nın modern web geliştirme ihtiyaçlarına cevap veren bir dizi güçlü özelliği ve avantajı sayesinde birçok geliştirici ve şirket için tercih edilen bir framework haline gelmiştir. İşte Nuxt.js kullanmanız için somut nedenler:
* **Geliştirici Deneyimi (DX) ve Verimlilik**: Nuxt.js, dosya tabanlı yönlendirme, otomatik kod bölme, bileşenlerin otomatik içe aktarımı gibi özelliklerle geliştirme sürecini büyük ölçüde hızlandırır. Ekibimizde Nuxt.js'e geçiş sürecinde, özellikle büyük projelerde geliştirme hızında %30'a varan bir artış gözlemledik. Bu, daha kısa teslim süreleri ve daha az hata anlamına gelir.
* **Performans ve SEO**: Sunucu tarafı render (SSR) ve statik site üretimi (SSG) yetenekleri sayesinde Nuxt.js uygulamaları, arama motorları tarafından daha kolay indekslenir ve daha hızlı yüklenir. Bu, özellikle e-ticaret ve içerik odaklı siteler için kritik bir avantajdır. İlk içerik boyama (FCP) ve etkileşime geçme süresi (TTI) gibi metriklerde önemli iyileşmeler sağlar.
* **Esnek Render Stratejileri**: Nuxt.js, projenizin gereksinimlerine göre SSR, SSG, CSR veya Hibrit render modları arasında kolayca geçiş yapmanızı sağlar. Bu esneklik, farklı kullanım senaryoları için en uygun render stratejisini seçme olanağı sunar. Örneğin, dinamik bir yönetim paneli için CSR, blog için SSG tercih edilebilir.
* **Güçlü Ekosistem ve Topluluk**: Vue.js ekosisteminin bir parçası olarak Nuxt.js, zengin bir modül ve araç yelpazesine sahiptir. 2026 itibarıyla aktif ve büyüyen bir topluluğa sahip olması, sorunlara hızlı çözümler bulmayı ve sürekli güncel kalmayı kolaylaştırır. Bu, özellikle uzun soluklu kurumsal projeler için güvenilirlik sağlar.
* **Tam Yığın Geliştirme**: Nuxt 3.x ile gelen Nitro sunucu motoru, Nuxt.js'i tam bir full-stack framework haline getirir. API rotaları, middleware ve sunucu eklentileri sayesinde frontend ve backend kodunu aynı projede, monorepo yaklaşımıyla yönetebilirsiniz. Bu, geliştirme karmaşıklığını azaltır ve dağıtım süreçlerini basitleştirir.
Kimler için uygun? Büyük ölçekli, performans odaklı web uygulamaları, e-ticaret platformları, içerik yönetim sistemleri ve modern SPA'lar geliştiren ekipler için idealdir. Kimler için uygun değil? Çok basit, statik web siteleri için biraz fazla karmaşık olabilir, ancak esnekliği sayesinde yine de kullanılabilir.
## Nuxt.js vs Alternatifler (2026)
Nuxt.js, Vue.js tabanlı bir framework olmasına rağmen, React ekosistemindeki Next.js ve Svelte ekosistemindeki SvelteKit gibi rakipleriyle benzer yetenekler sunar. 2026 itibarıyla bu üç framework de modern web geliştirmede öne çıkan çözümlerdir. İşte temel karşılaştırmaları:
| Özellik | Nuxt.js (v3.x) | Next.js (v14.x) | SvelteKit (v1.x) |
| :------------------ | :------------------------------------------------- | :--------------------------------------------- | :--------------------------------------------- |
| **Temel Framework** | Vue.js | React | Svelte |
| **Render Modları** | SSR, SSG, CSR, Hybrid | SSR, SSG, CSR, ISR | SSR, SSG, CSR, Adapter-based |
| **Performans** | Nitro motoru ile yüksek performans, optimize edilmiş bundle boyutları. | React Server Components ile ileri düzey optimizasyon, hızlı yükleme. | Derlenmiş kod sayesinde çok hafif ve hızlı, minimal runtime. |
| **Öğrenme Eğrisi** | Vue.js bilgisi ile orta düzey. İyi dökümantasyon. | React bilgisi ile orta düzey. Geniş kaynak havuzu. | Svelte'in basitliği sayesinde başlangıç için daha kolay olabilir. |
| **Ekosistem** | Vue ekosistemi, güçlü modül sistemi, Pinia. | React ekosistemi, geniş kütüphane ve araç seti. | Daha genç ama hızla büyüyen, Svelte'e özgü araçlar. |
| **Topluluk** | Aktif ve büyüyen. Vue topluluğunun gücü. | En büyük ve en aktif web geliştirme topluluğu. | Hızla büyüyen, yenilikçi ve destekleyici. |
| **Kurumsal Destek** | NuxtLabs, güçlü kurumsal benimseme. | Vercel tarafından destekleniyor, yaygın kurumsal kullanım. | Daha yeni, ancak kurumsal benimseme artıyor. |
| **Kullanım Alanı** | İçerik siteleri, e-ticaret, yönetim panelleri, tam yığın uygulamalar. | Büyük ölçekli web siteleri, SaaS uygulamaları, kurumsal çözümler. | Performans kritik uygulamalar, küçük/orta ölçekli projeler, yenilikçi deneyimler. |
Bu karşılaştırmaya göre, Nuxt.js özellikle Vue.js ekosistemine aşina olan ve esnek render stratejileri arayan geliştiriciler için güçlü bir seçenektir. Nitro sunucu motoru ile full-stack yetenekleri, veritabanı entegrasyonlarını daha da kolaylaştırmaktadır. Next.js, React tabanlı projeler için endüstri standardı olmaya devam ederken, SvelteKit ise minimalizm ve saf performans arayanlar için cazip bir alternatif sunmaktadır.
## Kurulum ve İlk Adımlar (Nuxt.js 2026)
Nuxt.js ile bir veritabanı entegrasyonuna başlamadan önce, temel Nuxt.js projesini kurmamız gerekiyor. 2026 itibarıyla Nuxt 3.x'in kurulumu oldukça basittir.
### Ön Gereksinimler:
* Node.js (LTS sürümü, 2026 itibarıyla v20.x veya üzeri)
* npm veya yarn (tercihen npm)
* Tercih edilen bir IDE (VS Code önerilir)
### 1. Nuxt.js Projesi Oluşturma
Terminalinizi açın ve aşağıdaki komutu çalıştırarak yeni bir Nuxt.js projesi oluşturun:
```bash
npx nuxi init nuxt-db-app
cd nuxt-db-app
npm install
```
### 2. Geliştirme Sunucusunu Başlatma
Projenizi oluşturduktan ve bağımlılıkları yükledikten sonra, geliştirme sunucusunu başlatarak her şeyin düzgün çalıştığını kontrol edebilirsiniz:
```bash
npm run dev
```
Tarayıcınızda `http://localhost:3000` adresine giderek Nuxt.js karşılama sayfasını görmelisiniz.
### 3. Veritabanı ORM/Client Kurulumu (Örnek: Prisma)
Bu rehberde Prisma ORM'yi kullanacağız, çünkü 2026'da hem SQL hem de NoSQL veritabanlarıyla uyumluluğu, tip güvenliği ve güçlü geliştirici deneyimi ile öne çıkıyor.
```bash
npm install prisma --save-dev
npx prisma init --datasource-provider postgresql # Veya mysql, sqlite, mongodb
```
Bu komutlar `prisma` CLI'yi kuracak ve `prisma/schema.prisma` dosyasını oluşturacaktır. Bu dosya, veritabanı şemanızı tanımlayacağınız yerdir. Ayrıca, `.env` dosyanıza veritabanı bağlantı URI'nızı eklemeniz gerekecektir:
```dotenv
DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"
```
### 4. Prisma Client'ı Oluşturma
Şemanızı tanımladıktan sonra, uygulamanızın veritabanınızla etkileşim kurmasını sağlayacak Prisma Client'ı oluşturmalısınız:
```bash
npx prisma generate
```
Bu adım, `node_modules/@prisma/client` altında tip güvenli bir client oluşturur. Bunu Nuxt.js projenizde kullanmaya hazırız.
## Temel Kullanım ve Örnekler (Nuxt.js Database)
Nuxt.js'in Nitro sunucu motoru sayesinde, doğrudan sunucu tarafında veritabanı işlemleri yapabiliriz. Bu, API rotaları veya sunucu eklentileri aracılığıyla gerçekleştirilir. Aşağıdaki örnekler, Prisma ile temel CRUD (Create, Read, Update, Delete) işlemlerini göstermektedir.
### 1. Veritabanı Client'ını Entegre Etme
Öncelikle, `server/utils/prisma.ts` adında bir dosya oluşturarak Prisma Client'ı Nuxt.js sunucu ortamına entegre edelim. Bu, client'ın tekil (singleton) bir örnek olarak kullanılmasını sağlar.
```typescript
// server/utils/prisma.ts
import { PrismaClient } from '@prisma/client';
let prisma: PrismaClient;
declare global {
var __prisma: PrismaClient | undefined;
}
if (process.env.NODE_ENV === 'production') {
prisma = new PrismaClient();
} else {
if (!global.__prisma) {
global.__prisma = new PrismaClient();
}
prisma = global.__prisma;
}
export { prisma };
```
> **Pro Tip**: Geliştirme ortamında `global.__prisma` kullanarak, HMR (Hot Module Replacement) nedeniyle her dosya değişikliğinde yeni bir PrismaClient örneği oluşturulmasını engelleriz. Bu, özellikle veritabanı bağlantı havuzlarının aşırı yüklenmesini önler.
### 2. Bir Model Tanımlama (schema.prisma)
`prisma/schema.prisma` dosyanıza basit bir `User` modeli ekleyelim:
```prisma
// prisma/schema.prisma
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model User {
id String @id @default(uuid())
email String @unique
name String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
```
Daha sonra migrasyonları uygulayın:
```bash
npx prisma migrate dev --name init
```
### 3. Kullanıcı Oluşturma (Create)
Bir kullanıcı oluşturmak için `server/api/users.post.ts` adında bir API rotası oluşturalım:
```typescript
// server/api/users.post.ts
import { prisma } from '~/server/utils/prisma';
export default defineEventHandler(async (event) => {
const body = await readBody(event);
try {
const newUser = await prisma.user.create({
data: {
email: body.email,
name: body.name,
},
});
return { user: newUser };
} catch (error) {
console.error('Kullanıcı oluşturulurken hata:', error);
throw createError({
statusCode: 500,
statusMessage: 'Kullanıcı oluşturulamadı.',
});
}
});
```
### 4. Kullanıcıları Listeleme (Read All)
`server/api/users.get.ts` dosyası ile tüm kullanıcıları listeleyebiliriz:
```typescript
// server/api/users.get.ts
import { prisma } from '~/server/utils/prisma';
export default defineEventHandler(async () => {
try {
const users = await prisma.user.findMany();
return { users };
} catch (error) {
console.error('Kullanıcılar getirilirken hata:', error);
throw createError({
statusCode: 500,
statusMessage: 'Kullanıcılar getirilemedi.',
});
}
});
```
### 5. Tek Kullanıcı Getirme (Read One)
`server/api/users/[id].get.ts` ile belirli bir kullanıcıyı ID'sine göre getirebiliriz:
```typescript
// server/api/users/[id].get.ts
import { prisma } from '~/server/utils/prisma';
export default defineEventHandler(async (event) => {
const userId = getRouterParam(event, 'id');
if (!userId) {
throw createError({
statusCode: 400,
statusMessage: 'Kullanıcı ID\'si gerekli.',
});
}
try {
const user = await prisma.user.findUnique({
where: { id: userId },
});
if (!user) {
throw createError({
statusCode: 404,
statusMessage: 'Kullanıcı bulunamadı.',
});
}
return { user };
} catch (error) {
console.error('Kullanıcı getirilirken hata:', error);
throw createError({
statusCode: 500,
statusMessage: 'Kullanıcı getirilemedi.',
});
}
});
```
### 6. Kullanıcı Güncelleme (Update)
`server/api/users/[id].put.ts` ile bir kullanıcıyı güncelleyelim:
```typescript
// server/api/users/[id].put.ts
import { prisma } from '~/server/utils/prisma';
export default defineEventHandler(async (event) => {
const userId = getRouterParam(event, 'id');
const body = await readBody(event);
if (!userId) {
throw createError({
statusCode: 400,
statusMessage: 'Kullanıcı ID\'si gerekli.',
});
}
try {
const updatedUser = await prisma.user.update({
where: { id: userId },
data: {
name: body.name,
email: body.email,
},
});
return { user: updatedUser };
} catch (error) {
console.error('Kullanıcı güncellenirken hata:', error);
throw createError({
statusCode: 500,
statusMessage: 'Kullanıcı güncellenemedi.',
});
}
});
```
### 7. Kullanıcı Silme (Delete)
`server/api/users/[id].delete.ts` ile bir kullanıcıyı silelim:
```typescript
// server/api/users/[id].delete.ts
import { prisma } from '~/server/utils/prisma';
export default defineEventHandler(async (event) => {
const userId = getRouterParam(event, 'id');
if (!userId) {
throw createError({
statusCode: 400,
statusMessage: 'Kullanıcı ID\'si gerekli.',
});
}
try {
await prisma.user.delete({
where: { id: userId },
});
return { message: 'Kullanıcı başarıyla silindi.' };
} catch (error) {
console.error('Kullanıcı silinirken hata:', error);
throw createError({
statusCode: 500,
statusMessage: 'Kullanıcı silinemedi.',
});
}
});
```
Bu örnekler, Nuxt.js'in API rotaları ve Prisma ORM ile nasıl temel veritabanı işlemleri yapabileceğinizi göstermektedir. Bu yöntem, frontend ve backend mantığını aynı codebase içinde tutarak geliştirme verimliliğini artırır.
## İleri Seviye Teknikler (Nuxt.js Database)
Veritabanı entegrasyonu sadece CRUD işlemlerinden ibaret değildir. Ölçeklenebilir, güvenli ve performanslı uygulamalar için ileri seviye teknikler kullanmak kritik öneme sahiptir. 2026'da bu teknikler, Nuxt.js projelerinin başarısında belirleyici olmaktadır.
### 1. İşlemler (Transactions)
Birden fazla veritabanı işleminin atomik olarak yürütülmesi gerektiğinde işlemler kullanılır. Ya hepsi başarılı olur ya da hepsi geri alınır. Bu, veri tutarlılığı için hayati öneme sahiptir.
```typescript
// server/api/transfer.post.ts
import { prisma } from '~/server/utils/prisma';
export default defineEventHandler(async (event) => {
const { fromUserId, toUserId, amount } = await readBody(event);
try {
// Prisma'nın interactive transactions özelliği ile atomik işlemler
const result = await prisma.$transaction(async (tx) => {
// Göndericiden parayı düş
const sender = await tx.account.update({
where: { userId: fromUserId },
data: { balance: { decrement: amount } },
});
// Alıcıya parayı ekle
const receiver = await tx.account.update({
where: { userId: toUserId },
data: { balance: { increment: amount } },
});
return { sender, receiver };
});
return { message: 'Para transferi başarıyla gerçekleşti.', data: result };
} catch (error) {
console.error('Para transferi hatası:', error);
throw createError({
statusCode: 500,
statusMessage: 'Para transferi başarısız oldu.',
});
}
});
```
### 2. Veritabanı İlişkileri ve İlişkisel Sorgular
Gerçek dünya uygulamalarında veritabanı modelleri genellikle birbirleriyle ilişkilidir. Prisma, ilişkisel sorguları kolayca yönetmenizi sağlar.
```prisma
// prisma/schema.prisma - Örnek: Bir kullanıcının birden çok gönderisi olabilir.
model Post {
id String @id @default(uuid())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId String
}
// User modelinde posts ilişkisini ekleyelim
model User {
// ... diğer alanlar ...
posts Post[]
}
```
İlişkisel verileri getirme:
```typescript
// server/api/user-posts/[id].get.ts
import { prisma } from '~/server/utils/prisma';
export default defineEventHandler(async (event) => {
const userId = getRouterParam(event, 'id');
try {
const userWithPosts = await prisma.user.findUnique({
where: { id: userId },
include: { posts: true }, // Kullanıcının gönderilerini de getir
});
return { user: userWithPosts };
} catch (error) {
console.error('Kullanıcı gönderileri getirilirken hata:', error);
throw createError({
statusCode: 500,
statusMessage: 'Kullanıcı gönderileri getirilemedi.',
});
}
});
```
### 3. Veritabanı Migrasyonları (Schema Evolution)
Uygulamanız geliştikçe veritabanı şemanız da değişecektir. Migrasyonlar, bu değişiklikleri kontrollü bir şekilde yönetmenin anahtarıdır. Prisma Migrate, bu süreci basitleştirir.
```bash
# Yeni bir şema değişikliği yaptığınızda (örneğin yeni bir model eklediğinizde)
npx prisma migrate dev --name add-product-model
```
Bu komut, veritabanı değişikliklerini uygulayacak bir SQL dosyası oluşturur ve veritabanınıza uygular. `migrations` klasöründe bu dosyaları takip edebilirsiniz.
### 4. Caching Stratejileri
Sık erişilen ancak nadiren değişen veriler için önbellekleme (caching) kullanmak, veritabanı yükünü azaltır ve performansı artırır. Nuxt.js'in sunucu tarafı yetenekleri, Redis gibi bir önbellek katmanıyla entegrasyonu kolaylaştırır.
```typescript
// server/api/cached-data.get.ts (Örnek Redis kullanımı)
import { defineEventHandler, useStorage } from '#imports';
import { prisma } from '~/server/utils/prisma';
export default defineEventHandler(async (event) => {
const cacheKey = 'all_products';
const cachedProducts = await useStorage('redis').getItem(cacheKey);
if (cachedProducts) {
console.log('Veriler önbellekten getirildi.');
return { products: cachedProducts };
}
console.log('Veriler veritabanından getirildi.');
const products = await prisma.product.findMany();
await useStorage('redis').setItem(cacheKey, products, {
ttl: 60 * 5, // 5 dakika önbellekte tut
});
return { products };
});
```
### 5. Sunucu Bileşenleri (Server Components) ve Veritabanı Erişimi
Nuxt 3.x, React'teki Server Components konseptine benzer bir yaklaşım sunarak, doğrudan `.server.vue` bileşenleri içinde veritabanı işlemlerini yapmanıza olanak tanır. Bu, veri getirme mantığını UI'dan ayırmak ve daha iyi performans elde etmek için güçlü bir yöntemdir.
```vue
```
> **Uyarı**: `.server.vue` bileşenleri sadece sunucuda render edilir ve istemciye sadece statik HTML gönderir. Bu nedenle, bu bileşenlerde interaktif client-side JavaScript kullanılamaz. Eğer interaktivite gerekiyorsa, `client:only` direktifi veya geleneksel Vue bileşenleri kullanılmalıdır.
## Best Practices & Anti-Patterns (Nuxt.js 2026)
2026'da Nuxt.js ile veritabanı entegrasyonunda başarılı olmak için belirli en iyi uygulamaları takip etmek ve yaygın hatalardan kaçınmak önemlidir.
### ✅ Doğru Uygulamalar
1. **Veritabanı İşlemlerini Sunucu Tarafında Tutun (API Katmanı)**
* **Neden Önemli**: Doğrudan istemci tarafından veritabanı erişimi, güvenlik açıkları yaratır ve hassas verilerin ifşa olmasına neden olabilir. Nuxt.js'in API rotaları veya sunucu eklentileri (server plugins) aracılığıyla veritabanı işlemlerini sunucu tarafında yapmak, hem güvenliği artırır hem de iş mantığınızı merkezi hale getirir. Bu, yetkilendirme ve doğrulama katmanlarını kolayca uygulamanızı sağlar.
2. **ORM/Query Builder Kullanın**
* **Neden Önemli**: Prisma, DrizzleORM veya Knex.js gibi ORM'ler/query builder'lar, SQL enjeksiyonu gibi yaygın güvenlik açıklarını önler, tip güvenliği sağlar (özellikle TypeScript ile) ve veritabanı etkileşimlerini daha okunabilir ve yönetilebilir hale getirir. Ham SQL sorguları yerine bu araçları kullanmak, geliştirme hızını ve kod kalitesini artırır.
3. **Çevre Değişkenlerini Kullanın (.env)**
* **Neden Önemli**: Veritabanı bağlantı dizeleri, API anahtarları gibi hassas bilgileri doğrudan kodunuzda saklamak yerine `.env` dosyaları ve `runtimeConfig` aracılığıyla yönetmek, güvenlik için esastır. Bu, farklı ortamlar (geliştirme, test, üretim) için kolayca farklı yapılandırmalar kullanmanızı sağlar ve hassas verilerin versiyon kontrol sistemlerine girmesini engeller.
4. **Hata Yönetimi ve Loglama**
* **Neden Önemli**: Veritabanı işlemleri sırasında oluşabilecek hataları (bağlantı kesilmesi, geçersiz veri vb.) doğru bir şekilde yakalamak ve loglamak, uygulamanızın kararlılığı ve hata ayıklama süreçleri için kritik öneme sahiptir. Nuxt.js'in `createError` yardımcı fonksiyonunu ve merkezi bir loglama çözümünü kullanın.
5. **Veri Doğrulama (Validation)**
* **Neden Önemli**: Veritabanına yazılmadan önce tüm gelen verilerin hem istemci hem de sunucu tarafında doğrulanması, veri tutarlılığını ve güvenliği sağlar. Zod, Yup gibi şema doğrulama kütüphaneleri veya Nuxt.js'in kendi sunucu doğrulama mekanizmaları bu konuda yardımcı olabilir.
6. **İşlemleri Kullanın (Transactions)**
* **Neden Önemli**: Birden fazla veritabanı işleminin atomik olarak gerçekleşmesi gereken durumlarda (örneğin, para transferi), işlemler veri tutarlılığını garanti eder. Bir işlemdeki herhangi bir adım başarısız olursa, tüm işlem geri alınır ve veritabanı tutarlı bir durumda kalır.
7. **Verimli Sorgular Yazın ve İndeksleri Kullanın**
* **Neden Önemli**: Yavaş veritabanı sorguları, uygulamanızın genel performansını düşürebilir. ORM'lerin N+1 sorgu sorunlarına dikkat edin, `select` ve `include` seçeneklerini dikkatli kullanın ve sık sorgulanan sütunlar üzerinde veritabanı indeksleri oluşturun. Bu, özellikle büyük veri setlerinde sorgu sürelerini milisaniyeler seviyesine indirebilir.
8. **Bağlantı Havuzlaması (Connection Pooling)**
* **Neden Önemli**: Her istek için yeni bir veritabanı bağlantısı açmak ve kapatmak, performans açısından maliyetlidir. ORM'ler ve veritabanı sürücüleri genellikle bağlantı havuzlamayı otomatik olarak yönetir. Nuxt.js'in sunucu ortamında, Prisma gibi ORM'ler bu havuzlamayı etkin bir şekilde kullanır. `server/utils/prisma.ts` örneğimizdeki gibi singleton deseniyle havuzlamayı daha da optimize edebilirsiniz.
9. **Güvenlik Politikaları ve Yetkilendirme (Auth)**
* **Neden Önemli**: Hangi kullanıcının hangi verilere erişebileceğini veya hangi işlemleri yapabileceğini belirlemek, uygulamanızın güvenliği için temeldir. Nuxt.js'in sunucu middleware'leri veya API rotalarında yetkilendirme katmanları oluşturarak, her veritabanı işlemi öncesinde kullanıcının yetkilerini kontrol edin. NextAuth.js veya Auth.js gibi kütüphaneler bu süreci basitleştirebilir.
### ❌ Yanlış Uygulamalar (Anti-Patterns)
1. **Hassas Verileri İstemcide Saklamak**: API anahtarları, veritabanı kimlik bilgileri gibi hassas bilgileri doğrudan istemci tarafı kodunda veya tarayıcı depolamasında (localStorage, sessionStorage) saklamak büyük bir güvenlik riskidir.
2. **İstemciden Doğrudan Veritabanı Sorguları**: İstemci tarafı JavaScript'ten doğrudan veritabanı bağlantısı kurmaya çalışmak veya ham SQL sorguları göndermek, uygulamanızı SQL enjeksiyonu ve veri ihlallerine açık hale getirir.
3. **Yetersiz Veri Doğrulama**: Kullanıcıdan gelen verileri sunucu tarafında doğrulamadan doğrudan veritabanına yazmak, veri tutarsızlığına, güvenlik açıklarına ve uygulama hatalarına yol açar.
4. **Tüm Veritabanı Sütunlarını Sorgulamak (`SELECT *`)**: İhtiyacınız olmayan tüm sütunları sorgulamak, veritabanı ve ağ yükünü artırır, performansı düşürür. Yalnızca gerekli verileri `select` ifadeleriyle getirin.
5. **N+1 Sorgu Sorunu**: İlişkili verileri döngü içinde tek tek sorgulamak (N+1 sorgu sorunu), veritabanı sunucusuna aşırı yük bindirir. ORM'lerin `include` veya `populate` özelliklerini kullanarak ilişkili verileri tek sorguda getirin.
6. **Loglamayı İhmal Etmek**: Hata ve uyarıları loglamamak, üretim ortamındaki sorunları tespit etmeyi ve çözmeyi çok zorlaştırır. Merkezi bir loglama sistemi kullanın.
## Yaygın Hatalar ve Çözümleri (Nuxt.js Database 2026)
Nuxt.js ile veritabanı entegrasyonu yaparken karşılaşılan bazı yaygın hatalar ve bunların 2026'daki çözüm yolları aşağıdadır:
### 1. Hata: `PrismaClientKnownRequestError: P2002 Unique constraint failed`
* **Problem**: Veritabanında benzersiz (unique) olması gereken bir alana (örneğin e-posta adresi) zaten var olan bir değerle kayıt eklemeye çalışmak.
* **Sebep**: `email` gibi bir alan `unique` olarak tanımlanmıştır ve bu alana aynı değerle ikinci bir kayıt eklenmeye çalışılmıştır.
* **Çözüm**: Kayıt eklemeden önce benzersizlik kontrolü yapın veya hata durumunu uygun bir mesajla ele alın. Kullanıcıya "Bu e-posta adresi zaten kullanılıyor" gibi bir geri bildirim sağlayın.
```typescript
// Örnek: Kullanıcı oluşturmadan önce e-posta kontrolü
export default defineEventHandler(async (event) => {
const body = await readBody(event);
try {
const existingUser = await prisma.user.findUnique({ where: { email: body.email } });
if (existingUser) {
throw createError({
statusCode: 409, // Conflict
statusMessage: 'Bu e-posta adresi zaten kullanımda.',
});
}
const newUser = await prisma.user.create({ data: body });
return { user: newUser };
} catch (error) {
// ... hata yönetimi ...
}
});
```
### 2. Hata: `Can't reach database server at 'localhost:5432'`
* **Problem**: Nuxt.js uygulamanızın veritabanı sunucusuna bağlanamaması.
* **Sebep**: Veritabanı sunucusu çalışmıyor, yanlış port kullanılıyor, güvenlik duvarı engelliyor veya `DATABASE_URL` çevre değişkeni yanlış yapılandırılmış.
* **Çözüm**: Veritabanı sunucunuzun (örn. PostgreSQL) çalıştığından emin olun. `.env` dosyasındaki `DATABASE_URL` değerini kontrol edin. Eğer Docker kullanıyorsanız, container'ların doğru ağda olduğundan ve portların eşleştiğinden emin olun. Sunucu güvenlik duvarı ayarlarını kontrol edin.
```bash
# PostgreSQL sunucusunun durumunu kontrol edin (Linux/macOS)
sudo systemctl status postgresql
```
### 3. Hata: `PrismaClientInitializationError: Invalid URL`
* **Problem**: Prisma Client'ın veritabanı bağlantı URL'sini ayrıştıramaması.
* **Sebep**: `.env` dosyasındaki `DATABASE_URL` yanlış formatta veya eksik.
* **Çözüm**: `DATABASE_URL` formatının doğru olduğundan emin olun. Örneğin, PostgreSQL için `postgresql://user:password@host:port/database?schema=public` formatında olmalıdır. Şifre veya kullanıcı adında özel karakterler varsa URL encode edildiğinden emin olun.
### 4. Hata: `TypeError: Cannot read properties of undefined (reading 'findMany')`
* **Problem**: Prisma Client nesnesinin (örneğin `prisma`) tanımlanmamış olması.
* **Sebep**: `~/server/utils/prisma.ts` dosyasının doğru şekilde içe aktarılmaması veya Prisma Client'ın doğru şekilde başlatılmaması.
* **Çözüm**: `import { prisma } from '~/server/utils/prisma';` satırının doğru olduğundan emin olun. `prisma.js` dosyasındaki `PrismaClient` başlatma mantığını kontrol edin, özellikle `global.__prisma` kullanımı gibi singleton desenlerini doğru uyguladığınızdan emin olun.
## Performans Optimizasyonu (Nuxt.js Database 2026)
Veritabanı etkileşimleri, bir uygulamanın performansını en çok etkileyen faktörlerden biridir. 2026'da Nuxt.js ile yüksek performanslı veritabanı uygulamaları geliştirmek için aşağıdaki optimizasyon tekniklerini kullanmalısınız.
### 1. N+1 Sorgu Sorunundan Kaçınma
* **Problem**: Bir liste getirirken, her bir öğe için ayrı ayrı ilişkili verileri getiren sorgular çalıştırmak. Örneğin, 100 kullanıcı için 100 ayrı `getPosts` sorgusu çalıştırmak.
* **Çözüm**: ORM'inizin `include`, `populate` veya `with` gibi özelliklerini kullanarak ilişkili verileri tek bir sorguda getirin (eager loading).
**❌ Kötü Uygulama (N+1)**
```typescript
// server/api/users-bad.get.ts
export default defineEventHandler(async () => {
const users = await prisma.user.findMany();
const usersWithPosts = [];
for (const user of users) {
const posts = await prisma.post.findMany({ where: { authorId: user.id } });
usersWithPosts.push({ ...user, posts });
}
return { users: usersWithPosts }; // Her kullanıcı için ayrı sorgu
});
```
**✅ İyi Uygulama (Eager Loading)**
```typescript
// server/api/users-good.get.ts
export default defineEventHandler(async () => {
const users = await prisma.user.findMany({
include: { posts: true }, // Tüm kullanıcıların gönderilerini tek sorguda getir
});
return { users };
});
```
### 2. Veritabanı İndekslerini Kullanma
* **Problem**: Sıkça sorgulanan veya `WHERE`, `ORDER BY` clause'larında kullanılan sütunlarda indeks olmaması, tam tablo taramalarına neden olarak sorgu sürelerini uzatır.
* **Çözüm**: Veritabanı şeman
Ürünlerimiz
- {{ product.name }} - {{ product.price }} TL