Next.js ile tam yığın (full-stack)

Ders 43'te çok sayfalı bir site kurdun, ama verisi koddaki bir diziden geliyordu: yeni bir şampiyon eklemek için kodu değiştirip siteyi yeniden yayınlaman gerekirdi. Bu derste Şampiyon Rehberi'ni gerçek bir uygulamaya çeviriyorsun. Liste Ders 37'deki gibi PostgreSQL'den gelecek, bir formla yeni şampiyon eklenecek, başka programlar için bir JSON API'si olacak. Yanlış girdiyi zod yakalayacak, veritabanına ulaşılamazsa kullanıcı düzgün bir hata sayfası görecek. Hepsi tek bir Next.js projesinde.

#Tam yığın: tek projede üç kapı

Şimdiye kadar bir uygulamanın iki yarısını ayrı ayrı yazdın. Ders 38'de Express ile bir API kurup Render'a koydun; Ders 40–42'de Vite ile bir React arayüzü yazdın. İkisini birleştirmek isteseydin iki proje, iki yayın, iki ayrı adres olurdu. Arayüz API'yi fetch ile çağırır, araya CORS ayarı girer, her sayfa önce "yükleniyor" der.

Next.js'te iki yarı aynı projede durur. Tarayıcının görmediği bir sunucu tarafın zaten var: Ders 43'te sunucu bileşenlerinin console.log'u terminale düşüyordu. Bu derste o sunucu tarafını üç farklı kapıdan kullanacaksın:

1. Sunucu bileşeni sayfayı çizerken veritabanından okur. Veri sayfanın ilk HTML'iyle gelir.
2. Server Action formdan gelen veriyi alıp veritabanına yazar.
3. Route Handler başka programlara (bir mobil uygulamaya, bir Discord botuna, curl.exe'ye) JSON verir.

#Veritabanını hazırla

#Neon'da yeni bir veritabanı

Ders 37'de pgapi adında, derse ayrılmış bir veritabanı açmıştın. Bu proje için de temiz bir tane aç:

1CREATE TABLE sampiyonlar (2    id integer GENERATED ALWAYS AS IDENTITY PRIMARY KEY,3    isim text NOT NULL UNIQUE,4    rol text NOT NULL CHECK (rol IN ('Büyücü', 'Dövüşçü', 'Nişancı')),5    zorluk integer NOT NULL CHECK (zorluk BETWEEN 1 AND 3),6    tanitim text NOT NULL7);8 9INSERT INTO sampiyonlar (isim, rol, zorluk, tanitim) VALUES10    ('Ahri', 'Büyücü', 2, 'Çevik bir büyücü. Düşmanın arasına dalıp çıkmayı sever.'),11    ('Garen', 'Dövüşçü', 1, 'Dayanıklı bir savaşçı. Öğrenmesi kolay, alt etmesi zor.'),12    ('Jinx', 'Nişancı', 2, 'Uzaktan vuran bir nişancı. Takım savaşında coşar.'),13    ('Lux', 'Büyücü', 1, 'Işık büyüleriyle uzaktan oyunu yöneten bir büyücü.'),14    ('Yasuo', 'Dövüşçü', 3, 'Rüzgârı kullanan bir kılıç ustası. Ustalaşması uzun sürer.'),15    ('Teemo', 'Nişancı', 1, 'Küçük ama sinir bozucu bir izci. Haritaya mantar eker.');16 17CREATE TABLE esyalar (18    id integer GENERATED ALWAYS AS IDENTITY PRIMARY KEY,19    ad text NOT NULL UNIQUE,20    fiyat integer NOT NULL CHECK (fiyat >= 0),21    aciklama text NOT NULL22);23 24INSERT INTO esyalar (ad, fiyat, aciklama) VALUES25    ('Uzun Kılıç', 250, 'Saldırı gücünü biraz artırır.'),26    ('Yakut Kristali', 400, 'Can puanını artırır.'),27    ('Ağır Zırh', 1100, 'Fiziksel hasara karşı korur.');

Veri Ders 43'teki dizilerin aynısı; esyalar tablosunu görevlerde kullanacaksın. CHECK kısıtları (Ders 35) rolü üç değerle, zorluğu 1–3 arasıyla, fiyatı sıfır ve üstüyle sınırlıyor. Bir denetim sorgusu çalıştır:

SELECT id, isim, rol, zorluk FROM sampiyonlar ORDER BY id;

#Paketler ve .env.local

Geliştirme sunucusu çalışıyorsa Ctrl+C ile durdur. Veritabanı sürücüsü pg'yi ve dersin sonunda kullanacağın doğrulama kütüphanesi zod'u kur; pg'nin TypeScript tipleri ayrı bir pakette, onu geliştirme bağımlılığı olarak kur:

PS C:\kod\next-rehber> npm install pg zod added 14 packages, and audited 372 packages in 1s 145 packages are looking for funding  run `npm fund` for details 5 high severity vulnerabilities To address all issues (including breaking changes), run:  npm audit fix --force Run `npm audit` for details.npm warn install-scripts 1 package has install scripts not yet covered by allowScripts:npm warn install-scripts   unrs-resolver@1.12.2 (postinstall: node postinstall.js)npm warn install-scriptsnpm warn install-scripts Run `npm install-scripts ls` to review, or `npm install-scripts approve <pkg>` to allow.PS C:\kod\next-rehber> npm install -D @types/pg added 1 package, and audited 373 packages in 1s...

İkinci komutun çıktısının geri kalanı birincininkiyle aynı, kısalttık. Bu ders pg 8.23.1 ve zod 4.6.6 ile denendi (npm view zod version bu dersi yazarken 4.6.6 diyordu). 5 high severity vulnerabilities Ders 43'te gördüğün ESLint uyarısı; yeni paketlerden gelmiyor, npm audit fix --force çalıştırma. npm warn install-scripts satırları da Ders 43'teki gibi zararsız.

Şimdi bağlantı dizesi. Neon'da Connect düğmesine bas, veritabanı olarak rehber'i seç ve dizeyi kopyala. Ders 37'de dizeyi .env dosyasına yazıp programı node --env-file=.env ile çalıştırmıştın. Next.js bu dosyaları kendisi okur; --env-file gerekmez. Proje kökünde (app'in yanında) .env.local adında bir dosya aç ve tek satır yaz. sslmode=require'ı Ders 37'deki gibi verify-full yap:

1DATABASE_URL=postgresql://neondb_owner:AbC123dEf@ep-cool-darkness-a1b2c3d4-pooler.us-east-2.aws.neon.tech/rehber?sslmode=verify-full&channel_binding=require

Değerler Neon belgesindeki örnek; seninki farklı. Dosyanın adı neden .env.local? Next bir değişkeni sırayla birkaç yerde arar ve ilk bulduğunu kullanır: önce bilgisayarın kendi ortam değişkenleri, sonra .env.development.local, sonra .env.local, sonra .env.development, en son .env. Adında development geçen dosyalar yalnız npm run dev'de okunur; npm run build ve npm run start onların yerine .env.production.local ve .env.production'a bakar. .env.local ikisinde de okunur. .local ile biten dosyalar "yalnız bu bilgisayara ait" demek; Neon'un Next.js rehberi de bağlantı dizesini bu dosyaya koyuyor. create-next-app'in .gitignore'unda .env* satırı var: .env ile başlayan hiçbir dosya Git'e girmez.

npm run dev ile sunucuyu başlat. Başlangıç satırlarına yeni bir satır eklendi:

PS C:\kod\next-rehber> npm run dev > next-rehber@0.1.0 dev> next dev ▲ Next.js 16.4.0 (Turbopack)- Local:         http://localhost:3000- Network:       http://192.168.1.35:3000- Environments: .env.local✓ Ready in 1788ms✓ Running next.config.ts took 71ms

- Environments: .env.local: Next dosyayı buldu ve okudu. Bu satırı görmüyorsan dosyanın adı ya da yeri yanlış (.env.local.txt olmasın, Ders 0).

#lib/db.ts: tek havuz

lib klasörüne db.ts adında bir dosya aç. Ders 37'deki sağlam db.js'in TypeScript hâli, üstünde bir satır fazlasıyla:

1import "server-only"2import { Pool } from "pg"3 4if (!process.env.DATABASE_URL) {5    throw new Error("DATABASE_URL tanımlı değil: .env.local dosyası proje kökünde mi?")6}7 8export const pool = new Pool({9    connectionString: process.env.DATABASE_URL,10    connectionTimeoutMillis: 5000,11})12 13pool.on("error", (hata) => {14    console.error("Havuzdaki boşta bekleyen bir bağlantı koptu:", hata.message)15})

• import "server-only": "bu dosya yalnız sunucuda çalışır" işareti. Bir istemci bileşeni bu dosyayı (ya da onu içe aktaran bir dosyayı) içe aktarmaya kalkarsa derleme durur. Ne işe yaradığını ortam değişkenleri bölümünde kendi gözünle göreceksin. Next bu adı kendisi tanır; paketi kurmana gerek yok.
• Pool, connectionTimeoutMillis, pool.on("error", …): Ders 37'den. Havuz modül yüklenirken bir kez kurulur, her sayfa ve her istek aynı havuzu kullanır.
• export const pool: başka dosyalar import { pool } from "@/lib/db" ile alır.

