Blok 6 projesi: tam yığın uygulama

Altıncı bloğun sonuna geldin: TypeScript, React ve Next.js'i öğrendin. Bu derste hepsini tek bir gerçek uygulamada birleştiriyorsun: Maç Notları. Maçtan sonra aklında kalanı yazıyorsun ("Zed'e karşı E'yi erken harcadım"), uygulama notlarını saklıyor ve hangi şampiyonda ne kadar kazandığını gösteriyor. Şifre yok: GitHub ya da Discord hesabınla giriyorsun. Herkes yalnız kendi notlarını görüyor. Dersin sonunda uygulama internette, kendi adresinde çalışıyor olacak; GitHub'da README'si ve ekran görüntüleriyle duran, iş başvurusunda gösterebileceğin bir proje.

Proje dersi uzun. Bir oturumda bitirmek zorunda değilsin; her ana bölümün sonunda uygulama çalışır durumda kalıyor.

#Plan: kod yazmadan önce

Ders 38'de API'yi yazmadan önce bir sözleşme yazmıştın: hangi adres, hangi cevap. Bir web uygulamasında da aynısını yaparsın, yalnız bu kez üç şey planlanır: kullanıcının yapabilecekleri, sayfalar ve veri. Plansız başlarsan yarı yolda bir tabloyu baştan kurman ya da yazdığın sayfayı çöpe atman gerekir.

#Kullanıcı ne yapabilecek?

• GitHub ya da Discord hesabıyla giriş yapar, çıkış yapar.
• Bir maç notu yazar: şampiyon, sonuç (galibiyet ya da kayıp), tarih ve not metni.
• Notlarını kart kart görür, birine tıklayınca tamamını okur.
• Notunu düzenler ya da siler.
• İstatistik sayfasında şampiyon başına maç sayısını ve galibiyet oranını görür.
• Başkasının notunu göremez, değiştiremez, silemez. Bu son madde bir özellik değil, bir kural; bütün dersin omurgası.

#Sayfalar

Son satırdaki adresleri sen yazmayacaksın; birazdan kuracağın giriş kütüphanesi kendisi karşılayacak.

#Veri modeli

Hangi tablolar gerekiyor? Bir tanesi belli: notlar. Her not bir kullanıcıya ait; yani bir de kullanıcılar tablosu var ve notlar ona yabancı anahtarla bağlı, bire-çok: bir kullanıcının çok notu olur, bir notun tek sahibi.

Giriş sistemi üç tablo daha ister: açık oturumlar, kullanıcının hangi sağlayıcıyla (GitHub mı, Discord mu) bağlandığı ve giriş sırasında kısa süre tutulan doğrulama kayıtları. Bu dört tabloyu birazdan kuracağın kütüphane tarif edecek; sen yalnız notlar'ı yazacaksın. Tabloların ve aralarındaki bağların resmine bakmak, hepsini kafanda tutmaktan kolaydır:

Birkaç karar ve sebepleri:

