{"id":30781,"date":"2025-10-02T02:32:14","date_gmt":"2025-10-01T23:32:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/luks-restoran-rezervasyon-sistemi-next-js-prisma-ile-nasil-yapilir\/"},"modified":"2025-10-02T02:32:14","modified_gmt":"2025-10-01T23:32:14","slug":"luks-restoran-rezervasyon-sistemi-next-js-prisma-ile-nasil-yapilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/luks-restoran-rezervasyon-sistemi-next-js-prisma-ile-nasil-yapilir\/","title":{"rendered":"L\u00fcks Restoran Rezervasyon Sistemi: Next.js & Prisma ile Nas\u0131l Yap\u0131l\u0131r?"},"content":{"rendered":"

<\/p>\n

L\u00fcks restoranlarda rezervasyon yapmak, bazen yorucu bir s\u00fcre\u00e7 haline gelebilir. Peki, modern web teknolojilerini kullanarak, bu deneyimi hem restoranlar hem de m\u00fc\u015fteriler i\u00e7in p\u00fcr\u00fczs\u00fcz ve keyifli bir hale getirebilir miyiz? Bu makalede, Next.js ve Prisma ikilisinin g\u00fcc\u00fcn\u00fc birle\u015ftirerek nas\u0131l \u00fcst d\u00fczey bir restoran rezervasyon sistemi geli\u015ftirebilece\u011fimizi ad\u0131m ad\u0131m inceleyece\u011fiz. Bu rehber, sadece teknik detaylar\u0131 de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimi ve \u00f6l\u00e7eklenebilirlik gibi kritik fakt\u00f6rleri de kapsayarak, projeyi s\u0131f\u0131rdan hayata ge\u00e7irmenize yard\u0131mc\u0131 olacak.<\/p>\n

G\u00fcn\u00fcm\u00fcz\u00fcn dijital \u00e7a\u011f\u0131nda, kullan\u0131c\u0131lar\u0131n beklentileri her zamankinden daha y\u00fcksek. \u00d6zellikle l\u00fcks segmentte hizmet veren restoranlar i\u00e7in, rezervasyon s\u00fcrecinin karma\u015f\u0131kl\u0131\u011f\u0131, m\u00fc\u015fteri memnuniyetini do\u011frudan etkileyen kritik bir fakt\u00f6r. Telefon trafi\u011fi, manuel ajandalar, \u00e7ak\u0131\u015fan rezervasyonlar ve son dakika iptallerinin yaratt\u0131\u011f\u0131 operasyonel y\u00fck, \u00e7o\u011fu zaman restoranlar\u0131n k\u00e2rl\u0131l\u0131\u011f\u0131n\u0131 ve itibar\u0131n\u0131 olumsuz etkileyebilir. M\u00fc\u015fteriler ise, \u00f6zel bir ak\u015fam yeme\u011fi planlarken, h\u0131zl\u0131, kolay ve hatas\u0131z bir rezervasyon deneyimi aray\u0131\u015f\u0131ndad\u0131rlar. Peki, bu sorunu modern bir yakla\u015f\u0131mla, \u00f6l\u00e7eklenebilir ve g\u00fcvenilir bir teknoloji altyap\u0131s\u0131yla \u00e7\u00f6zebilir miyiz?<\/p>\n

Kesinlikle evet! \u0130\u015fte tam bu noktada, Next.js ve Prisma gibi g\u00fc\u00e7l\u00fc ara\u00e7lar devreye giriyor. Next.js, React tabanl\u0131, server-side rendering (SSR) ve static site generation (SSG) yetenekleriyle \u00f6ne \u00e7\u0131kan bir framework olarak, hem h\u0131zl\u0131 ve SEO dostu frontendler olu\u015fturmam\u0131za olanak tan\u0131r hem de API rotalar\u0131 sayesinde g\u00fc\u00e7l\u00fc bir backend altyap\u0131s\u0131 sunar. Bu sayede, dinamik i\u00e7erik sunumu ve h\u0131zl\u0131 sayfa y\u00fckleme s\u00fcreleri sayesinde kullan\u0131c\u0131 deneyimini zirveye ta\u015f\u0131yabiliriz. \u00d6te yandan Prisma, veritaban\u0131 etkile\u015fimini basitle\u015ftiren, tip g\u00fcvenli\u011fine sahip ve geli\u015ftirici dostu bir ORM (Object-Relational Mapper) arac\u0131d\u0131r. Karma\u015f\u0131k SQL sorgular\u0131 yazmak yerine, TypeScript\u2019in g\u00fcc\u00fcn\u00fc kullanarak veritaban\u0131 i\u015flemlerini \u00e7ok daha okunabilir ve y\u00f6netilebilir hale getirebiliriz. Bu ikili, l\u00fcks bir restoran\u0131n t\u00fcm rezervasyon ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131layacak, y\u00fcksek performansl\u0131 ve g\u00fcvenli bir sistemin temelini atmak i\u00e7in ideal bir kombinasyondur. \u00d6rne\u011fin, yo\u011fun saatlerde binlerce e\u015f zamanl\u0131 rezervasyon talebini sorunsuz bir \u015fekilde y\u00f6netmek veya anl\u0131k masa m\u00fcsaitli\u011fi g\u00fcncellemeleri sunmak, Next.js ve Prisma ile olduk\u00e7a ger\u00e7ek\u00e7i hale gelir. Bu yakla\u015f\u0131m, sadece operasyonel verimlili\u011fi art\u0131rmakla kalmayacak, ayn\u0131 zamanda m\u00fc\u015fterilere sunulan hizmet kalitesini de g\u00f6zle g\u00f6r\u00fcl\u00fcr \u015fekilde y\u00fckseltecektir. Dolay\u0131s\u0131yla, l\u00fcks bir restoran\u0131n marka de\u011ferine yak\u0131\u015f\u0131r, teknolojik olarak geli\u015fmi\u015f bir rezervasyon sistemi in\u015fa etmek, art\u0131k hayal de\u011fil, ula\u015f\u0131labilir bir hedeftir.<\/p>\n

\ud83d\udee0\ufe0f Temel Ta\u015flar: Next.js ve Prisma Neden \u0130deal Bir \u0130kili?<\/h2>\n

Bir l\u00fcks restoran rezervasyon sistemi gibi karma\u015f\u0131k bir uygulamay\u0131 geli\u015ftirirken do\u011fru teknolojileri se\u00e7mek, projenin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu ba\u011flamda, Next.js ve Prisma, modern web geli\u015ftirmenin sundu\u011fu en g\u00fc\u00e7l\u00fc ara\u00e7lardan ikisidir ve birlikte benzersiz avantajlar sunarlar. Bu iki teknolojinin neden ideal bir ikili oldu\u011funu daha yak\u0131ndan inceleyelim.<\/p>\n

Next.js: Frontend’in ve Hafif Backend’in G\u00fcc\u00fc<\/h3>\n

Next.js, bir React framework’\u00fc olmas\u0131n\u0131n \u00f6tesinde, tam te\u015fekk\u00fcll\u00fc bir web geli\u015ftirme platformu olarak kabul edilir. Sundu\u011fu \u00f6zellikler sayesinde, sadece estetik ve reaktif kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmakla kalmaz, ayn\u0131 zamanda sunucu taraf\u0131nda i\u015flenen (Server-Side Rendered – SSR) sayfalar ve statik olarak olu\u015fturulan (Static Site Generated – SSG) i\u00e7erikler arac\u0131l\u0131\u011f\u0131yla performans ve SEO a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck avantajlar sa\u011flar. L\u00fcks bir restoran\u0131n web sitesi i\u00e7in h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve arama motorlar\u0131nda \u00fcst s\u0131ralarda yer almak, m\u00fc\u015fteri \u00e7ekmek a\u00e7\u0131s\u0131ndan hayati \u00f6neme sahiptir. Next.js’in sundu\u011fu otomatik kod b\u00f6lme (automatic code splitting) ve g\u00f6r\u00fcnt\u00fc optimizasyonu gibi \u00f6zellikler, bu hedeflere ula\u015fmay\u0131 kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca, Next.js’in yerle\u015fik API Routes \u00f6zelli\u011fi, ayr\u0131 bir backend projesi kurma ihtiyac\u0131n\u0131 ortadan kald\u0131rarak, uygulamam\u0131z\u0131n hem frontend hem de backend k\u0131s\u0131mlar\u0131n\u0131 tek bir codebase i\u00e7inde geli\u015ftirmemizi sa\u011flar. Bu, geli\u015ftirme s\u00fcrecini basitle\u015ftirir, deploy (da\u011f\u0131t\u0131m) s\u00fcre\u00e7lerini h\u0131zland\u0131r\u0131r ve genel proje y\u00f6netimini kolayla\u015ft\u0131r\u0131r. \u00d6zellikle rezervasyon taleplerini i\u015flemek, kullan\u0131c\u0131 do\u011frulamas\u0131n\u0131 sa\u011flamak ve restoran bilgilerini sunmak gibi g\u00f6revler i\u00e7in bu API Routes, olduk\u00e7a verimli bir \u00e7\u00f6z\u00fcm sunar. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n belirli bir tarih ve saat aral\u0131\u011f\u0131ndaki m\u00fcsait masalar\u0131 sorgulad\u0131\u011f\u0131 bir senaryoda, Next.js API route’u h\u0131zla veritaban\u0131ndan veri \u00e7ekip an\u0131nda geri d\u00f6nebilir, b\u00f6ylece kullan\u0131c\u0131ya kesintisiz bir deneyim sunulur.<\/p>\n

Prisma: Veritaban\u0131 Y\u00f6netimini Basitle\u015ftiren K\u00f6pr\u00fc<\/h3>\n

Prisma, modern bir veritaban\u0131 ara\u00e7 seti olup, ORM yetenekleriyle \u00f6n plana \u00e7\u0131kar. Geleneksel ORM’lerden farkl\u0131 olarak, veritaban\u0131 etkile\u015fimlerini TypeScript ile u\u00e7tan uca tip g\u00fcvenli\u011fi sa\u011flayarak geli\u015ftirir. Bu, geli\u015ftirme s\u0131ras\u0131nda potansiyel hatalar\u0131 yakalamay\u0131 kolayla\u015ft\u0131r\u0131r ve kodun daha okunabilir, s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flar. Rezervasyon sistemi gibi veri yo\u011fun bir uygulamada, verilerin do\u011fru bir \u015fekilde saklanmas\u0131, al\u0131nmas\u0131 ve g\u00fcncellenmesi b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Prisma’n\u0131n Schema-first yakla\u015f\u0131m\u0131, veritaban\u0131 \u015femam\u0131z\u0131 (\u00f6rne\u011fin, Restaurant<\/code>, Reservation<\/code>, User<\/code> modelleri) tek bir schema.prisma<\/code> dosyas\u0131nda tan\u0131mlamam\u0131za olanak tan\u0131r. Bu \u015fema \u00fczerinden otomatik olarak bir Prisma Client olu\u015fturulur ve bu client, uygulamam\u0131z\u0131n veritaban\u0131yla g\u00fcvenli ve tip kontroll\u00fc bir \u015fekilde ileti\u015fim kurmas\u0131n\u0131 sa\u011flar. Destekledi\u011fi veritabanlar\u0131 aras\u0131nda PostgreSQL, MySQL, SQLite, SQL Server ve MongoDB (Preview) gibi pop\u00fcler se\u00e7enekler bulunur, bu da projenizin ihtiya\u00e7lar\u0131na g\u00f6re esneklik sa\u011flar. Prisma’n\u0131n migration (g\u00f6\u00e7) ara\u00e7lar\u0131 sayesinde, veritaban\u0131 \u015femas\u0131nda yap\u0131lan de\u011fi\u015fiklikleri g\u00fcvenli bir \u015fekilde y\u00f6netebilir ve da\u011f\u0131tabiliriz. \u00d6rne\u011fin, yeni bir \u00f6zellik eklendi\u011finde ve bu, veritaban\u0131 yap\u0131s\u0131nda bir de\u011fi\u015fiklik gerektirdi\u011finde, Prisma migration’lar\u0131 bu de\u011fi\u015fikliklerin izlenmesini ve uygulanmas\u0131n\u0131 sorunsuz hale getirir. Bu, \u00f6zellikle \u00fcretim ortam\u0131nda canl\u0131 bir sistemi g\u00fcncellerken b\u00fcy\u00fck bir g\u00fcvence sa\u011flar. Next.js API Routes i\u00e7inde Prisma Client’\u0131 kullanmak, hem frontend hem de backend logic’ini TypeScript’in sa\u011flad\u0131\u011f\u0131 avantajlarla birle\u015ftirerek, geli\u015ftirme h\u0131z\u0131n\u0131 ve kod kalitesini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu kombinasyon, \u00f6zellikle l\u00fcks bir restoran gibi hata tolerans\u0131n\u0131n d\u00fc\u015f\u00fck oldu\u011fu ortamlarda, sa\u011flam ve g\u00fcvenilir bir altyap\u0131 olu\u015fturman\u0131n anahtar\u0131d\u0131r.<\/p>\n

\n Uzman \u0130pucu: Next.js API Routes ve Prisma’y\u0131 birlikte kullan\u0131rken, her API \u00e7a\u011fr\u0131s\u0131 i\u00e7in yeni bir Prisma Client \u00f6rne\u011fi olu\u015fturmaktan ka\u00e7\u0131n\u0131n. Bunun yerine, bir Singleton deseni kullanarak global bir Prisma Client instance’\u0131 olu\u015fturup bunu yeniden kullanmak, veritaban\u0131 ba\u011flant\u0131 havuzu y\u00f6netimini optimize ederek performans\u0131 %40’a kadar art\u0131rabilir.\n <\/div>\n

\u2699\ufe0f Proje Kurulumu ve \u0130lk Ad\u0131mlar: S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7 Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n

Art\u0131k Next.js ve Prisma’n\u0131n neden g\u00fc\u00e7l\u00fc bir ikili oldu\u011funu anlad\u0131\u011f\u0131m\u0131za g\u00f6re, bu teknolojileri kullanarak projemizi nas\u0131l s\u0131f\u0131rdan kuraca\u011f\u0131m\u0131za ge\u00e7ebiliriz. Bu b\u00f6l\u00fcm, temel proje yap\u0131s\u0131n\u0131 olu\u015fturmaktan veritaban\u0131 \u015femam\u0131z\u0131 tan\u0131mlamaya kadar ad\u0131m ad\u0131m bir rehber sunacak.<\/p>\n

Next.js Projesini Ba\u015flatma<\/h3>\n

\u0130lk ad\u0131m, Next.js projemizi olu\u015fturmak. Terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n. Bu komut, size TypeScript, ESLint ve Tailwind CSS gibi pop\u00fcler ara\u00e7lar\u0131 projenize dahil etme se\u00e7ene\u011fi sunacakt\u0131r; hepsi i\u00e7in “Yes” se\u00e7ene\u011fini tercih etmeniz modern ve sa\u011flam bir geli\u015ftirme deneyimi i\u00e7in \u00f6nerilir.<\/p>\n

\nnpx create-next-app@latest rezervasyon-sistemi --typescript --eslint --tailwind\n    <\/pre>\n
<\/code><\/p>\n
Proje olu\u015fturulduktan sonra, dizine girin:<\/p>\n
\ncd rezervasyon-sistemi\n    <\/pre>\n
<\/code><\/p>\n
Ve geli\u015ftirme sunucusunu ba\u015flat\u0131n:<\/p>\n
\nnpm run dev\n    <\/pre>\n
<\/code><\/p>\n
Art\u0131k taray\u0131c\u0131n\u0131zda http:\/\/localhost:3000<\/code> adresine giderek Next.js ba\u015flang\u0131\u00e7 sayfas\u0131n\u0131 g\u00f6rebilirsiniz. Bu, frontend taraf\u0131n\u0131z\u0131n haz\u0131r oldu\u011fu anlam\u0131na gelir.<\/p>\n
Prisma Kurulumu ve Veritaban\u0131 Ba\u011flant\u0131s\u0131<\/h3>\n
\u015eimdi s\u0131ra Prisma'y\u0131 projemize entegre etmeye geldi. Prisma'n\u0131n kurulumu ve veritaban\u0131 ile ba\u011flant\u0131 kurmas\u0131 olduk\u00e7a basittir.<\/p>\n
    \n
  1. Prisma CLI ve Client K\u00fct\u00fcphanelerini Kurun:<\/strong><\/li>\n
    \nnpm install prisma @prisma\/client\n        <\/pre>\n
    <\/code><\/p>\n
  2. Prisma'y\u0131 Ba\u015flat\u0131n:<\/strong> Bu komut, projenize bir prisma<\/code> dizini ve i\u00e7inde schema.prisma<\/code> dosyas\u0131 olu\u015fturacakt\u0131r. Ayr\u0131ca, veritaban\u0131 ba\u011flant\u0131 dizenizi i\u00e7eren bir .env<\/code> dosyas\u0131 da olu\u015fturulacakt\u0131r.<\/li>\n
    \nnpx prisma init\n        <\/pre>\n
    <\/code><\/p>\n
  3. Veritaban\u0131 Ba\u011flant\u0131s\u0131n\u0131 Yap\u0131land\u0131r\u0131n:<\/strong> .env<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve DATABASE_URL<\/code> de\u011fi\u015fkenini kullanaca\u011f\u0131n\u0131z veritaban\u0131n\u0131n ba\u011flant\u0131 dizeniyle g\u00fcncelleyin. L\u00fcks restoran sistemleri i\u00e7in genellikle g\u00fcvenilirli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi nedeniyle PostgreSQL tercih edilir.<\/li>\n
    \nDATABASE_URL=\"postgresql:\/\/kullanici:sifre@localhost:5432\/restoran_rezervasyon?schema=public\"\n        <\/pre>\n
    <\/code><\/p>\n
    Yukar\u0131daki \u00f6rnek bir PostgreSQL ba\u011flant\u0131 dizesidir. Kendi veritaban\u0131 bilgilerinize g\u00f6re (kullan\u0131c\u0131 ad\u0131, \u015fifre, host, port, veritaban\u0131 ad\u0131) g\u00fcncellemeyi unutmay\u0131n. E\u011fer hen\u00fcz bir PostgreSQL veritaban\u0131n\u0131z yoksa, Docker ile h\u0131zl\u0131ca bir tane kurabilirsiniz:<\/p>\n
    \ndocker run --name some-postgres -e POSTGRES_PASSWORD=mysecretpassword -p 5432:5432 -d postgres\n        <\/pre>\n
    <\/code>\n    <\/ol>\n
    Veritaban\u0131 \u015eemas\u0131n\u0131 Tan\u0131mlama (schema.prisma)<\/h3>\n
    Prisma'n\u0131n kalbi, prisma\/schema.prisma<\/code> dosyas\u0131nda tan\u0131mlanan veri modelleridir. Bu modeller, veritaban\u0131m\u0131zdaki tablolar\u0131 ve aralar\u0131ndaki ili\u015fkileri temsil eder. Rezervasyon sistemimiz i\u00e7in temel modelleri olu\u015ftural\u0131m: User<\/code> (Kullan\u0131c\u0131), Restaurant<\/code> (Restoran) ve Reservation<\/code> (Rezervasyon).<\/p>\n
    \n\/\/ prisma\/schema.prisma\n\ngenerator client {\n  provider = \"prisma-client-js\"\n}\n\ndatasource db {\n  provider = \"postgresql\"\n  url      = env(\"DATABASE_URL\")\n}\n\nmodel User {\n  id        String      @id @default(uuid())\n  email     String      @unique\n  name      String?\n  password  String \/\/ \u015eifreler hash'lenmelidir!\n  reservations Reservation[]\n  createdAt DateTime    @default(now())\n  updatedAt DateTime    @updatedAt\n}\n\nmodel Restaurant {\n  id        String      @id @default(uuid())\n  name      String\n  address   String\n  phone     String\n  description String?\n  imageUrl  String?\n  openingTime String \/\/ \u00d6rn: \"09:00\"\n  closingTime String \/\/ \u00d6rn: \"23:00\"\n  capacity  Int \/\/ Toplam masa say\u0131s\u0131 veya kapasite\n  tables    Int \/\/ Mevcut masa say\u0131s\u0131\n  reservations Reservation[]\n  createdAt DateTime    @default(now())\n  updatedAt DateTime    @updatedAt\n}\n\nmodel Reservation {\n  id         String      @id @default(uuid())\n  userId     String\n  user       User        @relation(fields: [userId], references: [id])\n  restaurantId String\n  restaurant Restaurant  @relation(fields: [restaurantId], references: [id])\n  date       DateTime\n  time       String \/\/ \u00d6rn: \"19:30\"\n  partySize  Int \/\/ Ki\u015fi say\u0131s\u0131\n  status     String      @default(\"PENDING\") \/\/ PENDING, CONFIRMED, CANCELLED\n  notes      String?\n  createdAt  DateTime    @default(now())\n  updatedAt  DateTime    @updatedAt\n\n  @@unique([restaurantId, date, time]) \/\/ Ayn\u0131 restoranda, ayn\u0131 saatte iki rezervasyon olamaz (basit kontrol)\n}\n    <\/pre>\n
    <\/code><\/p>\n
    Yukar\u0131daki \u015femada;<\/p>\n
      \n
    • User<\/code>: Rezervasyon yapan kullan\u0131c\u0131lar\u0131 temsil eder. \u015eifrenin g\u00fcvenli bir \u015fekilde hashlenmesi gerekti\u011fini unutmay\u0131n.<\/li>\n
    • Restaurant<\/code>: Rezervasyon yap\u0131labilecek restoranlar\u0131 i\u00e7erir. Kapasite, a\u00e7\u0131l\u0131\u015f\/kapan\u0131\u015f saatleri gibi bilgiler \u00f6nemlidir.<\/li>\n
    • Reservation<\/code>: Bir kullan\u0131c\u0131n\u0131n belirli bir restoran i\u00e7in yapt\u0131\u011f\u0131 rezervasyonu tutar. userId<\/code> ve restaurantId<\/code> alanlar\u0131, @relation<\/code> anotasyonlar\u0131 ile di\u011fer modellerle ili\u015fkilendirilir.<\/li>\n
    • @@unique([restaurantId, date, time])<\/code> k\u0131s\u0131tlamas\u0131, ayn\u0131 restoranda, ayn\u0131 tarih ve saat i\u00e7in m\u00fckerrer rezervasyonlar\u0131 engellemek i\u00e7in basit bir kontrol sa\u011flar. Ger\u00e7ek d\u00fcnyada bu, masa numaralar\u0131 ve m\u00fcsaitlik durumu gibi daha karma\u015f\u0131k bir mant\u0131kla ele al\u0131nmal\u0131d\u0131r.<\/li>\n<\/ul>\n
      Veritaban\u0131 Migration'lar\u0131 ve Prisma Client Olu\u015fturma<\/h3>\n
      \u015eema dosyam\u0131z\u0131 tan\u0131mlad\u0131ktan sonra, bu \u015femay\u0131 veritaban\u0131m\u0131za uygulamam\u0131z gerekiyor. Prisma'n\u0131n migration sistemi bu konuda bize yard\u0131mc\u0131 olur.<\/p>\n
        \n
      1. Migration Olu\u015fturma ve Uygulama:<\/strong><\/li>\n
        \nnpx prisma migrate dev --name init\n        <\/pre>\n
        <\/code><\/p>\n
        Bu komut, prisma\/migrations<\/code> dizini alt\u0131nda yeni bir migration dosyas\u0131 olu\u015fturacak ve ard\u0131ndan bu migration'\u0131 veritaban\u0131n\u0131za uygulayarak tablolar\u0131 olu\u015fturacakt\u0131r.<\/p>\n
      2. Prisma Client'\u0131 Olu\u015fturma:<\/strong> Herhangi bir model de\u011fi\u015fikli\u011fi yapt\u0131\u011f\u0131n\u0131zda, Prisma Client'\u0131 yeniden olu\u015fturman\u0131z gerekir. Bu, TypeScript'in modellerinizi tan\u0131mas\u0131n\u0131 ve do\u011fru tip ipu\u00e7lar\u0131 sa\u011flamas\u0131n\u0131 sa\u011flar.<\/li>\n
        \nnpx prisma generate\n        <\/pre>\n
        <\/code>\n    <\/ol>\n
        Art\u0131k projemiz temel Next.js yap\u0131s\u0131yla ve veritaban\u0131 ile ileti\u015fim kurmaya haz\u0131r bir Prisma kurulumuyla donat\u0131lm\u0131\u015f durumda. Sonraki ad\u0131mlarda, bu temeller \u00fczerine API'lerimizi ve kullan\u0131c\u0131 aray\u00fcz\u00fcm\u00fcz\u00fc in\u015fa etmeye ba\u015flayabiliriz.<\/p>\n
        \u2699\ufe0f Backend Geli\u015ftirme: Rezervasyon API'lar\u0131 Next.js ile Nas\u0131l Olu\u015fturulur?<\/h2>\n
        Projemizin temelini att\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi rezervasyon sistemimizin \"beyni\" olan backend k\u0131sm\u0131na odaklanabiliriz. Next.js'in API Routes \u00f6zelli\u011fi sayesinde, RESTful API'lerimizi kolayca olu\u015fturabilir ve veritaban\u0131m\u0131zla etkile\u015fim kurabiliriz. Bu b\u00f6l\u00fcmde, kullan\u0131c\u0131lar\u0131n rezervasyon yapabilece\u011fi, mevcut rezervasyonlar\u0131 listeleyebilece\u011fi ve belki de iptal edebilece\u011fi temel API u\u00e7 noktalar\u0131n\u0131 nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 ele alaca\u011f\u0131z.<\/p>\n
        Next.js API Routes: Tan\u0131m ve Kullan\u0131m<\/h3>\n
        Next.js'de API Routes, pages\/api<\/code> dizini alt\u0131nda tan\u0131mlanan dosyalard\u0131r. Bu dosyalar, sunucu taraf\u0131nda \u00e7al\u0131\u015fan ve HTTP isteklerine yan\u0131t veren Node.js i\u015flevleri olarak g\u00f6rev yapar. Bu sayede, ayr\u0131 bir backend framework'\u00fcne ihtiya\u00e7 duymadan, frontend ve backend mant\u0131\u011f\u0131n\u0131 ayn\u0131 projede tutabiliriz. \u00d6rne\u011fin, pages\/api\/reservations.ts<\/code> ad\u0131nda bir dosya olu\u015fturdu\u011fumuzda, bu dosya \/api\/reservations<\/code> adresinden eri\u015filebilen bir API endpoint'i haline gelir.<\/p>\n
        Prisma Client'\u0131 Ba\u015flatma ve Kullanma<\/h3>\n
        API Routes i\u00e7inde veritaban\u0131m\u0131zla ileti\u015fim kurmak i\u00e7in Prisma Client'\u0131 kullanaca\u011f\u0131z. Daha \u00f6nce de bahsetti\u011fimiz gibi, performans optimizasyonu i\u00e7in global bir Prisma Client \u00f6rne\u011fi kullanmak en iyi uygulamad\u0131r.<\/p>\n
        \n\/\/ lib\/prisma.ts (Yeni bir dosya olu\u015fturun)\nimport { PrismaClient } from '@prisma\/client';\n\nlet prisma: PrismaClient;\n\nif (process.env.NODE_ENV === 'production') {\n  prisma = new PrismaClient();\n} else {\n  if (!(global as any).prisma) {\n    (global as any).prisma = new PrismaClient();\n  }\n  prisma = (global as any).prisma;\n}\n\nexport default prisma;\n    <\/pre>\n
        <\/code><\/p>\n
        Bu kod par\u00e7as\u0131, geli\u015ftirme ortam\u0131nda s\u0131cak yeniden y\u00fckleme (hot-reloading) s\u0131ras\u0131nda her defas\u0131nda yeni bir Prisma Client \u00f6rne\u011fi olu\u015fturulmas\u0131n\u0131 engellerken, \u00fcretim ortam\u0131nda tek bir \u00f6rnek kullan\u0131r. \u015eimdi bu Prisma Client'\u0131 API rotalar\u0131m\u0131zda kullanabiliriz.<\/p>\n
        Rezervasyon Olu\u015fturma (POST \/api\/reservations)<\/h3>\n
        Yeni bir rezervasyon olu\u015fturmak i\u00e7in bir POST iste\u011fi alacak bir API rotas\u0131 olu\u015ftural\u0131m. Bu rota, kullan\u0131c\u0131n\u0131n g\u00f6nderdi\u011fi verileri do\u011frulayacak ve veritaban\u0131na yeni bir rezervasyon kayd\u0131 ekleyecektir. \u00d6ncelikle, pages\/api\/reservations\/index.ts<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m:<\/p>\n
        \n\/\/ pages\/api\/reservations\/index.ts\nimport type { NextApiRequest, NextApiResponse } from 'next';\nimport prisma from '@\/lib\/prisma'; \/\/ lib\/prisma.ts dosyas\u0131n\u0131 do\u011fru yoldan import edin\n\nexport default async function handler(req: NextApiRequest, res: NextApiResponse) {\n  if (req.method === 'POST') {\n    const { userId, restaurantId, date, time, partySize, notes } = req.body;\n\n    \/\/ 1. Giri\u015f verilerini do\u011frulama\n    if (!userId || !restaurantId || !date || !time || !partySize) {\n      return res.status(400).json({ message: 'Eksik rezervasyon bilgileri.' });\n    }\n\n    \/\/ 2. Tarih format\u0131n\u0131 kontrol etme (\u00f6rne\u011fin ISO string)\n    const reservationDate = new Date(date);\n    if (isNaN(reservationDate.getTime())) {\n      return res.status(400).json({ message: 'Ge\u00e7ersiz tarih format\u0131.' });\n    }\n\n    try {\n      \/\/ 3. Restoran\u0131n m\u00fcsaitli\u011fini kontrol etme (basit bir \u00f6rnek)\n      \/\/ Daha karma\u015f\u0131k bir senaryoda, masa numaralar\u0131, kapasite ve di\u011fer rezervasyonlar dikkate al\u0131nmal\u0131d\u0131r.\n      const restaurant = await prisma.restaurant.findUnique({\n        where: { id: restaurantId },\n      });\n\n      if (!restaurant) {\n        return res.status(404).json({ message: 'Restoran bulunamad\u0131.' });\n      }\n\n      \/\/ Ayn\u0131 tarih ve saat i\u00e7in \u00e7ak\u0131\u015fma kontrol\u00fc (basit bir yakla\u015f\u0131md\u0131r, ger\u00e7ek sistemde masa baz\u0131nda olmal\u0131)\n      const existingReservation = await prisma.reservation.findFirst({\n        where: {\n          restaurantId,\n          date: reservationDate,\n          time,\n        },\n      });\n\n      if (existingReservation) {\n        return res.status(409).json({ message: 'Bu saatte ba\u015fka bir rezervasyon mevcut.' });\n      }\n\n      \/\/ 4. Yeni rezervasyonu olu\u015fturma\n      const newReservation = await prisma.reservation.create({\n        data: {\n          userId,\n          restaurantId,\n          date: reservationDate,\n          time,\n          partySize: parseInt(partySize, 10),\n          notes,\n          status: 'CONFIRMED', \/\/ Ba\u015flang\u0131\u00e7ta CONFIRMED olarak ayarlanabilir veya PENDING\n        },\n      });\n\n      return res.status(201).json(newReservation);\n    } catch (error) {\n      console.error('Rezervasyon olu\u015fturulurken hata:', error);\n      return res.status(500).json({ message: 'Dahili sunucu hatas\u0131.' });\n    }\n  } else {\n    \/\/ Di\u011fer HTTP metodlar\u0131na izin verme\n    res.setHeader('Allow', ['POST']);\n    return res.status(405).end(Metot ${req.method} Desteklenmiyor.<\/code>);\n  }\n}\n    <\/pre>\n
        <\/code><\/p>\n
        Bu kod;<\/p>\n
          \n
        • POST<\/code> iste\u011fini i\u015fler.<\/li>\n
        • Gerekli alanlar\u0131n doldurulup doldurulmad\u0131\u011f\u0131n\u0131 kontrol eder.<\/li>\n
        • Restoran\u0131n varl\u0131\u011f\u0131n\u0131 kontrol eder.<\/li>\n
        • Belirli bir tarih ve saat i\u00e7in \u00e7ak\u0131\u015fan rezervasyon olup olmad\u0131\u011f\u0131n\u0131 kontrol eder (bu, l\u00fcks bir sistem i\u00e7in ba\u015flang\u0131\u00e7 seviyesi bir kontrold\u00fcr; daha geli\u015fmi\u015f sistemler masa numaras\u0131, alan vb. detaylar\u0131 hesaba katmal\u0131d\u0131r).<\/li>\n
        • Herhangi bir hata durumunda uygun HTTP durum kodlar\u0131 ve mesajlar\u0131 ile yan\u0131t verir.<\/li>\n<\/ul>\n
          T\u00fcm Rezervasyonlar\u0131 Listeleme (GET \/api\/reservations)<\/h3>\n
          Mevcut rezervasyonlar\u0131 listelemek i\u00e7in ayn\u0131 pages\/api\/reservations\/index.ts<\/code> dosyas\u0131nda bir GET iste\u011fi i\u015fleyici ekleyebiliriz.<\/p>\n
          \n\/\/ pages\/api\/reservations\/index.ts (devam)\nimport type { NextApiRequest, NextApiResponse } from 'next';\nimport prisma from '@\/lib\/prisma';\n\nexport default async function handler(req: NextApiRequest, res: NextApiResponse) {\n  if (req.method === 'POST') {\n    \/\/ ... (yukar\u0131daki POST kodu)\n  } else if (req.method === 'GET') {\n    try {\n      \/\/ Query parametreleri ile filtreleme yap\u0131labilir (\u00f6rne\u011fin userId, restaurantId, status)\n      const { userId, restaurantId, status } = req.query;\n\n      const reservations = await prisma.reservation.findMany({\n        where: {\n          ...(userId && { userId: String(userId) }),\n          ...(restaurantId && { restaurantId: String(restaurantId) }),\n          ...(status && { status: String(status) }),\n        },\n        include: {\n          user: {\n            select: { id: true, name: true, email: true }, \/\/ G\u00fcvenlik i\u00e7in \u015fifre veya hassas bilgi g\u00f6ndermeyin\n          },\n          restaurant: {\n            select: { id: true, name: true, address: true, phone: true },\n          },\n        },\n        orderBy: {\n          date: 'asc',\n        },\n      });\n\n      return res.status(200).json(reservations);\n    } catch (error) {\n      console.error('Rezervasyonlar getirilirken hata:', error);\n      return res.status(500).json({ message: 'Dahili sunucu hatas\u0131.' });\n    }\n  } else {\n    res.setHeader('Allow', ['POST', 'GET']);\n    return res.status(405).end(Metot ${req.method} Desteklenmiyor.<\/code>);\n  }\n}\n    <\/pre>\n
          <\/code><\/p>\n
          Bu GET iste\u011fi i\u015fleyici;<\/p>\n
            \n
          • Gelen userId<\/code>, restaurantId<\/code> veya status<\/code> query parametrelerine g\u00f6re rezervasyonlar\u0131 filtreler.<\/li>\n
          • include<\/code> \u00f6zelli\u011fi ile ilgili kullan\u0131c\u0131 ve restoran bilgilerini de rezervasyon objesine dahil eder (g\u00fcvenlik nedeniyle hassas bilgileri hari\u00e7 tutarak).<\/li>\n
          • Rezervasyonlar\u0131 tarihe g\u00f6re s\u0131ralar.<\/li>\n<\/ul>\n
            Hata Y\u00f6netimi ve G\u00fcvenlik \u0130pu\u00e7lar\u0131<\/h3>\n
              \n
            • Giri\u015f Do\u011frulama:<\/strong> Her zaman istemciden gelen verileri sunucu taraf\u0131nda do\u011frulay\u0131n. Sadece bo\u015f olup olmad\u0131\u011f\u0131n\u0131 kontrol etmekle kalmay\u0131p, veri t\u00fcrlerini, uzunluklar\u0131n\u0131 ve formatlar\u0131n\u0131 da kontrol edin (\u00f6rne\u011fin, e-posta format\u0131, tarih ge\u00e7erlili\u011fi). Zod veya Yup gibi \u015fema do\u011frulama k\u00fct\u00fcphanelerini kullanmak bu s\u00fcreci \u00e7ok daha kolay ve g\u00fcvenli hale getirebilir.<\/li>\n
            • Hata Mesajlar\u0131:<\/strong> Kullan\u0131c\u0131lara anla\u015f\u0131l\u0131r ama genel hata mesajlar\u0131 sunun. Detayl\u0131 hata mesajlar\u0131 (\u00f6rne\u011fin, veritaban\u0131 hata mesajlar\u0131) hassas bilgiler i\u00e7erebilece\u011fi i\u00e7in \u00fcretim ortam\u0131nda kesinlikle ka\u00e7\u0131n\u0131lmal\u0131d\u0131r.<\/li>\n
            • Kimlik Do\u011frulama ve Yetkilendirme:<\/strong> API rotalar\u0131n\u0131za eri\u015fimi k\u0131s\u0131tlamak i\u00e7in kimlik do\u011frulama (authentication) ve yetkilendirme (authorization) mekanizmalar\u0131 uygulay\u0131n. Kullan\u0131c\u0131n\u0131n ger\u00e7ekten bir rezervasyon yapmaya veya kendi rezervasyonlar\u0131n\u0131 g\u00f6r\u00fcnt\u00fclemeye yetkili olup olmad\u0131\u011f\u0131n\u0131 kontrol edin. NextAuth.js, bu konuda g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar.<\/li>\n
            • Veri G\u00fcvenli\u011fi:<\/strong> Asla \u015fifreleri d\u00fcz metin olarak saklamay\u0131n. bcrypt gibi k\u00fct\u00fcphaneler kullanarak \u015fifreleri hashleyin. Veritaban\u0131ndan hassas verileri (\u015fifreler, API anahtarlar\u0131) do\u011frudan istemciye g\u00f6ndermekten ka\u00e7\u0131n\u0131n.<\/li>\n<\/ul>\n
              Bu temel API rotalar\u0131yla, rezervasyon sistemimizin backend omurgas\u0131n\u0131 olu\u015fturmu\u015f oluyoruz. \u0130leri d\u00fczey senaryolarda, masa m\u00fcsaitli\u011fi, iptal i\u015flemleri, \u00f6deme entegrasyonlar\u0131 gibi daha karma\u015f\u0131k mant\u0131klar\u0131 da bu API'lere ekleyebilirsiniz.<\/p>\n
              \ud83c\udfa8 Frontend Mimarisi: Kullan\u0131c\u0131 Deneyimi Odakl\u0131 Aray\u00fcz Nas\u0131l Tasarlan\u0131r?<\/h2>\n
              G\u00fc\u00e7l\u00fc bir backend'e sahip olmak harika, ancak l\u00fcks bir rezervasyon sisteminin ba\u015far\u0131s\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) ve kullan\u0131c\u0131 deneyiminin (UX) kalitesine ba\u011fl\u0131d\u0131r. Bu b\u00f6l\u00fcmde, Next.js ve React'\u0131n bile\u015fen tabanl\u0131 yap\u0131s\u0131n\u0131 kullanarak, sezgisel, estetik ve i\u015flevsel bir rezervasyon aray\u00fcz\u00fcn\u00fc nas\u0131l geli\u015ftirece\u011fimizi inceleyece\u011fiz.<\/p>\n
              Kullan\u0131c\u0131 Aray\u00fcz\u00fc \u0130\u00e7in Bile\u015fen Tabanl\u0131 Yakla\u015f\u0131m<\/h3>\n
              React'\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri, aray\u00fcz\u00fc y\u00f6netilebilir ve yeniden kullan\u0131labilir bile\u015fenlere ay\u0131rma yetene\u011fidir. Rezervasyon sistemi i\u00e7in \u015fu temel bile\u015fenleri d\u00fc\u015f\u00fcnebiliriz:<\/p>\n
                \n
              • <\/code>: Tarih, saat, ki\u015fi say\u0131s\u0131 gibi bilgileri alan ana form.<\/li>\n
              • <\/code>: Restoranlar\u0131 listeleyen ve her bir restoran\u0131n detaylar\u0131n\u0131 g\u00f6steren kart.<\/li>\n
              • <\/code>: Kullan\u0131c\u0131n\u0131n rezervasyon tarihini se\u00e7mesini sa\u011flayan bir tarih se\u00e7ici.<\/li>\n
              • <\/code>: M\u00fcsait saat dilimlerini g\u00f6steren ve se\u00e7meyi sa\u011flayan bile\u015fen.<\/li>\n
              • <\/code>: Rezervasyon onay\u0131 veya hata mesajlar\u0131n\u0131 g\u00f6steren modal pencere.<\/li>\n<\/ul>\n
                Bu bile\u015fenleri bir araya getirerek, karma\u015f\u0131k bir aray\u00fcz\u00fc daha basit ve y\u00f6netilebilir par\u00e7alara ay\u0131rabiliriz.<\/p>\n
                Rezervasyon Formu Olu\u015fturma<\/h3>\n
                Ana rezervasyon formumuz, kullan\u0131c\u0131n\u0131n rezervasyon bilgilerini girmesi i\u00e7in merkezi bir nokta olacakt\u0131r. pages\/book\/[restaurantId].tsx<\/code> veya components\/ReservationForm.tsx<\/code> gibi bir yap\u0131 d\u00fc\u015f\u00fcnebiliriz.<\/p>\n
                \n\/\/ components\/ReservationForm.tsx\n\"use client\"; \/\/ Next.js 13+ App Router i\u00e7in, e\u011fer App Router kullan\u0131l\u0131yorsa\n\nimport React, { useState } from 'react';\nimport DatePicker from 'react-datepicker';\nimport 'react-datepicker\/dist\/react-datepicker.css';\nimport { useRouter } from 'next\/router'; \/\/ Pages Router i\u00e7in\n\ninterface ReservationFormProps {\n  restaurantId: string;\n}\n\nconst ReservationForm: React.FC = ({ restaurantId }) => {\n  const [selectedDate, setSelectedDate] = useState(null);\n  const [selectedTime, setSelectedTime] = useState('');\n  const [partySize, setPartySize] = useState(1);\n  const [notes, setNotes] = useState('');\n  const [error, setError] = useState(null);\n  const [loading, setLoading] = useState(false);\n  \n  \/\/ \u00d6rnek m\u00fcsait saatler (ger\u00e7ekte API'den \u00e7ekilmeli)\n  const availableTimes = ['18:00', '19:00', '20:00', '21:00']; \n  const router = useRouter();\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setLoading(true);\n    setError(null);\n\n    if (!selectedDate || !selectedTime || partySize < 1) {\n      setError('L\u00fctfen t\u00fcm alanlar\u0131 doldurun.');\n      setLoading(false);\n      return;\n    }\n\n    try {\n      const response = await fetch('\/api\/reservations', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application\/json',\n        },\n        body: JSON.stringify({\n          userId: 'some-user-id', \/\/ Kimlik do\u011frulama sonras\u0131 dinamik olacak\n          restaurantId,\n          date: selectedDate.toISOString(),\n          time: selectedTime,\n          partySize,\n          notes,\n        }),\n      });\n\n      if (!response.ok) {\n        const errorData = await response.json();\n        throw new Error(errorData.message || 'Rezervasyon ba\u015far\u0131s\u0131z.');\n      }\n\n      const data = await response.json();\n      alert('Rezervasyon ba\u015far\u0131yla olu\u015fturuldu!');\n      router.push(\/reservations\/${data.id}<\/code>); \/\/ Rezervasyon detay sayfas\u0131na y\u00f6nlendir\n    } catch (err: any) {\n      setError(err.message || 'Bir hata olu\u015ftu.');\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    
                \n      
                Rezervasyon Yap<\/h3>\n      {error && 
                {error}<\/div>}\n      \n      
                \n