⨯ Error: DATABASE_URL tanımlı değil: .env.local dosyası proje kökünde mi?    at <unknown> (lib\db.ts:5:11)  3 |  4 | if (!process.env.DATABASE_URL) {> 5 |     throw new Error("DATABASE_URL tanımlı değil: .env.local dosyası proje kökünde mi?")    |           ^  6 | }  7 |  8 | export const pool = new Pool({ GET /sampiyonlar 500 in 560ms (next.js: 409ms, application-code: 151ms)

#Sunucu bileşeninde veritabanından okumak

Ders 42'de veriyi bir bileşene getirmek için üç state, bir useEffect ve bir fetch yazmıştın; sayfa önce "yükleniyor" diyordu. Ders 43'te sunucu bileşenlerinin async olabildiğini gördün. İkisini birleştirince iş kısalıyor: sunucu bileşeni veritabanını doğrudan sorgular, sonucu bekler ve sayfayı veriyle çizer.

Önce veri katmanı. lib/sampiyonlar.ts'teki diziyi ve sampiyonBul'u sil; dosyanın son hâli:

1import "server-only"2import { pool } from "@/lib/db"3 4export type Sampiyon = {5    id: number6    isim: string7    rol: string8    zorluk: number9    tanitim: string10}11 12export async function tumSampiyonlar(): Promise<Sampiyon[]> {13    const { rows } = await pool.query<Sampiyon>(14        "SELECT id, isim, rol, zorluk, tanitim FROM sampiyonlar ORDER BY isim"15    )16    return rows17}18 19export async function sampiyonBul(id: string): Promise<Sampiyon | undefined> {20    const { rows } = await pool.query<Sampiyon>(21        "SELECT id, isim, rol, zorluk, tanitim FROM sampiyonlar WHERE id = $1",22        [id]23    )24    return rows[0]25}26 27export function ikonAdresi(isim: string) {28    return `https://ddragon.leagueoflegends.com/cdn/16.20.1/img/champion/${isim}.png`29}

• pool.query<Sampiyon>(…): açılı parantezdeki Sampiyon bir tip parametresi. pg'ye "satırlar bu şekilde gelecek" diyorsun; rows artık Sampiyon[]. Bu bir söz, denetim değil: sütun adlarını yanlış yazarsan TypeScript fark etmez.
• sampiyonBul async oldu ve $1 ile parametreli sorgu kullanıyor. Adresten gelen metni SQL'e yapıştırmıyoruz.
• rows[0]: satır yoksa undefined. Dönüş tipine Sampiyon | undefined yazdık ki sayfa bu ihtimali unutmasın.

Kaydedip npx tsc --noEmit çalıştırırsan TypeScript iki sayfada da hata bulur, çünkü ikisi de eski dosyaya göre yazılmış. Şampiyon sayfasındaki mesaj öğretici:

PS C:\kod\next-rehber> npx tsc --noEmitapp/sampiyonlar/[id]/page.tsx:15:41 - error TS2339: Property 'isim' does not exist on type 'Promise<Sampiyon | undefined>'. 15     return { title: sampiyon ? sampiyon.isim : "Bulunamadı" }                                           ~~~~

Şimdi sayfaları güncelle. Şampiyon sayfasında sampiyonBul'u çağıran iki satıra da await ekle:

12export async function generateMetadata({ params }: Props): Promise<Metadata> {13    const { id } = await params14    const sampiyon = await sampiyonBul(id)15    return { title: sampiyon ? sampiyon.isim : "Bulunamadı" }16}17 18export default async function SampiyonSayfasi({ params }: Props) {19    const { id } = await params20    const sampiyon = await sampiyonBul(id)

Liste sayfasında içe aktarmayı değiştir, fonksiyonu async yap ve veriyi oku. Bir de yeni şampiyon formuna gidecek bir bağlantı ekle; o sayfayı birazdan yazacaksın:

1import type { Metadata } from "next"2import Image from "next/image"3import Link from "next/link"4import { ikonAdresi, tumSampiyonlar } from "@/lib/sampiyonlar"5 6export const metadata: Metadata = {7    title: "Şampiyonlar",8}9 10export default async function SampiyonListesi() {11    console.log("Şampiyon listesi hazırlanıyor")12    const sampiyonlar = await tumSampiyonlar()13 14    return (15        <main>16            <h1>Şampiyonlar</h1>17            <p className="soluk">{sampiyonlar.length} şampiyon var. Birine tıkla, ayrıntısını gör.</p>18            <p>19                <Link href="/sampiyonlar/yeni" className="dugme">+ Yeni şampiyon</Link>20            </p>21            <div className="kartlar">22                {sampiyonlar.map((s) => (23                    <Link key={s.id} href={`/sampiyonlar/${s.id}`} className="kart">24                        <Image src={ikonAdresi(s.isim)} alt="" width={56} height={56} className="ikon" />25                        <h2>{s.isim}</h2>26                        <p>{s.rol}</p>27                    </Link>28                ))}29            </div>30        </main>31    )32}

/sampiyonlar'ı ve bir şampiyonu aç. Ekran Ders 43'tekiyle aynı; değişen, verinin nereden geldiği:

○ Compiling /sampiyonlar ...Şampiyon listesi hazırlanıyor GET /sampiyonlar 200 in 791ms (next.js: 476ms, application-code: 315ms) GET /sampiyonlar/3 200 in 669ms (next.js: 603ms, application-code: 66ms)

Neyin olmadığına dikkat et: useEffect yok, "yükleniyor" state'i yok, ayrı bir API ve fetch yok. Sorgu sunucuda çalıştı, kartlar ilk HTML'in içinde geldi. SQL metni, bağlantı dizesi, pg paketi tarayıcıya hiç inmedi; tarayıcının gördüğü yalnız sonuç.

#Adresten gelen metin: "abc"

Sınır değerlerini dene: /sampiyonlar/99 "Bu sayfa haritada yok" der, doğru. Peki /sampiyonlar/abc?

⨯ error: invalid input syntax for type integer: "abc"    at async sampiyonBul (lib\sampiyonlar.ts:20:22)    at async Module.generateMetadata (app\sampiyonlar\[id]\page.tsx:14:22)  18 |  19 | export async function sampiyonBul(id: string): Promise<Sampiyon | undefined> {> 20 |     const { rows } = await pool.query<Sampiyon>(     |                      ^  21 |         "SELECT id, isim, rol, zorluk, tanitim FROM sampiyonlar WHERE id = $1",  22 |         [id]  23 |     ) {  length: 146,  severity: 'ERROR',  code: '22P02',  ...  digest: '1561649027'} GET /sampiyonlar/abc 500 in 81ms (next.js: 9ms, application-code: 71ms)

sampiyonBul'un başına bir denetim ekle:

19export async function sampiyonBul(id: string): Promise<Sampiyon | undefined> {20    if (!/^\d{1,9}$/.test(id)) {21        return undefined22    }23 24    const { rows } = await pool.query<Sampiyon>(

/^\d{1,9}$/ Ders 23'teki düzenli ifade: "baştan sona yalnız rakam; en az 1, en çok 9 tane". Neden 9? Postgres'in integer'ı en çok 2.147.483.647 alır (10 basamak). Dokuz basamaklı her sayı bu sınırın altında kalır; /sampiyonlar/3000000000 gibi taşan bir adres de sorguya hiç gitmez. Denedik: abc ve 3000000000 artık 404 dönüyor, 3 yine Jinx'i açıyor.

#Route Handler: başka programlar için API

Sayfalar insanlar için HTML döndürür. Ama yarın şampiyon listesini bir Discord botunda ya da telefon uygulamasında göstermek isteyebilirsin; onlar HTML değil, JSON ister. Ders 28'de bunun için Express ile app.get("/api/takimlar", …) yazmıştın. Next'teki karşılığı Route Handler: page.tsx yerine route.ts adında bir dosya.

app içinde api klasörü, onun içinde sampiyonlar klasörü aç ve route.ts dosyasını yaz:

1import { tumSampiyonlar } from "@/lib/sampiyonlar"2 3export async function GET() {4    const sampiyonlar = await tumSampiyonlar()5    return Response.json(sampiyonlar)6}

Kurallar az:

• Dosyanın adı route.ts. Adres yine klasörlerden çıkar: app/api/sampiyonlar/route.ts → /api/sampiyonlar.
• Dışa aktardığın fonksiyonun adı HTTP metodudur: GET, POST, PUT, PATCH, DELETE (Ders 26). Hepsi büyük harf, hepsi adlı dışa aktarma. Sayfalardaki export default burada yok.
• Fonksiyon bir Response döndürür. Response, tarayıcıdaki fetch'in döndürdüğü nesnenin aynısı; burada sen kuruyorsun. Response.json(veri) veriyi JSON'a çevirir ve content-type: application/json başlığını koyar.

Sunucu açıkken ikinci bir terminal aç ve dene:

PS C:\kod\next-rehber> curl.exe http://localhost:3000/api/sampiyonlar[{"id":1,"isim":"Ahri","rol":"Büyücü","zorluk":2,"tanitim":"Çevik bir büyücü. Düşmanın arasına dalıp çıkmayı sever."},{"id":2,"isim":"Garen","rol":"Dövüşçü","zorluk":1,"tanitim":"Dayanıklı bir savaşçı. Öğrenmesi kolay, alt etmesi zor."},{"id":3,"isim":"Jinx","rol":"Nişancı","zorluk":2,"tanitim":"Uzaktan vuran bir nişancı. Takım savaşında coşar."},{"id":4,"isim":"Lux","rol":"Büyücü","zorluk":1,"tanitim":"Işık büyüleriyle uzaktan oyunu yöneten bir büyücü."},{"id":6,"isim":"Teemo","rol":"Nişancı","zorluk":1,"tanitim":"Küçük ama sinir bozucu bir izci. Haritaya mantar eker."},{"id":5,"isim":"Yasuo","rol":"Dövüşçü","zorluk":3,"tanitim":"Rüzgârı kullanan bir kılıç ustası. Ustalaşması uzun sürer."}]

Aynı tumSampiyonlar fonksiyonu hem sayfayı hem API'yi besliyor. Veri katmanını lib'e ayırmanın kazancı bu: sorgu tek yerde.

#Tek şampiyon: [id] ve 404

Express'teki /api/takimlar/:id'nin karşılığı yine köşeli parantezli klasör. app/api/sampiyonlar içinde [id] klasörü aç, içine route.ts:

1import { sampiyonBul } from "@/lib/sampiyonlar"2 3export async function GET(istek: Request, { params }: RouteContext<"/api/sampiyonlar/[id]">) {4    const { id } = await params5    const sampiyon = await sampiyonBul(id)6 7    if (!sampiyon) {8        return Response.json({ hata: "Şampiyon bulunamadı" }, { status: 404 })9    }10 11    return Response.json(sampiyon)12}

• Fonksiyon iki parametre alır. İlki gelen istek (Request); bu fonksiyonda kullanmıyoruz ama ikinciye ulaşmak için yazmak zorundayız. İkincisinin içindeki params, sayfalardaki gibi bir Promise.
• RouteContext<"/api/sampiyonlar/[id]">: Next'in klasörlerine bakıp ürettiği tip, Ders 43'teki LayoutProps gibi. İçinde params: Promise<{ id: string }> var.
• Response.json(veri, { status: 404 }): ikinci argümanla durum kodunu verirsin. Express'teki res.status(404).json(…)'un karşılığı.

PS C:\kod\next-rehber> curl.exe -i http://localhost:3000/api/sampiyonlar/3HTTP/1.1 200 OKvary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetchcontent-type: application/jsonDate: Mon, 12 Oct 2026 02:04:26 GMTConnection: keep-aliveKeep-Alive: timeout=5Transfer-Encoding: chunked {"id":3,"isim":"Jinx","rol":"Nişancı","zorluk":2,"tanitim":"Uzaktan vuran bir nişancı. Takım savaşında coşar."}PS C:\kod\next-rehber> curl.exe -i http://localhost:3000/api/sampiyonlar/99HTTP/1.1 404 Not Foundvary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetchcontent-type: application/jsonDate: Mon, 12 Oct 2026 02:04:26 GMTConnection: keep-aliveKeep-Alive: timeout=5Transfer-Encoding: chunked {"hata":"Şampiyon bulunamadı"}PS C:\kod\next-rehber> curl.exe -i -X DELETE http://localhost:3000/api/sampiyonlar/3HTTP/1.1 405 Method Not Allowedvary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetchDate: Mon, 12 Oct 2026 02:04:26 GMTConnection: keep-aliveKeep-Alive: timeout=5Transfer-Encoding: chunked

Son istek önemli: dosyada DELETE diye bir fonksiyon yok, Next kendisi 405 Method Not Allowed döndü. vary satırı Next'in kendi başlığı; geç. abc gibi bir adres de sampiyonBul'daki denetim sayesinde 404 döner.

⨯ Detected lowercase method 'get' in '[project]/app/api/sampiyonlar/route.ts'. Export the uppercase 'GET' method name to fix this error.⨯ No HTTP methods exported in '[project]/app/api/sampiyonlar/route.ts'. Export a named export for each HTTP method. GET /api/sampiyonlar 405 in 8ms (next.js: 1.8ms, application-code: 6ms)

#Server Actions: formdan veritabanına

Şimdi yazma. Siteye bir Yeni şampiyon formu koymak istiyorsun. Şimdiye kadarki araçlarla düşün: Ders 38'deki gibi bir POST uç noktası yaz, formda onSubmit ile preventDefault yap, verileri state'ten toplayıp fetch ile JSON gönder, cevabı bekle, hata ve yükleniyor durumlarını yönet. Next.js bunun kısasını sunar: sunucuda çalışan bir fonksiyonu doğrudan formun action'ına vermek.

Önce fonksiyon. app/sampiyonlar klasörüne actions.ts adında bir dosya aç:

1"use server"2 3import { redirect } from "next/navigation"4import { pool } from "@/lib/db"5 6export async function sampiyonEkle(formData: FormData) {7    const isim = formData.get("isim")8    const rol = formData.get("rol")9    const zorluk = formData.get("zorluk")10    const tanitim = formData.get("tanitim")11 12    await pool.query(13        "INSERT INTO sampiyonlar (isim, rol, zorluk, tanitim) VALUES ($1, $2, $3, $4)",14        [isim, rol, zorluk, tanitim]15    )16 17    redirect("/sampiyonlar")18}

• "use server": dosyanın en üstünde, tırnaklarıyla. Ders 43'teki "use client"'ın kardeşi bir yönerge: "bu dosyanın dışa aktardığı fonksiyonlar sunucuda çalışır ve tarayıcıdan çağrılabilir".
• formData: tarayıcının formdan topladığı veri, bir FormData nesnesi. formData.get("isim"), name="isim" olan kutunun içindekini verir. Gelen her şey metindir; zorluk bile "2" gibi bir metin.
• redirect("/sampiyonlar"): iş bitince kullanıcıyı listeye gönder. next/navigation'dan gelir.

Sonra form. app/sampiyonlar/yeni klasörünü aç, page.tsx yaz. Önce app/globals.css'in sonuna formun stillerini ekle (CSS bu dersin konusu değil, kopyalayabilirsin):

1.form {2    display: grid;3    gap: 14px;4    max-width: 420px;5}6 7.form label {8    display: grid;9    gap: 6px;10    font-weight: 700;11}12 13.form input,14.form select,15.form textarea {16    padding: 10px 12px;17    border: 1px solid #34304a;18    border-radius: 10px;19    background: #211e2e;20    color: #e8e6f0;21    font: inherit;22    font-weight: 400;23}24 25.form button {26    justify-self: start;27    border: 0;28    font: inherit;29    font-weight: 700;30    cursor: pointer;31}32 33.form button:disabled {34    opacity: 0.6;35    cursor: wait;36}37 38.alan-hatasi {39    color: #ff8a8a;40    font-size: 14px;41    font-weight: 400;42}43 44.iskelet {45    height: 130px;46    border-radius: 12px;47    background: #211e2e;48}

1import type { Metadata } from "next"2import { sampiyonEkle } from "../actions"3 4export const metadata: Metadata = {5    title: "Yeni şampiyon",6}7 8export default function YeniSampiyon() {9    return (10        <main>11            <h1>Yeni şampiyon</h1>12            <form action={sampiyonEkle} className="form">13                <label>14                    İsim15                    <input name="isim" />16                </label>17                <label>18                    Rol19                    <select name="rol">20                        <option>Büyücü</option>21                        <option>Dövüşçü</option>22                        <option>Nişancı</option>23                    </select>24                </label>25                <label>26                    Zorluk (1–3)27                    <input name="zorluk" type="number" />28                </label>29                <label>30                    Tanıtım31                    <textarea name="tanitim" rows={3} />32                </label>33                <button type="submit" className="dugme">34                    Kaydet35                </button>36            </form>37        </main>38    )39}

 GET /sampiyonlar/yeni 200 in 63ms (next.js: 16ms, application-code: 47ms)Şampiyon listesi hazırlanıyor GET /sampiyonlar 200 in 36ms (next.js: 1.9ms, application-code: 34ms) POST /sampiyonlar/yeni 200 in 73ms (next.js: 1.6ms, application-code: 72ms)  └─ ƒ sampiyonEkle({}) in 3ms app/sampiyonlar/actions.ts

<form action={sampiyonEkle}>: Ders 41'de onSubmit'e bir fonksiyon veriyordun. Burada action'a veriyorsun ve fonksiyon tarayıcıda değil, sunucuda çalışacak. yeni klasörü [id]'nin yanında duruyor ama karışmaz: Next sabit adı (yeni) köşeli parantezli klasörden önce dener.

/sampiyonlar/yeni'yi aç ve Annie'yi ekle: Büyücü, zorluk 1, tanıtım "Ayısı Tibbers ile ateş saçan küçük bir büyücü." Kaydet'e bas:

localhost:3000/sampiyonlar/yeni

Sayfa listeye döner ve Annie oradadır: 7 şampiyon var. Ne oldu, sırayla:

1. Next derlerken sampiyonEkle'ye gizli bir kimlik verdi ve formun içine bu kimliği koydu. Fonksiyonun kodu tarayıcıya gitmedi.
2. Kaydet'e basınca tarayıcı formdaki dört kutuyu bir POST isteğiyle sayfanın kendi adresine (/sampiyonlar/yeni) gönderdi. Terminaldeki POST satırı bu.
3. Next kimliğe bakıp sampiyonEkle'yi sunucuda çalıştırdı ve form verisini formData olarak verdi. INSERT çalıştı.
4. redirect cevaba "şimdi /sampiyonlar'a geç" bilgisini koydu ve Next listenin yeni hâlini aynı cevabın içinde gönderdi. Tarayıcı sayfayı baştan yüklemeden listeye geçti. Terminalde GET /sampiyonlar satırının POST satırından önce yazılması bu yüzden: liste, POST'un cevabı bitmeden çizildi.

Bir yan ürün daha var: bu form JavaScript'siz de çalışır. Tarayıcı JavaScript'i daha indirmemişse ya da kapalıysa form sıradan bir HTML formu gibi gönderilir, sunucu yine sampiyonEkle'yi çalıştırır. Ders 41'deki formu ise React tarayıcıda JavaScript'le kuruyordu; JavaScript olmadan form hiç yoktu.

⨯ ./app/deneme/HizliEkle.tsx:5:9Error: It is not allowed to define inline "use server" annotated Server Actions in Client Components.    To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.     Read more: https://nextjs.org/docs/app/api-reference/directives/use-server#using-server-functions-in-a-client-component  3 | export default function HizliEkle() {  4 |     async function ekle(formData: FormData) {> 5 |         "use server"    |         ^^^^^^^^^^^^  6 |         console.log("Eklenecek:", formData.get("isim"))  7 |     }  8 |

#Önbellek: yayında neden eski veri?

Geliştirme sunucusunda her şey çalıştı: Annie eklendi, liste güncellendi. Ders 43'ün sonunda yaptığın gibi siteyi bir de yayındaki hâliyle çalıştır. Sunucuyu Ctrl+C ile durdur ve derle:

PS C:\kod\next-rehber> npm run build > next-rehber@0.1.0 build> next build ▲ Next.js 16.4.0 (Turbopack)- Environments: .env.local✓ Running next.config.ts took 54ms   Creating an optimized production build ...✓ Compiled successfully in 3.7s  Running TypeScript ...  Finished TypeScript in 1987ms ...  Collecting page data using 11 workers ...  Generating static pages using 11 workers (0/10) ...Eşya listesi hazırlanıyorŞampiyon listesi hazırlanıyor  Generating static pages using 11 workers (2/10)  Generating static pages using 11 workers (4/10)  Generating static pages using 11 workers (7/10)✓ Generating static pages using 11 workers (10/10) in 303ms  Finalizing page optimization ... Route (app)┌ ○ /├ ○ /_not-found├ ƒ /api/sampiyonlar├ ƒ /api/sampiyonlar/[id]├ ○ /esyalar├ ƒ /esyalar/[id]├ ○ /hakkinda├ ○ /sampiyonlar├ ƒ /sampiyonlar/[id]├ ○ /sampiyonlar/yeni└ ○ /yama-notlari  ○  (Static)   prerendered as static contentƒ  (Dynamic)  server-rendered on demand

İki satıra dikkat et. Şampiyon listesi hazırlanıyor derleme sırasında yazıldı: Next sayfayı şimdi çizdi, yani veritabanını şimdi sorguladı. ○ /sampiyonlar da sonucun saklandığını söylüyor. Next'in mantığı şu: sayfa çerez, başlık ya da adres parametresi gibi isteğe bağlı hiçbir şey okumuyor, o hâlde her ziyaretçiye aynı HTML gidebilir; bir kez hazırla, sakla, hep onu gönder. Ders 43'teki dizi için bu mükemmeldi. Şimdi dene:

Kayıt yazıldı ama sayfa eski. Sayfanın yanıt başlıklarına bak:

PS C:\kod\next-rehber> curl.exe -i http://localhost:3000/sampiyonlarHTTP/1.1 200 OKVary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetch, Accept-Encodingx-nextjs-cache: HITx-nextjs-prerender: 1x-nextjs-prerender: 1x-nextjs-stale-time: 300X-Powered-By: Next.jsCache-Control: s-maxage=31536000ETag: "of2vh28qxgamn"Content-Type: text/html; charset=utf-8Content-Length: 13876Date: Mon, 12 Oct 2026 02:05:24 GMTConnection: keep-aliveKeep-Alive: timeout=5

• x-nextjs-cache: HIT: "bu cevap saklı kopyadan geldi"; sayfa bileşeni hiç çalışmadı, sorgu hiç gitmedi.
• Cache-Control: s-maxage=31536000: araya giren önbelleklere (Ders 20'deki fikir) "bunu bir yıl saklayabilirsin" diyor. 31.536.000 saniye bir yıl.

API neden güncel? Route Handler'lar varsayılan olarak saklanmaz: derleme çıktısında ƒ /api/sampiyonlar, her istekte çalışır. Geliştirme sunucusunda da hiçbir sayfa saklanmaz; hata bu yüzden ancak yayında çıktı. "Bende çalışıyordu" cümlesinin en sık sebeplerinden biri budur.

#revalidatePath: "bu sayfa bayatladı"

Çözüm tek satır. actions.ts'te, redirect'ten önce revalidatePath'i çağır:

1"use server"2 3import { revalidatePath } from "next/cache"4import { redirect } from "next/navigation"5import { pool } from "@/lib/db"6 7export async function sampiyonEkle(formData: FormData) {8    const isim = formData.get("isim")9    const rol = formData.get("rol")10    const zorluk = formData.get("zorluk")11    const tanitim = formData.get("tanitim")12 13    await pool.query(14        "INSERT INTO sampiyonlar (isim, rol, zorluk, tanitim) VALUES ($1, $2, $3, $4)",15        [isim, rol, zorluk, tanitim]16    )17 18    revalidatePath("/sampiyonlar")19    redirect("/sampiyonlar")20}

revalidatePath("/sampiyonlar") Next'e "/sampiyonlar'ın saklı kopyası artık geçersiz" der. Kopya hemen silinmez; bir sonraki istek geldiğinde sayfa yeniden çizilir, yeni HTML saklanır ve ondan sonrakiler yine saklı kopyadan beslenir. Sıra önemli: redirect bir hata fırlatarak çalışır, ondan sonraki satırlar hiç çalışmaz. revalidatePath'i altına yazarsan hiç çağrılmaz.

Durdur, npm run build, npm run start. Liste bu kez 8 şampiyon var diye açılır (derleme Vex'i gördü). Sona'yı ekle (Büyücü, zorluk 1, "Müziğiyle takımını iyileştiren sessiz bir büyücü."): liste hemen 9 şampiyon var der.

#Uygulamanın dışından gelen değişiklik

revalidatePath yalnız senin kodun çağırınca çalışır. Neon'un SQL Editor'ünden doğrudan bir satır eklersen Next'in haberi olmaz. Denedik: SQL Editor'de Brand'i ekledik, yayındaki sayfa 9 şampiyon var demeye devam etti ve başlık yine x-nextjs-cache: HIT idi. Veri senin uygulaman dışından da değişiyorsa iki yol var, ikisi de sayfa dosyasının üstüne tek satır:

6export const revalidate = 60

revalidate = 60 "saklı kopya 60 saniye taze sayılsın" demek. Süre dolduktan sonraki ilk istek yine eski kopyayı alır ama arka planda yeniden çizimi başlatır; ondan sonrakiler yeni kopyayı görür. Beklememek için 10 saniyeyle denedik; derleme çıktısında sütunlar belirdi:

Route (app)                Revalidate  Expire┌ ○ /├ ○ /_not-found├ ƒ /api/sampiyonlar├ ƒ /api/sampiyonlar/[id]├ ○ /esyalar├ ƒ /esyalar/[id]├ ○ /hakkinda├ ○ /sampiyonlar                  10s      1y├ ƒ /sampiyonlar/[id]├ ○ /sampiyonlar/yeni└ ○ /yama-notlari

Sonra SQL Editor'den Zyra'yı ekleyip sayfayı arka arkaya istedik:

STALE "bayat kopyayı verdim, yenisini hazırlıyorum" demek. İkinci yol her istekte yeniden çizmek: export const dynamic = "force-dynamic". Denediğimizde derleme çıktısında satır ƒ /sampiyonlar oldu ve Şampiyon listesi hazırlanıyor derlemede yazılmadı.

Üç yoldan hangisini ne zaman seçeceğin:

• revalidatePath(...): veri yalnız senin uygulamandan değişiyorsa. Bedeli neredeyse yok; sayfa yalnız gerektiğinde yeniden çizilir.
• export const revalidate = 60: veri dışarıdan da değişiyor ve birkaç dakikalık gecikme sorun değilse. Bedeli: ziyaretçi en fazla o süre kadar eski veri görebilir.
• export const dynamic = "force-dynamic": her istekte en güncel veri şartsa. Bedeli: her ziyarette bir veritabanı sorgusu.

Bu derste listeyi ○ bırakıp revalidatePath kullanıyoruz; denemeleri yaptıysan revalidate satırını sil. Bir bonus: saklı sayfa veritabanına ulaşılamadığında bile açılır. Bunu dersin sonunda göreceksin.

#Doğrulama: zod

Formu bir de kötü niyetle dene. Geliştirme sunucusunu başlat (npm run dev) ve iki gönderim yap.

Birincisi: isim Zed, zorluk 9. Sayfa hata katmanıyla durur, terminalde:

⨯ error: new row for relation "sampiyonlar" violates check constraint "sampiyonlar_zorluk_check"    at async sampiyonEkle (app\sampiyonlar\actions.ts:13:5)  11 |     const tanitim = formData.get("tanitim")  12 |> 13 |     await pool.query(     |     ^  14 |         "INSERT INTO sampiyonlar (isim, rol, zorluk, tanitim) VALUES ($1, $2, $3, $4)",  15 |         [isim, rol, zorluk, tanitim]  16 |     ) {  length: 267,  severity: 'ERROR',  code: '23514',  ...  constraint: 'sampiyonlar_zorluk_check',  ...} POST /sampiyonlar/yeni 500 in 381ms (next.js: 1.4ms, application-code: 380ms)

Veritabanının CHECK kısıtı seni korudu, ama kullanıcı yalnız bir hata katmanı ve 500 gördü. Hangi alanın neden yanlış olduğunu söyleyen yok.

İkincisi daha kötü: isim ve tanıtım boş, zorluk 1. Gönderim başarılı oldu; listede adı olmayan bir kart çıktı. NOT NULL boş metni engellemez, çünkü boş metin NULL değildir (Ders 34). "Çalışıyor" ama doğru değil. Bu kaydı SQL Editor'de sil:

DELETE FROM sampiyonlar WHERE isim = '';

Kural Ders 13'ten beri aynı: dışarıdan gelen veri, programına girdiği kapıda doğrulanır. Form da, API'ye gelen JSON da, adres çubuğu da dışarısıdır. Ders 39'da bunun için sampiyonOku adında, typeof ve in ile on beş satırlık bir fonksiyon yazmıştın ve "gerçek projelerde bunu zod gibi kütüphanelerle kısaltırsın" demiştik. Sıra geldi.

#İlk şema

zod'da verinin olması gereken şeklini bir şema olarak yazarsın, sonra gelen veriyi şemaya sorarsın. Ders 39'daki örneğin aynısını proje kökünde zod-dene.ts adlı geçici bir dosyada dene:

1import { z } from "zod"2 3const KartSemasi = z.object({4    isim: z.string(),5    hp: z.number(),6})7 8type Kart = z.infer<typeof KartSemasi>9 10const teemo: Kart = KartSemasi.parse(JSON.parse('{"isim": "Teemo", "hp": 80}'))11console.log(teemo)12 13const sonuc = KartSemasi.safeParse(JSON.parse('{"isim": "Teemo", "hp": "80"}'))14if (!sonuc.success) {15    console.log(sonuc.error.issues)16}17 18KartSemasi.parse(JSON.parse('{"isim": "Teemo", "hpp": 80}'))

PS C:\kod\next-rehber> node zod-dene.ts(node:9732) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///C:/kod/next-rehber/zod-dene.ts is not specified and it doesn't parse as CommonJS.Reparsing as ES module because module syntax was detected. This incurs a performance overhead.To eliminate this warning, add "type": "module" to \\?\C:\kod\next-rehber\package.json.(Use `node --trace-warnings ...` to show where the warning was created){ isim: 'Teemo', hp: 80 }[  {    expected: 'number',    code: 'invalid_type',    path: [ 'hp' ],    message: 'Invalid input: expected number, received string'  }]file:///C:/kod/next-rehber/zod-dene.ts:18KartSemasi.parse(JSON.parse('{"isim": "Teemo", "hpp": 80}'))           ^ ZodError: [  {    "expected": "number",    "code": "invalid_type",    "path": [      "hp"    ],    "message": "Invalid input: expected number, received undefined"  }]    at file:///C:/kod/next-rehber/zod-dene.ts:18:12    ... Node.js v24.20.0

İlk dört satır yalnız bir uyarı: Next projesinin package.json'ında "type": "module" yok, Node dosyayı önce eski modül sistemiyle okumayı deneyip vazgeçiyor (Ders 14). Bu deneme için zararsız; Next'in dosyalarını bozmamak için package.json'a dokunma. Sonra:

• z.object({ ... }) bir şema kurar: "içinde metin olan bir isim ve sayı olan bir hp alanı olan obje". z.string() ve z.number() alanların kuralları.
• KartSemasi.parse(veri) veriyi denetler. Veri şemaya uyuyorsa temiz bir kopyasını döndürür, uymuyorsa ZodError fırlatır. Son satırdaki hpp yazım hatası programı durdurdu.
• KartSemasi.safeParse(veri) hiç fırlatmaz; bir sonuç objesi döndürür: ya { success: true, data } ya { success: false, error }. Metin olarak gelen "80" reddedildi; error.issues her sorunu yolu (path) ve mesajıyla listeliyor. Bir form ya da istek için çoğu zaman bu daha kullanışlı: programı durdurmak değil, kullanıcıya ne yanlış olduğunu söylemek istersin.
• z.infer<typeof KartSemasi> şemadan bir TypeScript tipi çıkarır. Tipi ayrıca yazmazsın; şema değişince tip de değişir. parse'tan dönen değerin tipi zaten Kart'tır. Buradaki typeof, Ders 23'te çalışırken soru soran typeof değil: tip yazılan bir yerde "bu değişkenin TypeScript tipi" demek. Şimdilik kalıp olarak yaz: z.infer<typeof SemaninAdi>.

Denemeden sonra zod-dene.ts'i sil.

#Şampiyon şeması

Formun şeması lib/sampiyonSemasi.ts dosyasında dursun; hem formda hem birazdan API'de kullanacaksın:

1import { z } from "zod"2 3export const SampiyonSemasi = z.object({4    isim: z.string().trim().min(2, "İsim en az 2 harf olmalı.").max(20, "İsim en fazla 20 harf olabilir."),5    rol: z.enum(["Büyücü", "Dövüşçü", "Nişancı"], "Rol listeden seçilmeli."),6    zorluk: z.coerce.number("Zorluk bir sayı olmalı.").int("Zorluk tam sayı olmalı.").min(1, "Zorluk 1, 2 ya da 3 olmalı.").max(3, "Zorluk 1, 2 ya da 3 olmalı."),7    tanitim: z.string().trim().min(10, "Tanıtım en az 10 harf olmalı.").max(200, "Tanıtım en fazla 200 harf olabilir."),8})9 10export type YeniSampiyon = z.infer<typeof SampiyonSemasi>11 12export type FormDurumu = {13    hatalar?: Record<string, string[] | undefined>14    degerler?: Record<string, string>15}

• Kurallar zincir hâlinde eklenir (Ders 9). .trim() baştaki ve sondaki boşlukları atar, sonra .min(2, "…") uzunluğu denetler: yalnız boşluk yazan biri de "en az 2 harf" uyarısını alır.
• Her kuralın ikinci argümanı, kural bozulunca gösterilecek mesaj. Vermezsen zod İngilizce bir mesaj yazar (Too small: expected string to have >=2 characters).
• z.enum([...]) yalnız listedeki değerlerden birini kabul eder. Biri tarayıcının geliştirici araçlarıyla <option>'ı değiştirip "Tank" gönderse bile geçemez.
• z.coerce.number(): formdan her şey metin gelir, zorluk da "2". coerce (zorla çevir) değeri önce Number(...) ile sayıya çevirir, sonra sayı kurallarını uygular. "abc" çevrilince NaN olur ve "Zorluk bir sayı olmalı." mesajı çıkar.
• FormDurumu: Server Action'ın forma geri vereceği cevabın tipi. Birazdan kullanacaksın. Record<string, …> Ders 42'den tanıdık: anahtarları metin olan obje.

#Server Action'ı doğrulamaya bağla

Önce yazma işini veri katmanına taşı; birazdan API de aynı fonksiyonu kullanacak. lib/sampiyonlar.ts'in başına bir tip içe aktarması ekle:

1import "server-only"2import { pool } from "@/lib/db"3import type { YeniSampiyon } from "@/lib/sampiyonSemasi"

ve ikonAdresi'nin üstüne yeni bir fonksiyon:

32export async function sampiyonKaydet(veri: YeniSampiyon): Promise<Sampiyon> {33    const { rows } = await pool.query<Sampiyon>(34        "INSERT INTO sampiyonlar (isim, rol, zorluk, tanitim) VALUES ($1, $2, $3, $4) RETURNING id, isim, rol, zorluk, tanitim",35        [veri.isim, veri.rol, veri.zorluk, veri.tanitim]36    )37    return rows[0]38}

RETURNING eklenen satırı geri verir (Ders 35); API eklenen şampiyonu cevap olarak gösterecek. Şimdi actions.ts'in yeni hâli:

1"use server"2 3import { revalidatePath } from "next/cache"4import { redirect } from "next/navigation"5import { DatabaseError } from "pg"6import { z } from "zod"7import { sampiyonKaydet } from "@/lib/sampiyonlar"8import { SampiyonSemasi, type FormDurumu } from "@/lib/sampiyonSemasi"9 10function metin(formData: FormData, ad: string) {11    const deger = formData.get(ad)12    return typeof deger === "string" ? deger : ""13}14 15export async function sampiyonEkle(onceki: FormDurumu, formData: FormData): Promise<FormDurumu> {16    const degerler = {17        isim: metin(formData, "isim"),18        rol: metin(formData, "rol"),19        zorluk: metin(formData, "zorluk"),20        tanitim: metin(formData, "tanitim"),21    }22 23    const sonuc = SampiyonSemasi.safeParse(degerler)24    if (!sonuc.success) {25        return { hatalar: z.flattenError(sonuc.error).fieldErrors, degerler }26    }27 28    try {29        await sampiyonKaydet(sonuc.data)30    } catch (hata) {31        if (hata instanceof DatabaseError && hata.code === "23505") {32            return { hatalar: { isim: [sonuc.data.isim + " zaten listede."] }, degerler }33        }34        throw hata35    }36 37    revalidatePath("/sampiyonlar")38    redirect("/sampiyonlar")39}

Yukarıdan aşağı:

• metin: formData.get metin, dosya ya da null döndürebilir. Metin değilse (kutu hiç gönderilmediyse) boş metin sayıyoruz; böylece eksik alan da .min(...) kuralına takılır.
• Fonksiyonun iki parametresi var: onceki (formun bir önceki cevabı) ve formData. Birazdan kullanacağın useActionState hook'u Server Action'ı bu biçimde çağırır. onceki'yi kullanmıyoruz ama sıra yüzünden yazmak zorundayız.
• safeParse başarısızsa fonksiyon bir obje döndürür: hatalar ve kullanıcının yazdıkları. z.flattenError(sonuc.error).fieldErrors hataları alan adına göre gruplar: { isim: ["İsim en az 2 harf olmalı."], zorluk: [...] }. (İnternetteki örneklerde sonuc.error.flatten() görürsen: zod 4'te o yazım eskidi, yerine bu geldi.)
• Başarılıysa sonuc.data temiz ve tipli veridir: isim kırpılmış, zorluk sayıya çevrilmiş. Veritabanına giden artık bu.
• DatabaseError, pg'nin veritabanı hataları için kullandığı sınıf. instanceof ile (Ders 16) daraltınca TypeScript hata.code'u okumana izin verir. 23505 aynı ismin ikinci kez eklenmesi (Ders 37); onu alan hatasına çeviriyoruz, gerisini yeniden fırlatıyoruz.

Formun hataları gösterebilmesi için onu bir istemci bileşenine taşı. app/sampiyonlar/yeni/SampiyonFormu.tsx:

1"use client"2 3import { useActionState } from "react"4import { sampiyonEkle } from "../actions"5 6export default function SampiyonFormu() {7    const [durum, formAction, bekliyor] = useActionState(sampiyonEkle, {})8    const hatalar = durum.hatalar ?? {}9    const degerler = durum.degerler ?? {}10 11    return (12        <form action={formAction} className="form">13            <label>14                İsim15                <input name="isim" defaultValue={degerler.isim} />16                {hatalar.isim && <span className="alan-hatasi">{hatalar.isim[0]}</span>}17            </label>18            <label>19                Rol20                <select name="rol" key={degerler.rol} defaultValue={degerler.rol}>21                    <option>Büyücü</option>22                    <option>Dövüşçü</option>23                    <option>Nişancı</option>24                </select>25                {hatalar.rol && <span className="alan-hatasi">{hatalar.rol[0]}</span>}26            </label>27            <label>28                Zorluk (1–3)29                <input name="zorluk" type="number" defaultValue={degerler.zorluk} />30                {hatalar.zorluk && <span className="alan-hatasi">{hatalar.zorluk[0]}</span>}31            </label>32            <label>33                Tanıtım34                <textarea name="tanitim" rows={3} defaultValue={degerler.tanitim} />35                {hatalar.tanitim && <span className="alan-hatasi">{hatalar.tanitim[0]}</span>}36            </label>37            <button type="submit" className="dugme" disabled={bekliyor}>38                {bekliyor ? "Kaydediliyor…" : "Kaydet"}39            </button>40        </form>41    )42}

ve sayfa artık yalnız başlığı ve bu bileşeni çiziyor:

1import type { Metadata } from "next"2import SampiyonFormu from "./SampiyonFormu"3 4export const metadata: Metadata = {5    title: "Yeni şampiyon",6}7 8export default function YeniSampiyon() {9    return (10        <main>11            <h1>Yeni şampiyon</h1>12            <SampiyonFormu />13        </main>14    )15}

• useActionState(sampiyonEkle, {}): React'in hazır bir hook'u. İki şey alır: Server Action ve başlangıç durumu (boş obje). Üç şey verir: durum (Server Action'ın son döndürdüğü obje), formAction (formun action'ına vereceğin, Server Action'ı saran fonksiyon) ve bekliyor (istek sürerken true).
• hatalar.isim && <span>…</span>: Ders 40'taki koşullu çizim. İsim alanında hata varsa ilk mesajı göster.
• disabled={bekliyor} ve "Kaydediliyor…": istek sürerken düğme kapanır; sabırsız biri iki kez basıp iki kayıt yaratamaz.
• defaultValue={degerler.isim}: React'te bir form gönderimi bitince kutular boşaltılır. Hata durumunda kullanıcının yazdıklarını kaybetmemesi için Server Action onları geri gönderiyor, kutular da başlangıç değeri olarak onları alıyor. select'teki key küçük bir hile: bu sıfırlamada select başlangıç değerini kendiliğinden geri almıyor; key değişince React onu yeniden kurar ve seçim yerinde kalır.

Formu A, Nişancı, 5, "Kısa" ile gönder:

localhost:3000/sampiyonlar/yeni

Üç alanın hatası birden geldi, yazdıkların yerinde kaldı, veritabanına hiçbir şey gitmedi. İsmi Ahri yapıp geçerli bir tanıtımla gönderirsen bu kez veritabanı itiraz eder ve isim kutusunun altında Ahri zaten listede. yazar.

⨯ Error: A "use server" file can only export async functions, found object.Read more: https://nextjs.org/docs/messages/invalid-use-server-value

⨯ ./app/sampiyonlar/actions.ts:10:17Error: Server Actions must be async functions.   8 | import { SampiyonSemasi, type FormDurumu } from "@/lib/sampiyonSemasi"   9 |> 10 | export function metin(formData: FormData, ad: string) {     |                 ^^^^^  11 |     const deger = formData.get(ad)  12 |     return typeof deger === "string" ? deger : ""  13 | }

#Aynı şema, ikinci kapı: POST API

Şemayı ayrı dosyaya koymanın kazancı şimdi geliyor. Bir mobil uygulama da şampiyon ekleyebilsin: app/api/sampiyonlar/route.ts'e bir POST ekle. Dosyanın son hâli:

1import { revalidatePath } from "next/cache"2import { DatabaseError } from "pg"3import { z } from "zod"4import { sampiyonKaydet, tumSampiyonlar } from "@/lib/sampiyonlar"5import { SampiyonSemasi } from "@/lib/sampiyonSemasi"6 7export async function GET() {8    const sampiyonlar = await tumSampiyonlar()9    return Response.json(sampiyonlar)10}11 12export async function POST(istek: Request) {13    const govde: unknown = await istek.json().catch(() => null)14    const sonuc = SampiyonSemasi.safeParse(govde)15 16    if (!sonuc.success) {17        return Response.json(18            { hata: "Geçersiz veri", alanlar: z.flattenError(sonuc.error).fieldErrors },19            { status: 400 }20        )21    }22 23    try {24        const sampiyon = await sampiyonKaydet(sonuc.data)25        revalidatePath("/sampiyonlar")26        return Response.json(sampiyon, { status: 201 })27    } catch (hata) {28        if (hata instanceof DatabaseError && hata.code === "23505") {29            return Response.json({ hata: sonuc.data.isim + " zaten listede" }, { status: 409 })30        }31        throw hata32    }33}

• istek.json() gövdeyi JSON olarak okur ve bir Promise döndürür. Gövde bozuksa Promise reddedilir; .catch(() => null) (Ders 15) o durumda null verir, null da şemadan geçemez. govde'nin tipi bilerek unknown (Ders 39): ne geldiğini zod söyleyecek.
• Formdakiyle aynı şema, aynı kayıt fonksiyonu. Fark yalnız cevapta: form için alan hataları, API için 400, 201 ve 409 durum kodları.
• revalidatePath burada da var: API'den eklenen şampiyon da listeye düşmeli.

Proje klasöründe istekler adında bir klasör aç (Ders 38'deki gibi) ve üç dosya koy: nami.json → { "isim": "Nami", "rol": "Büyücü", "zorluk": 2, "tanitim": "Dalgaları yöneten, takımını hızlandıran bir büyücü." }, bozuk.json → { "isim": "N", "rol": "Tank", "zorluk": "kolay" }, yarim.json → { "isim": "Nami", (kapanmamış JSON). Sonra:

PS C:\kod\next-rehber> curl.exe -i --json "@istekler\nami.json" http://localhost:3000/api/sampiyonlarHTTP/1.1 201 Createdcontent-type: application/json {"id":14,"isim":"Nami","rol":"Büyücü","zorluk":2,"tanitim":"Dalgaları yöneten, takımını hızlandıran bir büyücü."}PS C:\kod\next-rehber> curl.exe -i --json "@istekler\nami.json" http://localhost:3000/api/sampiyonlarHTTP/1.1 409 Conflictcontent-type: application/json {"hata":"Nami zaten listede"}PS C:\kod\next-rehber> curl.exe -i --json "@istekler\bozuk.json" http://localhost:3000/api/sampiyonlarHTTP/1.1 400 Bad Requestcontent-type: application/json {"hata":"Geçersiz veri","alanlar":{"isim":["İsim en az 2 harf olmalı."],"rol":["Rol listeden seçilmeli."],"zorluk":["Zorluk bir sayı olmalı."],"tanitim":["Invalid input: expected string, received undefined"]}}PS C:\kod\next-rehber> curl.exe -i --json "@istekler\yarim.json" http://localhost:3000/api/sampiyonlarHTTP/1.1 400 Bad Requestcontent-type: application/json {"hata":"Geçersiz veri","alanlar":{}}

(Başlıklardan vary, Date ve bağlantı satırlarını kısalttık.) Okuması öğretici:

• "id":14: sende farklı olabilir. Başarısız eklemeler de sayaçtan numara harcar; Zed denemesi ve aynı ismi ikinci kez eklemeler böyle numaralar yedi.
• bozuk.json'da dört alan da ayrı ayrı raporlandı. tanitim'in mesajı İngilizce: alan hiç gelmedi ve "metin olmalı" kuralına biz mesaj yazmadık; yalnız .min ve .max'e yazdık. İstersen z.string("Tanıtım yazılmalı.") diye ona da Türkçe mesaj verebilirsin.
• yarim.json için alanlar boş: gövde hiç JSON değildi, alan hatası değil bütün gövdenin hatası. Bir sonraki adımda bunu da ayrı bir mesajla söylemek isteyebilirsin.

#Ortam değişkenleri: sunucu ile istemci sınırı

DATABASE_URL'i lib/db.ts okuyor ve o dosya yalnız sunucuda çalışıyor. Peki bir istemci bileşeni process.env.DATABASE_URL'i okursa ne olur? Deneyelim; bu bir deney, uygulamanın parçası değil. app/deneme klasörü aç, içine iki dosya:

1"use client"2 3export default function Gizli() {4    const adres = process.env.DATABASE_URL5    const site = process.env.NEXT_PUBLIC_SITE_ADI6    console.log("Gizli bileşeni:", adres, site)7 8    return <p>Adres: {String(adres)} · Site: {site}</p>9}

1import Gizli from "./Gizli"2 3export default function Deneme() {4    return (5        <main>6            <Gizli />7        </main>8    )9}

.env.local'a da ikinci bir satır ekle: NEXT_PUBLIC_SITE_ADI=Şampiyon Rehberi. Sunucuyu yeniden başlat ve /deneme'yi aç. Ekranda:

Adres: undefined · Site: Şampiyon Rehberi

Tarayıcı DATABASE_URL'i göremedi, NEXT_PUBLIC_ ile başlayanı gördü. Kural bu, ama hikâyenin hepsi bu değil. Sol altta kırmızı 1 Issue düğmesi belirdi, F12 → Console'da kırmızı bir hata var ve terminale bak:

Gizli bileşeni: postgresql://neondb_owner:AbC123dEf@ep-cool-darkness-a1b2c3d4-pooler.us-east-2.aws.neon.tech/rehber?sslmode=verify-full&channel_binding=require Şampiyon Rehberi GET /deneme 200 in 341ms (next.js: 179ms, application-code: 163ms)[browser] Uncaught Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:...                          <Gizli>                            <p>+                             undefined-                             {"postgresql://neondb_owner:AbC123dEf@ep-cool-darkness-a1b2c3d4-pooler.us-east-2.aws.n..."}

İlk satır console.log'un sunucudaki çıktısı: orada bağlantı dizesinin tamamı vardı. Sonra tarayıcıdaki hata, [browser] önekiyle terminale de taşınmış. Canlandırma başarısız oldu: "sunucunun çizdiği metin istemcinin çizdiğiyle uyuşmadı". + tarayıcının çizdiği (undefined), - sunucunun çizdiği (bağlantı dizesi). Ders 43'ten hatırla: istemci bileşenleri de ilk HTML için önce sunucuda çizilir. Sunucuda process.env.DATABASE_URL'in değeri vardı ve HTML'e yazıldı; tarayıcıda undefined çıktı ve React ağacı tarayıcıda baştan kurdu.

Sayfa kaynağına bak (Ctrl+U): şifre dahil bağlantı dizesinin tamamı orada.

<p>Adres: <!-- -->postgresql://neondb_owner:AbC123dEf@ep-cool-darkness-a1b2c3d4-pooler.us-east-2.aws.neon.tech/rehber?sslmode=verify-full&amp;channel_binding=require<!-- --> · Site: <!-- -->Şampiyon Rehberi</p>

Ekranda undefined görüp "güvendeyim" sanabilirsin; değilsin. Biz yayın derlemesinde de denedik: Next bu sayfayı derlemede çizip sakladı ve saklanan HTML dosyasında şifre yine vardı. Sır, sayfayı açan herkese gitti.

#NEXT_PUBLIC_: derlemede koda gömülür

Peki NEXT_PUBLIC_SITE_ADI tarayıcıya nasıl ulaştı? npm run build sonrası tarayıcıya gönderilen dosyalardan birinde bileşen şöyle görünüyor (derlenmiş koddan bir parça; adlar kısaltılmış):

let e=i.default.env.DATABASE_URL,l="Şampiyon Rehberi";return console.log("Gizli bileşeni:",e,l)

Fark açık: DATABASE_URL hâlâ bir okuma (env.DATABASE_URL); tarayıcıda okunacak bir değer yok, undefined çıkıyor. NEXT_PUBLIC_SITE_ADI ise gitmiş, yerine değeri düz metin olarak yazılmış. Next derlerken process.env.NEXT_PUBLIC_… geçen her yeri değerle değiştirir. İki sonucu var:

• Değer derlemede donar. .env.local'daki site adını değiştirirsen yeniden derlemen gerekir.
• Değer, sitenin JavaScript dosyalarını indiren herkese açıktır.

Şimdi en kötü "düzeltme"yi dene. .env.local'a NEXT_PUBLIC_DATABASE_URL= ile başlayan bir satır ekleyip bağlantı dizesini oraya da koy, Gizli.tsx'te process.env.NEXT_PUBLIC_DATABASE_URL oku ve derle. Ekranda artık undefined yok; "çalıştı". Sonra tarayıcıya giden dosyalarda şifreyi ara; aşağıdaki komutta AbC123dEf yerine kendi şifreni yaz (bağlantı dizesinde neondb_owner: ile @ arasındaki kısım). findstr Windows'un metin arama komutu: /s alt klasörlere de bakar, /m yalnız aranan metnin geçtiği dosyaların adını yazar.

PS C:\kod\next-rehber> findstr /s /m "AbC123dEf" .next\static\*.next\static\chunks\16v888mny51z0.js

Şifre, sitenin herkese açık JavaScript dosyalarından birinde (dosya adı sende farklı olur). İçinde e="postgresql://neondb_owner:AbC123dEf@ep-cool-darkness-…" yazıyor. Bu dosyayı sitene giren herkes indirir; bağlantı dizesini alan biri veritabanını silebilir.

Kural kısa: NEXT_PUBLIC_ yalnız herkesin görmesinde sakınca olmayan değerler içindir. Site adı, herkese açık bir analiz kimliği, sitenin kendi adresi. Şifre, API anahtarı, bağlantı dizesi asla. Ders 47'de bir yapay zekâ API'sine bağlanırken bu kuralı yeniden göreceksin.

#server-only: yanlış içe aktarmayı derlemede yakalamak

Sırrı istemciye taşımanın bir yolu daha var: istemci bileşeninde, sırrı kullanan bir dosyayı içe aktarmak. lib/db.ts'in başındaki import "server-only" bunun için. Deneme dosyasını şöyle değiştir:

1"use client"2 3import { tumSampiyonlar } from "@/lib/sampiyonlar"4 5export default function Gizli() {6    console.log(tumSampiyonlar)7    return <p>Deneme</p>8}

./lib/db.ts:1:1Error: 'server-only' cannot be imported from a Client Component module> 1 | import "server-only"    | ^^^^^^^^^^^^^^^^^^^^  2 | import { Pool } from "pg"  3 |  4 | if (!process.env.DATABASE_URL) { It should only be used from a Server Component. Import traces:  Client Component Browser:    ./lib/db.ts [Client Component Browser]    ./lib/sampiyonlar.ts [Client Component Browser]    ./app/deneme/Gizli.tsx [Client Component Browser]

Denemelerin bitti: app/deneme klasörünü sil, .env.local'daki NEXT_PUBLIC_ satırlarını kaldır. Bağlantı dizesini gerçekten bir NEXT_PUBLIC_ değişkenine koyup derlediysen ve o derlemeyi bir yere yüklediysen şifreyi Neon'da sıfırla.

#Yükleniyor ve hata sayfaları

Ders 42'de veri çeken her bileşen üç durumu kendisi yönetiyordu: yükleniyor, hata, veri. Next.js'te bunlar için iki özel dosya var. Sayfa (page.tsx) veri durumunu zaten çiziyor; ötekiler:

• loading.tsx: aynı klasördeki sayfa verisini beklerken gösterilecek bileşen.
• error.tsx: sayfa çizilirken bir hata fırlatılırsa sayfanın yerine gösterilecek bileşen.

#loading.tsx

Neon'un ücretsiz veritabanı beş dakika sorgu almazsa uyur (Ders 38); uyandıran ilk sorgu bir iki saniye sürebilir. O sürede kullanıcı tıkladığı bağlantıdan hiçbir tepki görmez. app/sampiyonlar/loading.tsx:

1export default function Yukleniyor() {2    return (3        <main>4            <p className="soluk">Şampiyonlar yükleniyor…</p>5            <div className="kartlar">6                <div className="iskelet" />7                <div className="iskelet" />8                <div className="iskelet" />9            </div>10        </main>11    )12}

Gri kutular (.iskelet) gelecek kartların yerini tutar; bu tür ekranlara iskelet denir. Bilgisayarında sorgu çok hızlı olacağı için ekranı göremeyebilirsin. Görmek için liste sayfasına geçici bir bekleme ekle: Ders 15'teki bekle'nin tipli hâli.

10function bekle(ms: number) {11    return new Promise((resolve) => setTimeout(resolve, ms))12}13 14export default async function SampiyonListesi() {15    await bekle(2000)

Ana sayfadan menüdeki Şampiyonlar'a tıkla:

localhost:3000/sampiyonlar

Tıklama anında karşılık verdi; iki saniye sonra kartlar iskeletin yerine geçti. Next, loading.tsx'i sayfanın etrafına bir React Suspense sınırı olarak koyar: sayfa bekleyen bir await'e takılınca sınır yedek içeriği (loading.tsx) gösterir, sayfa hazır olunca yerine koyar. Doğrudan adresle açınca da önce iskelet, sonra liste gelir: sunucu HTML'i parça parça, bir akış olarak gönderir. Denemeden sonra bekle'yi sil.

#error.tsx

Şimdi veritabanına ulaşılamadığını düşün: Neon'da bir kesinti, bozuk bir bağlantı dizesi. app/sampiyonlar/error.tsx:

1"use client"2 3type Props = {4    error: Error & { digest?: string }5    retry: () => void6}7 8export default function HataSayfasi({ error, retry }: Props) {9    return (10        <main>11            <h1>Bir şeyler ters gitti</h1>12            <p className="soluk">Şampiyonlar şu an getirilemedi. Biraz sonra yeniden dene.</p>13            <p className="soluk">Hata kodu: {error.digest}</p>14            <button className="dugme" onClick={() => retry()}>Yeniden dene</button>15        </main>16    )17}

• "use client" şart: hata sınırı React'te tarayıcıda çalışan bir yapı ve düğmenin onClick'i var.
• error: fırlatılan hata. digest, Next'in her sunucu hatasına verdiği kimlik numarası.
• retry: segmenti, yani bu klasörün sayfasını sunucudan yeniden ister ve çizmeyi dener. Next 16.3'ten beri adı bu; eski örneklerde reset görürsün. reset hâlâ var ama veriyi yeniden istemeden yalnız yeniden çizer; veritabanı hatası için işe yaramaz.

Dene: .env.local'daki sunucu adını boz (neon.tech → neon.tch), sunucuyu yeniden başlat ve Şampiyonlar'a tıkla:

localhost:3000/sampiyonlar

Menü yerinde, sitenin geri kalanı çalışıyor; yalnız /sampiyonlar segmenti hata ekranına döndü. Terminalde asıl hata ve aynı numara:

⨯ Error: getaddrinfo ENOTFOUND ep-cool-darkness-a1b2c3d4-pooler.us-east-2.aws.neon.tch    at async tumSampiyonlar (lib\sampiyonlar.ts:14:22)    at async SampiyonListesi (app\sampiyonlar\page.tsx:12:25)  12 |  13 | export async function tumSampiyonlar(): Promise<Sampiyon[]> {> 14 |     const { rows } = await pool.query<Sampiyon>(     |                      ^  15 |         "SELECT id, isim, rol, zorluk, tanitim FROM sampiyonlar ORDER BY isim"  16 |     )  17 |     return rows {  errno: -3008,  code: 'ENOTFOUND',  syscall: 'getaddrinfo',  hostname: 'ep-cool-darkness-a1b2c3d4-pooler.us-east-2.aws.neon.tch',  digest: '1620765663'} GET /sampiyonlar 200 in 227ms (next.js: 14ms, application-code: 213ms)

Kullanıcı ekranda 1620765663 görüyor, sen terminalde (yayında: barındırıcının loglarında, Ders 32) aynı digest'i arayıp asıl hatayı buluyorsun. Adı düzelt, sunucuyu yeniden başlat ve Yeniden dene'ye bas: tarayıcı segmenti yeniden ister, liste gelir.

Ekranda neden error.message yerine numara gösterdik? Yayında Next, sunucu bileşeninden gelen hatanın mesajını tarayıcıya göndermez; mesajın içinde bağlantı dizesi, dosya yolu, SQL gibi sızmaması gereken şeyler olabilir. Yayın derlemesinde error.message'ı ekrana yazdırarak denedik, gelen şuydu: Minified React error #441; visit https://react.dev/errors/441 for the full message…. React'in hata listesinde 441, "Sunucu bileşenleri çizilirken bir hata oldu; ayrıntı, hassas bilgi sızmasın diye yayın derlemelerinde gizlendi; digest alanı ayrıntıya götürebilir" demek. Geliştirmede mesajın kendisi gelir, yayında gelmez: ekrana koymaya değmez.

Bir şey daha. Liste sayfası yayında ○'tı; yayın sunucusunda veritabanını kapatıp denedik: liste saklı kopyadan sorunsuz açıldı, yalnız ƒ olan şampiyon sayfasına girince error.tsx çıktı. Önbelleğin sessiz bir faydası.

#Sık hatalar

Bölümlerin içindeki kartlara ek olarak bir tane daha. Hepsine hata rehberinden de ulaşabilirsin.

PS C:\kod\next-rehber> npm run build...Error occurred prerendering page "/sampiyonlar". Read more: https://nextjs.org/docs/messages/prerender-errorError: getaddrinfo ENOTFOUND ep-cool-darkness-a1b2c3d4-pooler.us-east-2.aws.neon.tch    at async f (lib\sampiyonlar.ts:14:22)    at async i (app\sampiyonlar\page.tsx:12:25)...Export encountered an error on /sampiyonlar/page: /sampiyonlar, exiting the build.⨯ Next.js build worker exited with code: 1 and signal: null

#Görevler

Görevleri aynı next-rehber projesinde, sırayla yap: her biri bir öncekinin üstüne kuruluyor. Hepsi dükkânla ilgili: schema.sql ile kurduğun esyalar tablosu ve Ders 43'teki eşya sayfaları. Her görevden sonra tarayıcıda ve curl.exe ile dene; en sonda npx tsc --noEmit ve npm run lint sessiz kalmalı. Önce kendin dene, takılırsan ipuçlarını sırayla aç.

1import "server-only"2import { pool } from "@/lib/db"3 4export type Esya = {5    id: number6    ad: string7    fiyat: number8    aciklama: string9}10 11export async function tumEsyalar(): Promise<Esya[]> {12    const { rows } = await pool.query<Esya>(13        "SELECT id, ad, fiyat, aciklama FROM esyalar ORDER BY fiyat"14    )15    return rows16}17 18export async function esyaBul(id: string): Promise<Esya | undefined> {19    if (!/^\d{1,9}$/.test(id)) {20        return undefined21    }22 23    const { rows } = await pool.query<Esya>(24        "SELECT id, ad, fiyat, aciklama FROM esyalar WHERE id = $1",25        [id]26    )27    return rows[0]28}

1import type { Metadata } from "next"2import Link from "next/link"3import { tumEsyalar } from "@/lib/esyalar"4 5export const metadata: Metadata = {6    title: "Eşyalar",7}8 9export default async function EsyaListesi() {10    const esyalar = await tumEsyalar()11 12    return (13        <main>14            <h1>Eşyalar</h1>15            <p className="soluk">Dükkânda {esyalar.length} eşya var.</p>16            <div className="kartlar">17                {esyalar.map((e) => (18                    <Link key={e.id} href={`/esyalar/${e.id}`} className="kart">19                        <h2>{e.ad}</h2>20                        <p>{e.fiyat} altın</p>21                    </Link>22                ))}23            </div>24        </main>25    )26}

1import type { Metadata } from "next"2import Link from "next/link"3import { notFound } from "next/navigation"4import { esyaBul } from "@/lib/esyalar"5import SatinAlDugmesi from "./SatinAlDugmesi"6 7type Props = {8    params: Promise<{ id: string }>9}10 11export async function generateMetadata({ params }: Props): Promise<Metadata> {12    const { id } = await params13    const esya = await esyaBul(id)14    return { title: esya ? esya.ad : "Bulunamadı" }15}16 17export default async function EsyaSayfasi({ params }: Props) {18    const { id } = await params19    const esya = await esyaBul(id)20 21    if (!esya) {22        notFound()23    }24 25    return (26        <main>27            <Link href="/esyalar" className="geri">← Bütün eşyalar</Link>28            <h1>{esya.ad}</h1>29            <p className="soluk">{esya.fiyat} altın</p>30            <p>{esya.aciklama}</p>31            <SatinAlDugmesi fiyat={esya.fiyat} />32        </main>33    )34}

1import { tumEsyalar } from "@/lib/esyalar"2 3export async function GET() {4    const esyalar = await tumEsyalar()5    return Response.json(esyalar)6}

1import { esyaBul } from "@/lib/esyalar"2 3export async function GET(istek: Request, { params }: RouteContext<"/api/esyalar/[id]">) {4    const { id } = await params5    const esya = await esyaBul(id)6 7    if (!esya) {8        return Response.json({ hata: "Eşya bulunamadı" }, { status: 404 })9    }10 11    return Response.json(esya)12}

PS C:\kod\next-rehber> curl.exe http://localhost:3000/api/esyalar[{"id":1,"ad":"Uzun Kılıç","fiyat":250,"aciklama":"Saldırı gücünü biraz artırır."},{"id":2,"ad":"Yakut Kristali","fiyat":400,"aciklama":"Can puanını artırır."},{"id":3,"ad":"Ağır Zırh","fiyat":1100,"aciklama":"Fiziksel hasara karşı korur."}]PS C:\kod\next-rehber> curl.exe http://localhost:3000/api/esyalar/2{"id":2,"ad":"Yakut Kristali","fiyat":400,"aciklama":"Can puanını artırır."}PS C:\kod\next-rehber> curl.exe -i http://localhost:3000/api/esyalar/abcHTTP/1.1 404 Not Foundvary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetchcontent-type: application/jsonDate: Mon, 12 Oct 2026 02:26:18 GMTConnection: keep-aliveKeep-Alive: timeout=5Transfer-Encoding: chunked {"hata":"Eşya bulunamadı"}

1export default function DukkanYukleniyor() {2    return (3        <main>4            <p className="soluk">Dükkân açılıyor…</p>5        </main>6    )7}

1"use client"2 3type Props = {4    error: Error & { digest?: string }5    retry: () => void6}7 8export default function DukkanHatasi({ error, retry }: Props) {9    return (10        <main>11            <h1>Dükkân şu an kapalı</h1>12            <p className="soluk">Eşyalar getirilemedi. Hata kodu: {error.digest}</p>13            <button className="dugme" onClick={() => retry()}>Yeniden dene</button>14        </main>15    )16}

2NEXT_PUBLIC_YAMA=16.20

21            </button>22            <p className="soluk">Fiyatlar {process.env.NEXT_PUBLIC_YAMA} yamasına göre.</p>23        </div>