• kullanici_id integer, REFERENCES kullanicilar(id) ON DELETE CASCADE. Kullanıcı silinirse notları da silinsin (Ders 36'daki ON DELETE). Sahibi olmayan not anlamsız.
• sonuc text CHECK (sonuc IN ('galibiyet', 'kayıp')). İki değer dışında bir şey veritabanına hiç girmesin (Ders 35). Formda zod da denetleyecek; kısıt, kodundaki bir unutkanlığa karşı ikinci kilit.
• tarih date. Maçın oynandığı gün; saat gerekmiyor. olusturuldu timestamptz DEFAULT now() ise notun yazıldığı an, kendiliğinden dolar.
• kullanici_id üzerinde bir indeks. Hemen her sorgu "bu kullanıcının notları" diye başlayacak; indeks, tablo büyüdükçe bu aramayı hızlı tutar.
• Sütun adları: bizim tablomuz Ders 33'ten beri olduğu gibi Türkçe ve snake_case. Better Auth'un sütunları İngilizce ve camelCase (userId, expiresAt); onları kütüphane belirliyor. İkisi aynı veritabanında yan yana yaşayabilir.

#Proje ve veritabanı

#Yeni proje

Komut Ders 45'tekinin aynısı, yalnız adı farklı. C:\kod klasöründe:

PS C:\kod> npx create-next-app@latest mac-notlari --ts --app --tailwind --eslint --no-src-dir --import-alias "@/*" --no-react-compiler --no-cache-components --use-npm

Sonda Success! Created mac-notlari at C:\kod\mac-notlari yazar; create-next-app Git deposunu da kurup ilk kaydı alır. Klasörü VS Code'da aç (code mac-notlari) ve ilk paketleri kur: veritabanı sürücüsü pg, doğrulama için zod ve giriş kütüphanesi better-auth (birazdan tanıyacaksın). pg'nin tipleri yine ayrı pakette:

PS C:\kod\mac-notlari> npm install better-auth pg zod added 36 packages, and audited 394 packages in 18s 149 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\mac-notlari> npm install -D @types/pg added 1 package, and audited 395 packages in 1s...

Bu ders Next.js 16.4.0, better-auth 1.7.7, pg 8.23.1 ve zod 4.6.6 ile denendi; npm view better-auth version dersi yazarken 1.7.7 diyordu. 5 high severity vulnerabilities ve install-scripts satırları Ders 43'ten tanıdık: şablondaki ESLint'ten geliyor, npm audit fix --force çalıştırma.

Şablonu temizle. app/globals.css'te yalnız ilk satır kalsın:

1@import "tailwindcss";

Son olarak Ders 45'teki düğmeyi getir. VS Code'un dosya listesinde proje kökünde components adında bir klasör aç. Sonra Windows'un Dosya Gezgini'nde (İngilizce Windows'ta File Explorer) C:\kod\stil-atolyesi\components\Dugme.tsx dosyasını kopyala ve C:\kod\mac-notlari\components klasörüne yapıştır. Dosyaya dokunma; bu derste tur, type, disabled ve onClick özellikleriyle aynen kullanacaksın.

#Neon'da proje ve iki dal

Ders 38'deki düzeni tekrarlıyorsun: canlı veri production dalında, geliştirme onun bir kopyasında.

Düğme adları Ekim 2026'daki Neon arayüzüne göre; değişmiş olabilir. Proje kökünde (package.json'ın yanında) .env.local dosyasını aç ve dizeyi yaz; sonundaki sslmode=require'ı Ders 37'deki gibi verify-full yap:

1DATABASE_URL=postgresql://neondb_owner:SIFREN@ep-ornek-123456-pooler.eu-central-1.aws.neon.tech/neondb?sslmode=verify-full&channel_binding=require

Ders 44'teki lib/db.ts'i de aynı yolla getir: proje kökünde lib klasörünü aç, C:\kod\next-rehber\lib\db.ts'i oraya kopyala. İlk satırında import "server-only" var; birazdan bu satır sana bir ders verecek.

#Giriş: Better Auth

#Neden hazır bir kütüphane?

Ders 31'de bir giriş sisteminin parçalarını kendin yazdın: şifreyi hash'leyip tuzladın, oturumu bir Map'te tuttun, çereze HttpOnly ve SameSite verdin, OAuth akışını adım adım izledin. Aynı dersin sonunda kural da vardı: gerçek bir üründe bunu sıfırdan yazma. Bir alanı unutmak (çerezin süresi, state denetimi, oturumun sunucuda silinmesi) bütün kapıyı açar.

Next.js için yıllarca en çok kullanılan kütüphane Auth.js'ti (eski adıyla NextAuth). 2025'te Auth.js projesi Better Auth'a katıldı; Auth.js'in kendi sitesi bugün "The Auth.js project is now part of Better Auth" diyor; Better Auth'un belgelerinde de "Migrating from Auth.js to Better Auth" adlı bir geçiş rehberi var. Bu derste doğrudan Better Auth'u kullanıyorsun: TypeScript ile yazılmış, Next.js'e resmî entegrasyonu olan, açık kaynak bir kimlik kütüphanesi. Kullanıcıları, oturumları ve sağlayıcı hesaplarını senin veritabanında tutar; yani Neon'daki pg havuzunu ona verirsin, başka bir servise üye olmazsın.

#Gizli anahtar ve adres

Better Auth iki ayara bakar. BETTER_AUTH_SECRET, oturum çerezini imzalamakta kullanılan sırdır: çerezi değiştiren biri imzayı tutturamaz (Ders 31'deki imza fikri). BETTER_AUTH_URL uygulamanın adresidir; GitHub'a "işin bitince kullanıcıyı şuraya geri gönder" derken bu adresi kullanır. Sırrı Better Auth'un komut satırı aracı üretir:

PS C:\kod\mac-notlari> npx auth@latest secretAdd the following to your .env file:# Auth SecretBETTER_AUTH_SECRET=ae69cf7c9eca19728734aeafe8d99f6a61dade0824d2dbb1036a3423c10d51f3

auth paketi Better Auth'un komut satırı aracı (npm view auth description: "The CLI for Better Auth"). npx onu kurmadan indirip çalıştırır. Değer her seferinde rastgele; seninki farklı olacak ve sende kalacak. Mesaj ".env dosyasına ekle" diyor; Next'te bizim dosyamız .env.local:

1DATABASE_URL=postgresql://neondb_owner:SIFREN@ep-ornek-123456-pooler.eu-central-1.aws.neon.tech/neondb?sslmode=verify-full&channel_binding=require2BETTER_AUTH_SECRET=ae69cf7c9eca19728734aeafe8d99f6a61dade0824d2dbb1036a3423c10d51f33BETTER_AUTH_URL=http://localhost:3000

#lib/auth.ts: kütüphanenin ayarları

lib klasöründe auth.ts dosyasını aç:

1import { betterAuth } from "better-auth"2import { nextCookies } from "better-auth/next-js"3import { pool } from "@/lib/db"4 5export const gelistirmede = process.env.NODE_ENV === "development"6 7export const auth = betterAuth({8    database: pool,9    user: { modelName: "kullanicilar" },10    session: { modelName: "oturumlar" },11    account: { modelName: "hesaplar" },12    verification: { modelName: "dogrulamalar" },13    advanced: {14        database: { generateId: "serial" },15    },16    socialProviders: {17        github: {18            clientId: process.env.GITHUB_CLIENT_ID as string,19            clientSecret: process.env.GITHUB_CLIENT_SECRET as string,20        },21        discord: {22            clientId: process.env.DISCORD_CLIENT_ID as string,23            clientSecret: process.env.DISCORD_CLIENT_SECRET as string,24        },25    },26    emailAndPassword: {27        enabled: gelistirmede,28    },29    plugins: [nextCookies()],30})

Satır satır:

• database: pool: Ders 44'teki havuz. Better Auth sorgularını bu havuzla çalıştırır; ayrı bir bağlantı açmaz.
• modelName: Better Auth'un tabloları varsayılan olarak user, session, account, verification adlarını taşır. user Postgres'te ayrılmış bir sözcük; her sorguda çift tırnakla yazmak gerekir. Türkçe adlar hem bizim düzenimize uyuyor hem bu tuzağı ortadan kaldırıyor. Sütun adları İngilizce kalıyor.
• generateId: "serial": kullanıcı kimlikleri 1, 2, 3… diye artan sayılar olsun (Ders 33'teki kimlik sütunu). Varsayılan, rastgele metin kimliklerdir. Sayı seçtik, çünkü notlar.kullanici_id integer olacak ve sonraki derslerde bu kimliği sayı olarak kullanacaksın.
• socialProviders: GitHub ve Discord. Değerleri birazdan sağlayıcıların sitelerinden alacaksın. as string, TypeScript'e "bu değer tanımlı olacak" sözü; tanımlı değilse ne olduğunu hata kartlarında göreceksin.
• emailAndPassword.enabled: gelistirmede: e-posta ve şifreyle giriş yalnız geliştirmede açık. Neden gerektiğini "Deneme girişi" bölümünde göreceksin. NODE_ENV, npm run dev'de "development", npm run build ve yayında "production" olur; değeri Next kendisi koyar.
• nextCookies(): Better Auth'un çerez yazan işlerini (giriş, çıkış) bir Server Action içinden çağıracaksın. Server Action'ın cevabına çerez eklemek Next'in kendi yöntemini ister; bu eklenti onu yapar. Belgesi listede en sonda durmasını istiyor.

Şimdi ortam değişkenleri. .env.local'a dört satır daha ekle; değerleri sağlayıcı uygulamalarını açınca dolduracaksın, şimdilik boş kalsınlar:

4GITHUB_CLIENT_ID=5GITHUB_CLIENT_SECRET=6DISCORD_CLIENT_ID=7DISCORD_CLIENT_SECRET=

#Tabloları kurmak

Better Auth tablolarını tarif edebilir: komut satırı aracı lib/auth.ts'i okur, veritabanına bakar ve eksik tabloların SQL'ini bir dosyaya yazar. Dene:

PS C:\kod\mac-notlari> npx auth@latest generate --output schema.sql --yes[#better-auth]: Couldn't read your auth config. Error: Cannot find module 'server-only'Require stack:- C:\kod\mac-notlari\lib\db.ts    at Module._resolveFilename (node:internal/modules/cjs/loader:1564:15)    ...

lib/db.ts'in son hâli:

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

Komutu yeniden çalıştır. Sondaki --yes, aracın soracağı "şu dosyaya yazayım mı?" sorusuna önceden evet der:

PS C:\kod\mac-notlari> npx auth@latest generate --output schema.sql --yes(node:26800) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///C:/kod/mac-notlari/lib/auth.ts?_1 is not specified and it doesn't parse as CommonJS.Reparsing as ES module because module syntax was detected. This incurs a performance overhead....2026-10-12T02:56:23.691Z ERROR [Better Auth]: Database schema mismatch   Missing tables    kullanicilar, oturumlar, hesaplar, dogrulamalar   help: Run `npx auth migrate` to add the missing tables and columns.🚀 Schema was generated successfully!

Kırmızı ERROR seni korkutmasın. Better Auth veritabanına baktı ve "dört tablo eksik" dedi; zaten bu yüzden SQL istiyoruz. MODULE_TYPELESS_PACKAGE_JSON uyarısı Ders 44'teki zod-dene.ts'te gördüğünle aynı, zararsız. Proje kökünde schema.sql dosyası oluştu:

1create table "kullanicilar" ("id" integer GENERATED BY DEFAULT AS IDENTITY not null primary key, "name" text not null, "email" text not null unique, "emailVerified" boolean not null, "image" text, "createdAt" timestamptz default CURRENT_TIMESTAMP not null, "updatedAt" timestamptz default CURRENT_TIMESTAMP not null);2 3create table "oturumlar" ("id" integer GENERATED BY DEFAULT AS IDENTITY not null primary key, "expiresAt" timestamptz not null, "token" text not null unique, "createdAt" timestamptz default CURRENT_TIMESTAMP not null, "updatedAt" timestamptz not null, "ipAddress" text, "userAgent" text, "userId" integer not null references "kullanicilar" ("id") on delete cascade);4 5create table "hesaplar" ("id" integer GENERATED BY DEFAULT AS IDENTITY not null primary key, "accountId" text not null, "providerId" text not null, "userId" integer not null references "kullanicilar" ("id") on delete cascade, "accessToken" text, "refreshToken" text, "idToken" text, "accessTokenExpiresAt" timestamptz, "refreshTokenExpiresAt" timestamptz, "scope" text, "password" text, "createdAt" timestamptz default CURRENT_TIMESTAMP not null, "updatedAt" timestamptz not null);6 7create table "dogrulamalar" ("id" integer GENERATED BY DEFAULT AS IDENTITY not null primary key, "identifier" text not null, "value" text not null, "expiresAt" timestamptz not null, "createdAt" timestamptz default CURRENT_TIMESTAMP not null, "updatedAt" timestamptz default CURRENT_TIMESTAMP not null);8 9create index "oturumlar_userId_idx" on "oturumlar" ("userId");10 11create index "hesaplar_userId_idx" on "hesaplar" ("userId");12 13create index "dogrulamalar_identifier_idx" on "dogrulamalar" ("identifier");

Satırlar uzun ama her şeyi tanıyorsun: kimlik sütunları, not null, unique, references … on delete cascade, indeksler. Tablo ve sütun adları çift tırnaklı, çünkü sütunlar büyük harf içeriyor; Postgres tırnaksız adları küçük harfe çevirir (Ders 37'deki AS "takmaAd" gibi). oturumlar, Ders 31'de Map'te tuttuğun oturumların veritabanındaki hâli: rastgele bir token, sahibi (userId) ve son kullanma anı (expiresAt). hesaplar, bir kullanıcının hangi sağlayıcıyla bağlandığını tutar: providerId github ya da discord, accountId kullanıcının o sitedeki numarası.

Dosyanın sonuna bir boş satır bırakıp kendi tablonu ekle:

15CREATE TABLE notlar (16    id integer GENERATED ALWAYS AS IDENTITY PRIMARY KEY,17    kullanici_id integer NOT NULL REFERENCES kullanicilar(id) ON DELETE CASCADE,18    sampiyon text NOT NULL,19    sonuc text NOT NULL CHECK (sonuc IN ('galibiyet', 'kayıp')),20    tarih date NOT NULL,21    metin text NOT NULL,22    olusturuldu timestamptz NOT NULL DEFAULT now()23);24 25CREATE INDEX notlar_kullanici_id_idx ON notlar (kullanici_id);

Neon'da SQL Editor'ü aç, üstteki dal seçicisinden gelistirme'yi seç, schema.sql'in tamamını yapıştır ve Run'a bas. Sol menüdeki Tables sayfasında beş tablo görünmeli.

CREATE TABLE notlar (    id integer GENERATED ALWAYS AS IDENTITY PRIMARY KEY,    kullanici_id integer NOT NULL REFERENCES kullanicilar(id) ON DELETE CASCADE,    sampiyon text NOT NULL);

ERROR:  relation "kullanicilar" does not exist

#Kapı: /api/auth

Giriş akışı tarayıcıdan sunucuya birkaç istekle ilerler: "GitHub ile girişi başlat", "GitHub'dan döndüm", "oturumum hâlâ geçerli mi?" Bunların hepsi Better Auth'un adresleri. Onları tek bir Route Handler'a bağlarsın. app/api/auth/[...all]/route.ts:

1import { toNextJsHandler } from "better-auth/next-js"2import { auth } from "@/lib/auth"3 4export const { GET, POST } = toNextJsHandler(auth)

[...all] Ders 43'teki [id]'nin genişi: [id] adresin bir parçasını yakalar, [...all] geri kalanının hepsini. /api/auth/sign-in/social, /api/auth/callback/github, /api/auth/get-session: hepsi bu dosyaya düşer. toNextJsHandler(auth) bir GET ve bir POST fonksiyonu üretir; sen onları adlarıyla dışa aktarırsın (Ders 44'teki kural: Route Handler'da metot adları büyük harf).

#GitHub'da OAuth uygulaması açmak

GitHub, kimin adına konuştuğunu bilmek ister: "Maç Notları adlı uygulama, şu adrese geri dönmek üzere senden izin istiyor." Bunun için GitHub'a uygulamanı tanıtırsın; o da sana bir kimlik ve bir sır verir.

Adımlar GitHub'ın "Creating an OAuth app" belgesine göre yazıldı (Ekim 2026); arayüz değişmiş olabilir. İki değeri .env.local'a yaz:

4GITHUB_CLIENT_ID=Ov23liDenemeKimlik015GITHUB_CLIENT_SECRET=buraya-github-in-verdigi-sir

#Discord'da uygulama açmak

İsteğe bağlı: Discord hesabın yoksa bu bölümü geç; uygulama GitHub'la çalışır.

Discord geliştirici portalının arayüzü sık değişir; bir düğmeyi bulamazsan sayfada "OAuth2" ve "Redirects" sözcüklerini ara. Değerleri .env.local'daki DISCORD_CLIENT_ID ve DISCORD_CLIENT_SECRET satırlarına yaz.

#Giriş sayfası

Tarayıcı tarafında Better Auth'un küçük bir istemcisi var. lib/auth-client.ts:

1import { createAuthClient } from "better-auth/react"2 3export const authClient = createAuthClient()

Adres vermiyoruz: uygulama ile giriş kapısı aynı sitede, istemci istekleri kendi sitesine gönderir. Düğmeler tıklanınca çalıştığı için bir istemci bileşeni olacak. app/giris/GirisDugmeleri.tsx:

1"use client"2 3import { useState } from "react"4import Dugme from "@/components/Dugme"5import { authClient } from "@/lib/auth-client"6 7export default function GirisDugmeleri() {8    const [bekliyor, setBekliyor] = useState(false)9    const [hata, setHata] = useState("")10 11    async function girisYap(saglayici: "github" | "discord") {12        setBekliyor(true)13        setHata("")14        const { error } = await authClient.signIn.social({ provider: saglayici, callbackURL: "/notlar" })15        if (error) {16            console.error(error)17            setHata("Giriş başlatılamadı. Biraz sonra yeniden dene.")18            setBekliyor(false)19        }20    }21 22    return (23        <div className="mt-6 flex flex-col gap-3">24            <Dugme disabled={bekliyor} onClick={() => girisYap("github")}>GitHub ile giriş yap</Dugme>25            <Dugme tur="ikincil" disabled={bekliyor} onClick={() => girisYap("discord")}>Discord ile giriş yap</Dugme>26            {hata && <p role="alert" className="text-sm text-red-700 dark:text-red-400">{hata}</p>}27        </div>28    )29}

• authClient.signIn.social({ provider, callbackURL }): sunucudaki /api/auth/sign-in/social'a bir POST atar. Sunucu GitHub'ın izin sayfasının adresini hazırlar; istemci tarayıcıyı oraya götürür. callbackURL her şey bitince kullanıcının hangi sayfamıza döneceği.
• Başarılıysa sayfa zaten değişiyor; o yüzden yalnız hata durumunu ele alıyoruz. { error } Ders 12'deki parçalama: dönen objeden yalnız error alanını al. Better Auth istemcisi hata fırlatmaz, sonucu error alanında verir.
• bekliyor: istek sürerken iki düğme de kapalı; sabırsız biri iki giriş başlatamaz.

Sayfanın kendisi bir sunucu bileşeni. Giriş yapmış biri bu sayfaya gelirse doğrudan notlarına gitsin; bunun için oturumu okuyan bir yardımcıya ihtiyacın var, birazdan yazacaksın. app/giris/page.tsx:

1import type { Metadata } from "next"2import { redirect } from "next/navigation"3import Dugme from "@/components/Dugme"4import { gelistirmede } from "@/lib/auth"5import { oturumdakiKullaniciId } from "@/lib/oturum"6import { denemeGirisi } from "./actions"7import GirisDugmeleri from "./GirisDugmeleri"8 9export const metadata: Metadata = {10    title: "Giriş",11}12 13export default async function GirisSayfasi() {14    if ((await oturumdakiKullaniciId()) !== null) {15        redirect("/notlar")16    }17 18    return (19        <section className="mx-auto max-w-sm">20            <h1 className="text-2xl font-bold">Giriş yap</h1>21            <p className="mt-2 text-zinc-600 dark:text-zinc-400">Şifre yok: GitHub ya da Discord hesabınla gir.</p>22            <GirisDugmeleri />23 24            {gelistirmede && (25                <div className="mt-10 rounded-xl border-2 border-dashed border-amber-500 p-4">26                    <h2 className="font-bold">Deneme girişi</h2>27                    <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Yalnız geliştirme sunucusunda görünür.</p>28                    <div className="mt-3 flex gap-3">29                        {["Deniz", "Mert"].map((ad) => (30                            <form key={ad} action={denemeGirisi}>31                                <input type="hidden" name="ad" value={ad} />32                                <Dugme type="submit" tur="ikincil">{ad} olarak gir</Dugme>33                            </form>34                        ))}35                    </div>36                </div>37            )}38        </section>39    )40}

Alttaki kesik çerçeveli kutu ve denemeGirisi yeni; ikisini birkaç bölüm sonra açıklıyoruz. Önce giriş akışının kendisi.

#Düğmeye basınca ne olur?

Ders 31'de OAuth akışını dört adımda okumuştun. Şimdi aynı akış senin uygulamanda, gerçek adreslerle:

Uygulamanın ikinci adımda verdiği ve tarayıcının üçüncü adımda gittiği adres aşağıda. Uygulamayı denerken yakaladık (port 3000'e çevrildi; kimlik, state ve code_challenge sende farklı olur):

https://github.com/login/oauth/authorize?response_type=code&client_id=Ov23liDenemeKimlik01&state=0p0rdl-sDA5gVl6yKhWFIQdHa_Mbq0b-&scope=read%3Auser+user%3Aemail&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fgithub&code_challenge_method=S256&code_challenge=KjN1h4Naw1uHfLNRD7D3iveNI8mXZWjmI3nQAD3zvsc

Discord'un adresi aynı kalıpta: https://discord.com/api/oauth2/authorize?…&scope=identify+email&redirect_uri=…%2Fapi%2Fauth%2Fcallback%2Fdiscord.

Altıncı adımdaki istemci sırrı tarayıcıya hiç inmez: istek sunucundan GitHub'a gider. Kullanıcının GitHub şifresi ise uygulamana hiç uğramaz. Sekizinci adımda Better Auth oturumlar tablosuna bir satır ekler ve tarayıcıya better-auth.session_token adlı bir çerez yazar. Denemede gördüğümüz işaretler: HttpOnly, SameSite=Lax. Yayında, yani adres https ile başlayınca, bir de Secure eklenir ve çerezin adı __Secure-better-auth.session_token olur (Ders 31). Oturum varsayılan olarak 7 gün geçerli.

2026-10-12T03:07:32.150Z WARN [Better Auth]: Social provider github is missing clientId or clientSecret2026-10-12T03:07:32.151Z WARN [Better Auth]: Social provider discord is missing clientId or clientSecret2026-10-12T03:07:34.840Z ERROR [Better Auth]: Error Error: OAuth provider requires clientId    at ignore-listed frames# SERVER_ERROR:  Error: OAuth provider requires clientId    at ignore-listed frames POST /api/auth/sign-in/social 500 in 358ms (next.js: 98ms, application-code: 259ms)

#Deneme girişi: yalnız geliştirmede

İki sorun var. Birincisi, GitHub uygulamasını açmadan da projede ilerleyebilmek istersin. İkincisi daha önemli: yetkiyi denemek için iki ayrı kullanıcıya ihtiyacın olacak. Biri notunu yazacak, öbürü ona ulaşmaya çalışacak. İki GitHub hesabın yoksa bunu yapamazsın.

Çözüm, yalnız geliştirme sunucusunda açık bir arka kapı: Better Auth'un e-posta ve şifreyle girişini lib/auth.ts'te enabled: gelistirmede ile açtın. Şimdi iki düğmelik bir Server Action yaz. app/giris/actions.ts:

1"use server"2 3import { headers } from "next/headers"4import { redirect } from "next/navigation"5import { auth, gelistirmede } from "@/lib/auth"6 7export async function cikisYap() {8    await auth.api.signOut({ headers: await headers() })9    redirect("/giris")10}11 12const DENEME_SIFRESI = "deneme-sifresi-46"13 14export async function denemeGirisi(formData: FormData) {15    if (!gelistirmede) {16        throw new Error("Deneme girişi yalnız geliştirmede açık.")17    }18    const ad = formData.get("ad") === "Mert" ? "Mert" : "Deniz"19    const email = ad.toLowerCase() + "@ornek.com"20 21    try {22        await auth.api.signInEmail({ body: { email, password: DENEME_SIFRESI } })23    } catch {24        await auth.api.signUpEmail({ body: { name: ad, email, password: DENEME_SIFRESI } })25    }26    redirect("/notlar")27}

• auth.api.…: Better Auth'un her adresi sunucuda bir fonksiyon olarak da çağrılabilir. signInEmail girişi dener; kullanıcı yoksa hata fırlatır, biz de signUpEmail ile hesabı açarız. Kayıt, kullanıcıyı aynı anda içeri de alır. Çerezleri cevaba nextCookies() eklentisi yazar.
• cikisYap: signOut oturumu oturumlar tablosundan siler ve çerezi temizler. headers() ile tarayıcının gönderdiği başlıkları (çerez dahil) veriyoruz: kütüphane kimin çıktığını çerezden anlar.
• formData.get("ad") === "Mert" ? "Mert" : "Deniz": formdan ne gelirse gelsin yalnız iki addan biri kullanılır. Biri gizli kutuya başka bir ad yazsa da üçüncü bir kullanıcı açılmaz.
• Şifre kodun içinde: yalnız geliştirmede kullanılan, kimseyi korumayan bir değer olduğu için. Gerçek bir şifre asla koda yazılmaz.

Düğmeleri birazdan, sunucuyu açınca deneyeceksin. Önce giriş sayfasının içe aktardığı lib/oturum.ts dosyasını yazman gerekiyor; o olmadan sayfa açılmaz.

#Oturumdaki kullanıcı

Her sayfa ve her Server Action aynı soruyu soracak: "şu an kim giriş yapmış?" Cevabı tek bir dosyada topla. lib/oturum.ts:

1import "server-only"2import { headers } from "next/headers"3import { redirect } from "next/navigation"4import { auth } from "@/lib/auth"5 6export async function oturumuGetir() {7    return auth.api.getSession({ headers: await headers() })8}9 10export async function oturumdakiKullaniciId(): Promise<number | null> {11    const oturum = await oturumuGetir()12    return oturum ? Number(oturum.user.id) : null13}14 15export async function girisGerekli(): Promise<number> {16    const kullaniciId = await oturumdakiKullaniciId()17    if (kullaniciId === null) {18        redirect("/giris")19    }20    return kullaniciId21}

• auth.api.getSession({ headers }): isteğin çerezini okur, imzasını BETTER_AUTH_SECRET ile denetler, oturumlar tablosunda süresi dolmamış bir satır arar. Bulursa { session, user } döndürür, bulamazsa null.
• Number(oturum.user.id): kimlikler veritabanında sayı, ama Better Auth onları metin olarak verir ("1"). Belgesi bunu açıkça söylüyor: sayı kimliklerde "sayının metin hâlini alırsın, bu normal". Bizim sorgularımız ve sonraki dersler sayı kullanacak; çeviriyi tek bir yerde yapıyoruz.
• girisGerekli(): giriş yoksa kullanıcıyı /giris'e gönderir, varsa kimliği döndürür. redirect bir hata fırlatarak çalıştığı için (Ders 44) return kullaniciId satırına yalnız giriş varsa gelinir; TypeScript da dönüş tipinin number olduğunu bilir.

Şimdi her sayfanın çerçevesi. app/layout.tsx'in içini tamamen değiştir:

1import type { Metadata } from "next"2import Link from "next/link"3import { cikisYap } from "@/app/giris/actions"4import { oturumuGetir } from "@/lib/oturum"5import { odak } from "@/lib/stil"6import "./globals.css"7 8export const metadata: Metadata = {9    title: { default: "Maç Notları", template: "%s · Maç Notları" },10    description: "Maçlarından öğrendiklerini not al, hangi şampiyonda ne kadar kazandığını gör.",11}12 13export default async function RootLayout({ children }: LayoutProps<"/">) {14    const oturum = await oturumuGetir()15 16    return (17        <html lang="tr" className="scheme-light-dark">18            <body className="bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">19                <header className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">20                    <nav className="mx-auto flex max-w-3xl flex-wrap items-center gap-x-5 gap-y-2 px-4 py-3">21                        <Link href="/" className={`text-lg font-bold ${odak}`}>Maç Notları</Link>22                        {oturum && (23                            <>24                                <Link href="/notlar" className={`hover:underline ${odak}`}>Notlarım</Link>25                                <Link href="/istatistik" className={`hover:underline ${odak}`}>İstatistik</Link>26                                <span className="ml-auto text-sm text-zinc-600 dark:text-zinc-400">{oturum.user.name}</span>27                                <form action={cikisYap}>28                                    <button type="submit" className={`cursor-pointer text-sm font-semibold hover:underline ${odak}`}>Çıkış</button>29                                </form>30                            </>31                        )}32                    </nav>33                </header>34                <main className="mx-auto max-w-3xl px-4 py-8">{children}</main>35            </body>36        </html>37    )38}

• title.template: alt sayfaların başlığı "Giriş" ise sekmede Giriş · Maç Notları yazar (Ders 43).
• Çıkış bir form, bağlantı değil: oturumu silen, yani iş yapan bir şey (Ders 45'teki kural: götüren bağlantı, iş yapan düğme). Bir Server Action'a bağlı olduğu için JavaScript yüklenmeden de çalışır.
• Ders 45'teki odak sabitini de bir dosyaya koy; birazdan iki sabit daha ekleyeceğiz. lib/stil.ts:

1export const odak = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500"2 3export const baglantiDugme = `inline-block rounded-lg bg-violet-700 px-4 py-2 font-semibold text-white hover:bg-violet-600 ${odak}`4 5export const girdi = `mt-1 block w-full rounded-lg border border-zinc-500 bg-white px-3 py-2 dark:bg-zinc-950 aria-invalid:border-red-700 dark:aria-invalid:border-red-400 ${odak}`

baglantiDugme düğme gibi görünen bağlantılar için (Ders 45'teki "Maç ekle"). girdi form kutuları için; aria-invalid: öneki, kutu aria-invalid="true" olduğunda kenarı kırmızı yapar. Hatalı kutuyu hem ekran okuyucuya hem göze aynı nitelik söylüyor.

Ana sayfa kısa. app/page.tsx:

1import Link from "next/link"2import { redirect } from "next/navigation"3import { oturumdakiKullaniciId } from "@/lib/oturum"4import { baglantiDugme } from "@/lib/stil"5 6export default async function AnaSayfa() {7    if ((await oturumdakiKullaniciId()) !== null) {8        redirect("/notlar")9    }10 11    return (12        <section className="py-10 text-center">13            <h1 className="text-3xl font-bold">Her maç bir ders</h1>14            <p className="mx-auto mt-3 max-w-md text-zinc-600 dark:text-zinc-400">15                Maçtan sonra aklında kalanı yaz: neyi iyi yaptın, neye dikkat edeceksin. Notların yalnız sana görünür.16            </p>17            <Link href="/giris" className={`mt-8 ${baglantiDugme}`}>Giriş yap</Link>18        </section>19    )20}

npm run dev ile sunucuyu başlat:

PS C:\kod\mac-notlari> npm run dev > mac-notlari@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 1619ms✓ Running next.config.ts took 73ms

http://localhost:3000/giris'i aç:

localhost:3000/giris

Önce deneme girişi: Deniz olarak gir'e bas. Next'in İngilizce 404 sayfası açılır (This page could not be found.), çünkü /notlar sayfası henüz yok. Giriş yine de oldu: menüde Notlarım, İstatistik, Deniz ve Çıkış var. Terminalde:

2026-10-12T04:27:32.999Z WARN [Better Auth]: User not found GET /notlar 404 in 328ms (next.js: 285ms, application-code: 43ms) POST /giris 200 in 516ms (next.js: 1.8ms, application-code: 515ms)  └─ ƒ denemeGirisi({}) in 166ms app/giris/actions.ts

User not found bir uyarı: signInEmail Deniz'i bulamadı, catch devreye girdi ve hesap açıldı. İkinci girişte bu satır çıkmaz. GET /notlar 404 satırı, eylemin sonundaki redirect("/notlar")'ın sonucu; o sayfayı birazdan yazacaksın. Şimdi Çıkış'a bas ve Mert olarak gir ile ikinci kullanıcıyı da aç; yetki bölümünde ona ihtiyacın olacak. Sonra Neon'da SQL Editor'den bak:

SELECT id, name, email FROM kullanicilar ORDER BY id;

hesaplar tablosunda ikisinin de providerId değeri credential ("şifreyle"); password sütununda şifrenin kendisi değil, 4ed80fec6d92e5fba6514411ebfb09d0:4fe9c16… gibi bir değer var. İki nokta üst üstenin solu tuz, sağı hash: Better Auth da Ders 31'deki gibi node:crypto'nun scrypt'ini kullanıyor.

GitHub uygulamasını açtıysan Çıkış'a basıp GitHub ile giriş yap'ı da dene: GitHub'ın izin sayfası açılır, Authorize'a basınca aynı 404 sayfasına dönersin ve menüde GitHub'daki adın görünür. İşin bitince yine Çıkış'a bas; notları birazdan Deniz'le yazacaksın. GitHub'la Deniz'den önce girdiysen kullanıcı numaraları sende bir kayar (GitHub hesabın 1, Deniz 2, Mert 3). Sorun değil; dersteki sorgularda kullanıcı numarası olarak 1 ve 2 yazan yerlere kendi numaralarını koy.

#Notlar: ekle, göster, düzenle, sil

#Şema ve tipler

Formdan gelecek verinin kuralları Ders 44'teki gibi bir zod şemasında. lib/notSemasi.ts:

1import { z } from "zod"2 3export const NotSemasi = z.object({4    sampiyon: z.string().trim().min(2, "Şampiyon adı en az 2 harf olmalı.").max(20, "Şampiyon adı en fazla 20 harf olabilir."),5    sonuc: z.enum(["galibiyet", "kayıp"], "Sonuç listeden seçilmeli."),6    tarih: z.iso.date("Tarih geçerli bir gün olmalı."),7    metin: z.string().trim().min(10, "Not en az 10 harf olmalı.").max(2000, "Not en fazla 2000 harf olabilir."),8})9 10export type NotVerisi = z.infer<typeof NotSemasi>11 12export type Not = NotVerisi & { id: number }13 14export type FormDurumu = {15    hatalar?: Record<string, string[] | undefined>16    degerler?: Record<string, string>17    mesaj?: string18}

• z.iso.date(…): metnin 2026-09-20 biçiminde, gerçekten var olan bir gün olmasını ister. Tarayıcının tarih kutusu (<input type="date">) değeri tam bu biçimde gönderir, ekranda 20.09.2026 gösterse bile.
• Not = NotVerisi & { id: number }: & iki tipi birleştirir: şemanın dört alanı artı id. Veritabanından gelen bir not böyle görünecek. Dosyada server-only yok, çünkü form bileşeni (istemci) de bu tipleri kullanacak.
• mesaj: Ders 44'teki FormDurumu'na bir alan ekledik. Alan hatası olmayan bir sorunu ("bu not bulunamadı") formun tepesinde göstermek için.

#Veri katmanı: her sorguda kullanıcı

lib/notlar.ts. Bu dosya dersin en önemli dosyası; her fonksiyonun ilk parametresine bak:

1import "server-only"2import { pool } from "@/lib/db"3import type { Not, NotVerisi } from "@/lib/notSemasi"4 5function gecerliId(id: string) {6    return /^\d{1,9}$/.test(id)7}8 9export async function notlariGetir(kullaniciId: number): Promise<Not[]> {10    const { rows } = await pool.query<Not>(11        `SELECT id, sampiyon, sonuc, tarih::text AS tarih, metin12         FROM notlar13         WHERE kullanici_id = $114         ORDER BY tarih DESC, id DESC`,15        [kullaniciId]16    )17    return rows18}19 20export async function notuGetir(kullaniciId: number, id: string): Promise<Not | undefined> {21    if (!gecerliId(id)) {22        return undefined23    }24    const { rows } = await pool.query<Not>(25        `SELECT id, sampiyon, sonuc, tarih::text AS tarih, metin26         FROM notlar27         WHERE id = $1 AND kullanici_id = $2`,28        [id, kullaniciId]29    )30    return rows[0]31}32 33export async function notEkle(kullaniciId: number, veri: NotVerisi): Promise<number> {34    const { rows } = await pool.query<{ id: number }>(35        `INSERT INTO notlar (kullanici_id, sampiyon, sonuc, tarih, metin)36         VALUES ($1, $2, $3, $4, $5)37         RETURNING id`,38        [kullaniciId, veri.sampiyon, veri.sonuc, veri.tarih, veri.metin]39    )40    return rows[0].id41}42 43export async function notuGuncelle(kullaniciId: number, id: string, veri: NotVerisi): Promise<boolean> {44    if (!gecerliId(id)) {45        return false46    }47    const { rowCount } = await pool.query(48        `UPDATE notlar49         SET sampiyon = $1, sonuc = $2, tarih = $3, metin = $450         WHERE id = $5 AND kullanici_id = $6`,51        [veri.sampiyon, veri.sonuc, veri.tarih, veri.metin, id, kullaniciId]52    )53    return rowCount === 154}55 56export async function notuSil(kullaniciId: number, id: string): Promise<boolean> {57    if (!gecerliId(id)) {58        return false59    }60    const { rowCount } = await pool.query(61        "DELETE FROM notlar WHERE id = $1 AND kullanici_id = $2",62        [id, kullaniciId]63    )64    return rowCount === 165}

• Her fonksiyon kullaniciId alır. Notlara dokunan hiçbir fonksiyon kullanıcısız çağrılamaz; TypeScript eksik parametreyi yakalar. Kimliğin nereden geldiğine dikkat: bu dosya bilmiyor, çağıran kod oturumdan getirecek.
• WHERE id = $1 AND kullanici_id = $2: "1 numaralı not" değil, "1 numaralı not, eğer bu kullanıcınınsa". Sahibi başkaysa sorgu boş döner; bu bir hata değil, "öyle bir not yok" cevabı. Sebebini yetki bölümünde göreceksin.
• rowCount === 1: UPDATE ve DELETE kaç satıra dokunduklarını söyler (Ders 37). 0 ise ya böyle bir not yok ya da bu kullanıcının değil; çağıran ikisini ayırt etmeyecek.
• Ters tırnaklı sorgular: SQL'i bir şablon metne yazdık, çünkü ters tırnaklı metin satırlara bölünebiliyor; şart satırı kendi satırında, göze çarpıyor. İçinde ${…} yok: değerler yine $1, $2 ile ayrı gidiyor (Ders 37).
• gecerliId: Ders 44'teki abc tuzağının çaresi. Adresten ya da formdan gelen kimlik bir sayı değilse sorgu hiç gitmez.
• tarih::text AS tarih: date sütununu metne çeviriyoruz. Neden gerekli olduğunu bir hata kartında göreceksin.

#Liste sayfası

Her not bir kart. Ders 45'teki MacKarti'nın kardeşi, bu kez tıklanabilir. components/NotKarti.tsx:

1import Link from "next/link"2import type { Not } from "@/lib/notSemasi"3import { odak } from "@/lib/stil"4import { tarihYaz } from "@/lib/tarih"5 6const sonucSiniflari = {7    galibiyet: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300",8    kayıp: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300",9}10 11export default function NotKarti({ not }: { not: Not }) {12    const galibiyet = not.sonuc === "galibiyet"13    return (14        <Link15            href={`/notlar/${not.id}`}16            className={`block rounded-xl border border-zinc-200 bg-white p-4 shadow-sm hover:border-violet-400 dark:border-zinc-800 dark:bg-zinc-900 ${odak}`}17        >18            <div className="flex items-center justify-between gap-3">19                <h2 className="text-lg font-bold">{not.sampiyon}</h2>20                <span className={`rounded-full px-2.5 py-0.5 text-sm font-semibold ${sonucSiniflari[not.sonuc]}`}>21                    <span aria-hidden="true">{galibiyet ? "✓ " : "✗ "}</span>22                    {galibiyet ? "Galibiyet" : "Kayıp"}23                </span>24            </div>25            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{tarihYaz(not.tarih)}</p>26            <p className="mt-2 line-clamp-2">{not.metin}</p>27        </Link>28    )29}

kayıp: bir obje anahtarı; anahtarlarda Türkçe harf serbest, değerle aynı yazılması yeter. line-clamp-2 uzun metni iki satırda keser ve sonuna … koyar. Tarihi 20 Eylül 2026 diye yazan küçük yardımcı, lib/tarih.ts:

1export function tarihYaz(tarih: string) {2    return new Date(tarih).toLocaleDateString("tr-TR", {3        day: "numeric",4        month: "long",5        year: "numeric",6        timeZone: "UTC",7    })8}

toLocaleDateString, Ders 17'deki toLocaleString'in yalnız tarihi yazan kardeşi; ikinci argüman neyin nasıl yazılacağını söyler. new Date("2026-09-20") o günün UTC gece yarısını verir; timeZone: "UTC" yazmasaydık tarih, kodun çalıştığı bilgisayarın saat dilimine göre yazılırdı: Türkiye'deki bir bilgisayarda sorun olmazdı, ama saat dilimi UTC'nin gerisinde olan bir yerde (ör. ABD'deki bir sunucuda) bir önceki gün çıkardı.

Sayfa. app/notlar/page.tsx:

1import type { Metadata } from "next"2import Link from "next/link"3import NotKarti from "@/components/NotKarti"4import { notlariGetir } from "@/lib/notlar"5import { girisGerekli } from "@/lib/oturum"6import { baglantiDugme } from "@/lib/stil"7 8export const metadata: Metadata = {9    title: "Notlarım",10}11 12export default async function NotlarSayfasi() {13    const kullaniciId = await girisGerekli()14    const notlar = await notlariGetir(kullaniciId)15 16    return (17        <>18            <div className="flex flex-wrap items-center justify-between gap-4">19                <h1 className="text-3xl font-bold">Notlarım</h1>20                <Link href="/notlar/yeni" className={baglantiDugme}>Yeni not</Link>21            </div>22 23            {notlar.length === 0 ? (24                <div className="mt-6 rounded-xl border-2 border-dashed border-zinc-300 px-6 py-12 text-center dark:border-zinc-700">25                    <h2 className="text-lg font-bold">Henüz not yok</h2>26                    <p className="mt-1 text-zinc-600 dark:text-zinc-400">Bir maç bitince aklında kalanı yaz; burada kart kart birikir.</p>27                    <Link href="/notlar/yeni" className={`mt-6 ${baglantiDugme}`}>İlk notunu yaz</Link>28                </div>29            ) : (30                <ul className="mt-6 grid gap-4 sm:grid-cols-2">31                    {notlar.map((not) => (32                        <li key={not.id}>33                            <NotKarti not={not} />34                        </li>35                    ))}36                </ul>37            )}38        </>39    )40}

İki satır sayfanın bütün güvenliği: girisGerekli() kimliği oturumdan alır, notlariGetir(kullaniciId) yalnız o kullanıcının notlarını getirir. Adreste, formda, hiçbir yerde kullanıcı numarası yok. Liste boşken Ders 45'teki boş durum: neden boş olduğunu söylüyor ve ilk adımı gösteriyor.

#Yeni not: form ve Server Action

Form Ders 44'teki SampiyonFormu'nun aynı düzeninde: useActionState, alan hataları, yazılanları geri doldurmak. Bir farkla: aynı form hem yeni not hem düzenleme için kullanılacak, bu yüzden hangi Server Action'ı çağıracağını dışarıdan alıyor. app/notlar/NotFormu.tsx:

1"use client"2 3import { useActionState } from "react"4import Dugme from "@/components/Dugme"5import type { FormDurumu, Not } from "@/lib/notSemasi"6import { girdi } from "@/lib/stil"7 8type Props = {9    eylem: (onceki: FormDurumu, formData: FormData) => Promise<FormDurumu>10    not?: Not11}12 13function AlanHatasi({ id, mesajlar }: { id: string; mesajlar?: string[] }) {14    if (!mesajlar) {15        return null16    }17    return <p id={id} className="mt-1 text-sm text-red-700 dark:text-red-400">{mesajlar[0]}</p>18}19 20export default function NotFormu({ eylem, not }: Props) {21    const [durum, formAction, bekliyor] = useActionState(eylem, {})22    const hatalar = durum.hatalar ?? {}23    const d = durum.degerler24 25    return (26        <form action={formAction} className="mt-6 grid max-w-lg gap-4">27            {not && <input type="hidden" name="id" value={not.id} />}28            {durum.mesaj && <p role="alert" className="text-red-700 dark:text-red-400">{durum.mesaj}</p>}29 30            <div>31                <label htmlFor="sampiyon" className="font-medium">Şampiyon</label>32                <input id="sampiyon" name="sampiyon" required maxLength={20} defaultValue={d?.sampiyon ?? not?.sampiyon}33                    aria-invalid={!!hatalar.sampiyon} aria-describedby="sampiyon-hata" className={girdi} />34                <AlanHatasi id="sampiyon-hata" mesajlar={hatalar.sampiyon} />35            </div>36 37            <div>38                <label htmlFor="sonuc" className="font-medium">Sonuç</label>39                <select id="sonuc" name="sonuc" key={d?.sonuc} defaultValue={d?.sonuc ?? not?.sonuc} className={girdi}>40                    <option value="galibiyet">Galibiyet</option>41                    <option value="kayıp">Kayıp</option>42                </select>43                <AlanHatasi id="sonuc-hata" mesajlar={hatalar.sonuc} />44            </div>45 46            <div>47                <label htmlFor="tarih" className="font-medium">Tarih</label>48                <input id="tarih" name="tarih" type="date" required defaultValue={d?.tarih ?? not?.tarih}49                    aria-invalid={!!hatalar.tarih} aria-describedby="tarih-hata" className={girdi} />50                <AlanHatasi id="tarih-hata" mesajlar={hatalar.tarih} />51            </div>52 53            <div>54                <label htmlFor="metin" className="font-medium">Not</label>55                <textarea id="metin" name="metin" required rows={6} maxLength={2000} defaultValue={d?.metin ?? not?.metin}56                    aria-invalid={!!hatalar.metin} aria-describedby="metin-hata" className={girdi} />57                <AlanHatasi id="metin-hata" mesajlar={hatalar.metin} />58            </div>59 60            <div>61                <Dugme type="submit" disabled={bekliyor}>{bekliyor ? "Kaydediliyor…" : "Kaydet"}</Dugme>62            </div>63        </form>64    )65}

• eylem bir prop: fonksiyonlar da props olarak verilebilir (Ders 40). Bir sunucu bileşeni, bir Server Action'ı istemci bileşenine böyle geçirebilir; Ders 44'teki hata kartında Next'in kendisi de bu yolu öneriyordu.
• d?.sampiyon ?? not?.sampiyon: önce kullanıcının az önce yazdığı (hata sonrası geri gelen) değer, yoksa düzenlenen notun değeri, o da yoksa boş. ?. Ders 12'deki isteğe bağlı zincirleme: d yoksa hata vermeden undefined döner.
• Gizli id kutusu: yalnız düzenlerken var. Sunucu hangi notun güncelleneceğini bu kutudan öğrenecek. Bu kutu tarayıcıda, yani kullanıcının elinde; yetki bölümünde onu bilerek değiştireceksin.
• required, maxLength: tarayıcı boş ya da çok uzun bir formu hiç göndermez; kullanıcı beklemeden uyarı görür. Ama bunlar kolaylık, güvenlik değil: sunucu yine zod'la denetleyecek.

Server Action'lar app/notlar/actions.ts'te:

1"use server"2 3import { revalidatePath } from "next/cache"4import { redirect } from "next/navigation"5import { z } from "zod"6import { notEkle, notuGuncelle, notuSil } from "@/lib/notlar"7import { NotSemasi, type FormDurumu } from "@/lib/notSemasi"8import { girisGerekli } from "@/lib/oturum"9 10function metin(formData: FormData, ad: string) {11    const deger = formData.get(ad)12    return typeof deger === "string" ? deger : ""13}14 15function formuOku(formData: FormData) {16    return {17        sampiyon: metin(formData, "sampiyon"),18        sonuc: metin(formData, "sonuc"),19        tarih: metin(formData, "tarih"),20        metin: metin(formData, "metin"),21    }22}23 24export async function notEkleEylemi(onceki: FormDurumu, formData: FormData): Promise<FormDurumu> {25    const kullaniciId = await girisGerekli()26    const degerler = formuOku(formData)27    const sonuc = NotSemasi.safeParse(degerler)28    if (!sonuc.success) {29        return { hatalar: z.flattenError(sonuc.error).fieldErrors, degerler }30    }31 32    const id = await notEkle(kullaniciId, sonuc.data)33    revalidatePath("/notlar")34    redirect(`/notlar/${id}`)35}36 37export async function notGuncelleEylemi(onceki: FormDurumu, formData: FormData): Promise<FormDurumu> {38    const kullaniciId = await girisGerekli()39    const id = metin(formData, "id")40    const degerler = formuOku(formData)41    const sonuc = NotSemasi.safeParse(degerler)42    if (!sonuc.success) {43        return { hatalar: z.flattenError(sonuc.error).fieldErrors, degerler }44    }45 46    const guncellendi = await notuGuncelle(kullaniciId, id, sonuc.data)47    if (!guncellendi) {48        return { mesaj: "Bu not bulunamadı.", degerler }49    }50    revalidatePath("/notlar")51    redirect(`/notlar/${id}`)52}53 54export async function notSilEylemi(formData: FormData) {55    const kullaniciId = await girisGerekli()56    await notuSil(kullaniciId, metin(formData, "id"))57    revalidatePath("/notlar")58    redirect("/notlar")59}

Üç eylem de aynı sırayla başlar: önce kim (girisGerekli), sonra veri (safeParse), en son iş. Server Action herkese açık bir kapı olduğu için sayfanın giriş denetimi yetmez; her eylem kendi kapısını kendisi tutar. Formdan gelen alanların hiçbiri kullanıcı kimliği değil.

Sayfa yalnız başlık ve form. app/notlar/yeni/page.tsx:

1import type { Metadata } from "next"2import { girisGerekli } from "@/lib/oturum"3import { notEkleEylemi } from "../actions"4import NotFormu from "../NotFormu"5 6export const metadata: Metadata = {7    title: "Yeni not",8}9 10export default async function YeniNotSayfasi() {11    await girisGerekli()12    return (13        <>14            <h1 className="text-3xl font-bold">Yeni not</h1>15            <NotFormu eylem={notEkleEylemi} />16        </>17    )18}

Deniz olarak gir (Mert'le girmişsen önce Çıkış), Yeni not'a bas ve önce kötü bir not dene: şampiyon kutusuna boşluk, A, boşluk; not kutusuna Kötüydü. Tarayıcının required denetimi geçer (kutular boş değil), zod geçirmez:

localhost:3000/notlar/yeni

Sonra gerçek bir not yaz: Ahri, Kayıp, 20.09.2026, "Orta koridorda Zed'e karşı oynadım. 6. seviyeden sonra her ultisinde öldüm, çünkü E'mi önceden harcıyordum. Bir dahaki sefere E'yi Zed ultisini attıktan sonra kullan." Kaydet: sayfa notun kendi adresine, /notlar/1'e gider. O sayfayı şimdi yaz.

#Not sayfası, düzenleme ve silme

app/notlar/[id]/page.tsx:

1import Link from "next/link"2import { notFound } from "next/navigation"3import Dugme from "@/components/Dugme"4import { notuGetir } from "@/lib/notlar"5import { girisGerekli } from "@/lib/oturum"6import { baglantiDugme } from "@/lib/stil"7import { tarihYaz } from "@/lib/tarih"8import { notSilEylemi } from "../actions"9 10export default async function NotSayfasi({ params }: PageProps<"/notlar/[id]">) {11    const { id } = await params12    const kullaniciId = await girisGerekli()13    const not = await notuGetir(kullaniciId, id)14    if (!not) {15        notFound()16    }17 18    return (19        <article>20            <p className="text-sm text-zinc-600 dark:text-zinc-400">21                {tarihYaz(not.tarih)} · {not.sonuc === "galibiyet" ? "Galibiyet" : "Kayıp"}22            </p>23            <h1 className="mt-1 text-3xl font-bold">{not.sampiyon}</h1>24            <p className="mt-4 whitespace-pre-line">{not.metin}</p>25 26            <div className="mt-8 flex flex-wrap gap-3">27                <Link href={`/notlar/${not.id}/duzenle`} className={baglantiDugme}>Düzenle</Link>28                <form action={notSilEylemi}>29                    <input type="hidden" name="id" value={not.id} />30                    <Dugme type="submit" tur="tehlike">Sil</Dugme>31                </form>32            </div>33        </article>34    )35}

• PageProps<"/notlar/[id]"> Next'in klasörlerden ürettiği tip (Ders 45). Yeni bir klasör açtıktan sonra VS Code tipi bulamazsa npm run dev açıkken dosyayı bir kez kaydet.
• notFound() hem "böyle bir not yok" hem "bu not senin değil" durumunda çalışır. Kullanıcıya ikisini ayırt ettirmiyoruz; ayırt ettirseydik "2 numaralı not var ama başkasının" bilgisini sızdırırdık.
• whitespace-pre-line: notun içindeki satır sonları ekranda da satır sonu olsun.
• Silme bir form: veri değiştiren her şey gibi POST ile, bir Server Action'a gider.

Düzenleme sayfası aynı formu, notun değerleriyle açar. app/notlar/[id]/duzenle/page.tsx:

1import type { Metadata } from "next"2import { notFound } from "next/navigation"3import { notuGetir } from "@/lib/notlar"4import { girisGerekli } from "@/lib/oturum"5import { notGuncelleEylemi } from "../../actions"6import NotFormu from "../../NotFormu"7 8export const metadata: Metadata = {9    title: "Notu düzenle",10}11 12export default async function DuzenleSayfasi({ params }: PageProps<"/notlar/[id]/duzenle">) {13    const { id } = await params14    const kullaniciId = await girisGerekli()15    const not = await notuGetir(kullaniciId, id)16    if (!not) {17        notFound()18    }19 20    return (21        <>22            <h1 className="text-3xl font-bold">Notu düzenle</h1>23            <NotFormu eylem={notGuncelleEylemi} not={not} />24        </>25    )26}

Son olarak Next'in İngilizce 404 sayfası yerine kendi sayfan. app/not-found.tsx:

1import Link from "next/link"2import { baglantiDugme } from "@/lib/stil"3 4export default function Bulunamadi() {5    return (6        <section className="py-10 text-center">7            <h1 className="text-3xl font-bold">Burada bir şey yok</h1>8            <p className="mt-3 text-zinc-600 dark:text-zinc-400">Aradığın not silinmiş ya da hiç olmamış olabilir.</p>9            <Link href="/notlar" className={`mt-8 ${baglantiDugme}`}>Notlarıma dön</Link>10        </section>11    )12}

Birkaç not daha yaz, birini düzenle, birini sil. Sınırları da dene: /notlar/abc ve /notlar/9999 "Burada bir şey yok" demeli; çıkış yapıp /notlar/yeni'yi açmaya çalışırsan /giris'e gitmelisin.

{ tarih: 2026-09-19T21:00:00.000Z, metin: '2026-09-20' }

#Yetki: herkes yalnız kendi notunu görür

Deniz bir not yazdı ve adresi /notlar/1 oldu. Mert de bir not yazacak; adresi /notlar/2 olacak. Numaralar sırayla artıyor, yani tahmin edilebilir. Deniz adres çubuğuna 2 yazarsa ne olur? Bu bölümde yetkiyi önce bilerek bozacak, saldırganın gözünden deneyecek, sonra düzelteceksin.

İlk adım, ikinci bir kullanıcı: çıkış yap, Mert olarak gir, bir not yaz: Yasuo, Kayıp, 06.10.2026, "Ejderha savaşında rüzgâr duvarını geç açtım, Jinx'in roketleri hepimizi bitirdi." Notun adresi /notlar/2. Çıkış yap, Deniz olarak gir.

#Deneme 1: adresi değiştirmek

Önce açığı bilerek aç. notuGetir'deki sorgudan kullanıcı şartını sil (bu bir deney; birazdan geri alacaksın):

const { rows } = await pool.query<Not>(    `SELECT id, sampiyon, sonuc, tarih::text AS tarih, metin     FROM notlar     WHERE id = $1`,    [id])

const { rows } = await pool.query<Not>(    `SELECT id, sampiyon, sonuc, tarih::text AS tarih, metin     FROM notlar     WHERE id = $1 AND kullanici_id = $2`,    [id, kullaniciId])

Deniz olarak /notlar/2'yi aç:

localhost:3000/notlar/2

Sağ üstte Deniz yazıyor, sayfada Mert'in notu var; üstelik Düzenle ve Sil düğmeleriyle. Sayfa giriş istiyordu (girisGerekli), Deniz de giriş yapmıştı: kimlik doğrulama kusursuz çalıştı. Eksik olan yetkilendirme. Ne derleme ne npm run lint bir şey dedi; denedik, ikisi de sessizdi. kullaniciId parametresi fonksiyonda kullanılmadan duruyordu ve hiçbir araç bunu dert etmedi.

Şartı geri koy ve yeniden aç: "Burada bir şey yok", durum kodu 404. Sorgu "2 numaralı not, eğer Deniz'inse" diye sordu; öyle bir satır yok.

#Deneme 2: gizli kutuyu değiştirmek

Daha sinsi bir deneme. Sayfaların hepsi korunuyor, ama Server Action ayrı bir kapı. Bu kez notuGetir doğru, yalnız notuGuncelle'nin sorgusu şartsız olsun:

`UPDATE notlar SET sampiyon = $1, sonuc = $2, tarih = $3, metin = $4 WHERE id = $5`,[veri.sampiyon, veri.sonuc, veri.tarih, veri.metin, id]

Deniz olarak kendi notunun düzenleme sayfasını aç: /notlar/1/duzenle. Sayfa açılır, çünkü not Deniz'in. Şimdi saldırganın yaptığını yap:

Ekranda "Burada bir şey yok" çıkar: eylem bitince Deniz'i /notlar/2'ye gönderdi ve o sayfa doğru çalıştı. Her şey yolunda görünüyor. Veritabanına bak:

SELECT id, kullanici_id, sampiyon, metin FROM notlar ORDER BY id;

Mert'in notu değişmiş; şampiyonu bile Ahri olmuş. Tablo göstermiyor ama sonucu ve tarihi de Deniz'in notununki oldu, çünkü form Deniz'in notunun değerleriyle doluydu. Ekran "bulunamadı" derken veritabanı yazılmıştı. Bu deneme bir şeyi gösteriyor: sayfayı korumak eylemi korumaz. Düzenleme sayfası "bu not senin mi?" diye sordu ve doğru cevabı aldı; ama gizli kutu tarayıcıdaydı ve tarayıcı kullanıcının elinde.

Şartı geri koy (WHERE id = $5 AND kullanici_id = $6, dizide id, kullaniciId). Sonra Mert'in notunu eski hâline getir: çıkış yap, Mert olarak gir, notunu aç ve Düzenle ile Yasuo, Kayıp, 06.10.2026 ve kendi metnine geri çevir. Deniz olarak yeniden gir ve denemeyi tekrarla:

localhost:3000/notlar/1/duzenle

UPDATE … WHERE id = 2 AND kullanici_id = 1 hiçbir satır bulamadı, rowCount 0 oldu, eylem { mesaj: "Bu not bulunamadı." } döndürdü. Mert'in notu yerinde.

#Deneme 3: kimliği formdan almak

Bir yanlış daha, bu kez iyi niyetle yapılanı. "Kullanıcının kimliği zaten sayfada var, forma bir gizli kutu daha koyayım" diye düşünmek kolay:

<input type="hidden" name="kullaniciId" value={kullaniciId} />

const kullaniciId = await girisGerekli()

Soldaki kutuyu Deniz, Deneme 2'deki gibi 2 yapar ve Mert adına not yazar; ya da kullanici_id şartını kendi istediği numarayla doldurur. Formdan gelen kimliğe güvenen bir sorgu, şartı hiç olmayan bir sorgu kadar açıktır. Kural: kullanıcının kim olduğu yalnız oturumdan okunur. Form ve adres "hangi not?" sorusunu cevaplayabilir; "kim?" sorusunu asla.

Yetkinin kuralları, tek yerde:

1. Kullanıcının kimliği oturumdan gelir: girisGerekli(). Formdan, adresten, istek gövdesinden asla.
2. Kullanıcıya ait veriye dokunan her sorguda kullanici_id şartı vardır: okuma, güncelleme, silme, sayma.
3. Sayfayı korumak eylemi korumaz; her Server Action ve her Route Handler kendi denetimini yapar.
4. "Yok" ile "senin değil" aynı cevabı alır: 404 ya da "bulunamadı".
5. Ne TypeScript ne ESLint bu açığı yakalar. Yakalamanın yolu, bu bölümde yaptığın gibi, iki kullanıcıyla bilerek denemek.

#İstatistik

İstatistik sayfası Ders 34'teki GROUP BY'ı kullanacak: şampiyon başına kaç maç, kaçı galibiyet. Önce sayfaya veri lazım. Deniz'in birkaç maçını tek seferde eklemek için SQL Editor'de (dal: gelistirme) şunu çalıştır; veri yükleyen bir betik olduğu için kopyalayabilirsin. kullanici_id değerinin 1 olduğunu az önceki kullanicilar sorgusundan biliyorsun; sende farklıysa değiştir:

INSERT INTO notlar (kullanici_id, sampiyon, sonuc, tarih, metin) VALUES    (1, 'Ahri', 'galibiyet', '2026-09-24', 'Yine Zed vardı. Bu kez erken Zhonya aldım; Zed ultisini atınca Zhonya''yı açtım ve ölmedim.'),    (1, 'Lux', 'kayıp', '2026-09-27', 'Destek oynadım. Ejderha savaşlarının üçüne de geç kaldım; görüş koymadan nehre girdim.'),    (1, 'Jinx', 'galibiyet', '2026-09-29', 'Erken ganklar yedim ama farmı bırakmadım. Geç oyunda takım savaşlarını temizledim.'),    (1, 'Garen', 'kayıp', '2026-10-02', 'Teemo''ya karşı oynadım. Mantarların yerini tahmin etmeden çalıya girme.'),    (1, 'Lux', 'galibiyet', '2026-10-05', 'Kalkanı nişancının önüne attım, iki ölümü engelledim. Ejderhadan önce nehre totem koydum.'),    (1, 'Ahri', 'galibiyet', '2026-10-08', 'Rakip Talon''du. E''yi hep elimde tuttum ve Talon her geldiğinde büyüledim.');

Liste sayfası artık dolu:

localhost:3000/notlar

Şampiyon başına iki sayı istiyoruz: toplam maç ve galibiyet. Toplam, Ders 34'teki count(*). Galibiyet için yeni ama küçük bir parça var: FILTER.

SELECT sampiyon,       count(*)::int AS mac,       count(*) FILTER (WHERE sonuc = 'galibiyet')::int AS galibiyetFROM notlarWHERE kullanici_id = 1GROUP BY sampiyonORDER BY mac DESC, sampiyon;

count(*) FILTER (WHERE …) "bu gruptaki satırlardan yalnız şu şarta uyanları say" demek. Sorgunun genel WHERE'inden farkı: o, satırları gruplara girmeden eler; FILTER ise yalnız bu sayının hangi satırlara bakacağını söyler. Böylece aynı grupta hem bütün maçları hem galibiyetleri sayabildin. ::int, Ders 37'deki tuzak için: count bigint döndürür ve pg onu metin olarak verir. ORDER BY mac DESC, sampiyon: önce en çok oynanan, eşitse alfabetik; Garen ile Jinx bu yüzden bu sırada.

Fonksiyonu lib/notlar.ts'in sonuna ekle:

67export type SampiyonSatiri = {68    sampiyon: string69    mac: number70    galibiyet: number71}72 73export async function sampiyonIstatistigi(kullaniciId: number): Promise<SampiyonSatiri[]> {74    const { rows } = await pool.query<SampiyonSatiri>(75        `SELECT sampiyon,76                count(*)::int AS mac,77                count(*) FILTER (WHERE sonuc = 'galibiyet')::int AS galibiyet78         FROM notlar79         WHERE kullanici_id = $180         GROUP BY sampiyon81         ORDER BY mac DESC, sampiyon`,82        [kullaniciId]83    )84    return rows85}

Ve elbette WHERE kullanici_id = $1: sayılar da kişisel veri. Sayfa, app/istatistik/page.tsx:

1import type { Metadata } from "next"2import { sampiyonIstatistigi } from "@/lib/notlar"3import { girisGerekli } from "@/lib/oturum"4 5export const metadata: Metadata = {6    title: "İstatistik",7}8 9function oran(galibiyet: number, mac: number) {10    return Math.round((galibiyet / mac) * 100)11}12 13export default async function IstatistikSayfasi() {14    const kullaniciId = await girisGerekli()15    const satirlar = await sampiyonIstatistigi(kullaniciId)16    const toplamMac = satirlar.reduce((toplam, s) => toplam + s.mac, 0)17    const toplamGalibiyet = satirlar.reduce((toplam, s) => toplam + s.galibiyet, 0)18 19    if (toplamMac === 0) {20        return (21            <>22                <h1 className="text-3xl font-bold">İstatistik</h1>23                <p className="mt-4 text-zinc-600 dark:text-zinc-400">İstatistik için önce birkaç not yaz.</p>24            </>25        )26    }27 28    return (29        <>30            <h1 className="text-3xl font-bold">İstatistik</h1>31            <p className="mt-2 text-lg">32                {toplamMac} maç, {toplamGalibiyet} galibiyet: <strong>%{oran(toplamGalibiyet, toplamMac)}</strong>33            </p>34 35            <table className="mt-6 w-full text-left">36                <thead className="border-b border-zinc-300 text-sm text-zinc-600 dark:border-zinc-700 dark:text-zinc-400">37                    <tr>38                        <th className="py-2">Şampiyon</th>39                        <th className="py-2">Maç</th>40                        <th className="py-2">Galibiyet</th>41                        <th className="py-2">Oran</th>42                    </tr>43                </thead>44                <tbody>45                    {satirlar.map((s) => (46                        <tr key={s.sampiyon} className="border-b border-zinc-200 dark:border-zinc-800">47                            <td className="py-2 font-semibold">{s.sampiyon}</td>48                            <td className="py-2">{s.mac}</td>49                            <td className="py-2">{s.galibiyet}</td>50                            <td className="py-2">51                                <div className="flex items-center gap-2">52                                    <div className="h-2 w-24 rounded-full bg-zinc-200 dark:bg-zinc-800">53                                        <div className="h-2 rounded-full bg-violet-600" style={{ width: `${oran(s.galibiyet, s.mac)}%` }} />54                                    </div>55                                    %{oran(s.galibiyet, s.mac)}56                                </div>57                            </td>58                        </tr>59                    ))}60                </tbody>61            </table>62        </>63    )64}