Stil, erişilebilirlik ve kullanıcı deneyimi

Uygulaman çalışıyor; ama çalışan bir uygulama ile kullanılan bir uygulama arasında fark var. Kullanıcı bir düğmenin düğme olduğunu anlamalı, telefonda yazıları büyütmeden okuyabilmeli, fareyi kullanamıyorsa klavyeyle her yere ulaşabilmeli, internet yavaşken ekranın donmadığını görmeli. Bu derste Tailwind CSS ile hızlı stil yazmayı, sayfayı telefona ve koyu temaya uydurmayı, düğme, kart ve form bileşenleri kurmayı, sayfanı erişilebilirlik açısından denetleyip Lighthouse ile ölçmeyi ve boş, yükleniyor, hata durumlarını tasarlamayı öğreneceksin. Dersin sonunda bir maç geçmişi sayfan olacak: kartlar, form, iskelet yükleyici, boş ve hata ekranlarıyla. Ders 46'daki projen aynı parçaları kullanacak.

#Yeni proje: stil atölyesi

Önceki projelerinle karışmasın diye yeni bir Next.js projesi açıyorsun. Komut Ders 43'tekiyle aynı; yalnız adı farklı. VS Code'da bir terminal aç, cd C:\kod ile kod klasörüne geç ve yaz:

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

Çıktı Ders 43'tekiyle aynı akar; en sonda Success! Created stil-atolyesi at C:\kod\stil-atolyesi yazar. Bu ders create-next-app 16.4.0 ve Tailwind CSS 4.3.3 ile denendi (npm view tailwindcss version dersi yazarken 4.3.3 diyordu).

--tailwind bayrağı Tailwind'i kurdu ve ayarladı; sen bir şey kurmayacaksın. Ne kurduğuna bakmak için package.json'daki devDependencies bölümünde tailwindcss ve @tailwindcss/turbopack satırlarını, next.config.ts'te de @tailwindcss/turbopack yazan turbopack bölümünü görebilirsin: Next'in derleme aracı Turbopack, CSS dosyalarını bu eklentiden geçiriyor.

Klasörü aç (code stil-atolyesi) ve geliştirme sunucusunu başlat (npm run dev, adres http://localhost:3000). Şimdi şablonu temizle. app/globals.css'te yalnız ilk satır kalsın:

1@import "tailwindcss";

app/layout.tsx'in içini tamamen sil ve şunu yaz. Şablonun yazı tipi satırlarını bu derste kullanmıyoruz; sayfalar sistemin yazı tipiyle çizilecek:

1import type { Metadata } from "next"2import "./globals.css"3 4export const metadata: Metadata = {5    title: "Stil Atölyesi",6    description: "Tailwind CSS ve erişilebilirlik denemeleri",7}8 9export default function RootLayout({ children }: LayoutProps<"/">) {10    return (11        <html lang="tr">12            <body>{children}</body>13        </html>14    )15}

app/page.tsx'e de hiç stil vermeden bir taslak yaz:

1export default function Home() {2    return (3        <main>4            <h1>Maç geçmişi</h1>5            <p>Son maçlarına bak, yenisini ekle.</p>6            <button>Maç ekle</button>7            <ul>8                <li>Ahri · Zafer · 8/2/11</li>9                <li>Jinx · Bozgun · 4/7/6</li>10            </ul>11            <label htmlFor="sampiyon">Şampiyon</label>12            <input id="sampiyon" />13        </main>14    )15}

localhost:3000

Dikkatle bak: "Maç ekle" bir düğme ama düz yazı gibi duruyor. Listenin madde işaretleri yok. "Şampiyon" yazısının sağında bir giriş kutusu var ama görünmüyor; üstüne tıklarsan içine yazabilirsin. Tailwind'in Preflight adlı sıfırlama katmanı tarayıcıların birbirinden farklı varsayılan stillerini siliyor: boşluklar sıfır, başlıklar sıradan yazı boyutunda, listeler işaretsiz, kenarlıklar sıfır kalınlıkta. Her tarayıcıda aynı, boş bir tuvalden başlıyorsun. Bu dersin işi o tuvali boyamak.

#Tailwind'in mantığı: yardımcı sınıflar

Ders 43'te globals.css'e 140 satıra yakın CSS koymuştun: .ust, .kart, .harf, .favori… Her yeni görünüm için bir ad uydurup CSS dosyasına geçiyor, kuralı yazıp bileşene dönüyordun. Bu düzenin üç derdi var. Ad bulmak zor (.kart mı, .mac-karti mı, .kart-kucuk mu?). İki dosya arasında gidip gelirsin. Bir bileşeni silince CSS'teki kuralları da silmeyi unutursun; dosya hiç kullanılmayan kurallarla şişer, hangisinin hâlâ lazım olduğunu kimse bilemez.

Tailwind CSS başka bir yol önerir: her biri tek bir iş yapan hazır, küçük sınıflar. p-4 iç boşluk verir, font-bold yazıyı kalınlaştırır, bg-white zemini beyaz yapar. Görünümü, bu sınıfları doğrudan JSX'teki className'e dizerek kurarsın.

#İlk sınıflar

app/page.tsx'teki taslağın düğmesini, listesini ve formunu şimdilik sil; her birini bu derste bir bileşen olarak geri getireceksin. Kalan başlığa ve paragrafa sınıf ver:

1export default function Home() {2    return (3        <main className="mx-auto max-w-5xl px-4 py-8">4            <h1 className="text-3xl font-bold">Maç geçmişi</h1>5            <p className="mt-1 text-zinc-600">Son maçlarına bak, yenisini ekle.</p>6        </main>7    )8}

layout.tsx'teki <body>'ye de sayfanın zemin ve yazı rengini ver:

12            <body className="bg-zinc-50 text-zinc-900">{children}</body>

Kaydet: başlık büyüdü ve kalınlaştı, paragraf griye döndü, içerik ortalanıp kenarlardan boşluk aldı. Her sınıf tek bir CSS satırının kısaltması:

İki kalıp hemen göze çarpıyor:

• Boşluk ölçeği: Sınıftaki sayının bir birimi 0.25rem, yani 4 piksel. p-1 4, p-2 8, p-4 16, p-8 32 piksel. p iç boşluk (padding), m dış boşluk (margin); x yatay, y dikey, t üst, b alt, l sol, r sağ demek. mt-6 "üstten 24 piksel dış boşluk"tur. Ders 20'deki kutu modelinin aynısı, yalnız kısaltılmış.
• Renk paleti: zinc, violet, red, emerald gibi renk adları ve 50'den 950'ye tonlar. 50 neredeyse beyaz, 950 neredeyse siyah. text- yazı rengi, bg- zemin rengi, border- kenar rengi verir.

Hangi sınıfın hangi CSS'e karşılık geldiğini ezberlemene gerek yok. Tarayıcıda başlığa sağ tıkla, İncele (Inspect) de; Styles panelinde sınıfların ürettiği kuralları görürsün. Tailwind sayıları CSS değişkenleriyle (Ders 21) yazar; panelde şöyle bir şey okursun:

.text-3xl {    font-size: var(--text-3xl);    line-height: var(--tw-leading, var(--text-3xl--line-height));} .px-4 {    padding-inline: calc(var(--spacing) * 4);}

--spacing değişkeninin değeri 0.25rem; calc(var(--spacing) * 4) yani 1rem. Bütün boşluklar aynı ölçekten geldiği için sayfanda 13 piksel, 17 piksel gibi gelişigüzel değerler olmaz; tasarım kendiliğinden düzenli durur.

#Tailwind CSS'i nasıl üretir?

Tailwind'de binlerce olası sınıf var; hepsinin CSS'i sitene girse dosya devasa olurdu. Bunun yerine Tailwind projendeki dosyaları düz metin olarak tarar, içlerinde sınıf adına benzeyen sözcükleri toplar ve yalnız onların CSS'ini üretir. Kodunu çalıştırmaz; yalnız okur. Bu ayrıntı birazdan önemli bir hatanın sebebi olacak.

Tailwind node_modules'u, .gitignore'daki dosyaları, resimleri ve CSS dosyalarını taramaz; geri kalan her şeye bakar. Sitenin CSS'i bu yüzden küçük kalır: bu dersin bütün sayfalarının (görevler dahil) yayın derlemesindeki CSS dosyası yaklaşık 17 KB tuttu.

#Artıları, eksileri

Tailwind CSS'in yerine geçmez; CSS bilmeden Tailwind yazamazsın. flex, grid, justify-between, rounded Ders 20–21'de öğrendiğin özelliklerin kısa adları. Uzayan className sorununun çözümü de tanıdık: aynı sınıf listesini iki yerde tekrarlıyorsan onu bir React bileşenine taşırsın. Birazdan düğmeyle yapacağın şey bu.

1@tailwind base;2@tailwind components;3@tailwind utilities;

> getComputedStyle(document.querySelector("article")).padding'0px'> getComputedStyle(document.querySelector("article")).backgroundColor'rgba(0, 0, 0, 0)'

PS C:\kod\stil-atolyesi> npx tailwindcss init -pnpm error could not determine executable to runnpm error A complete log of this run can be found in: C:\Users\Deniz\AppData\Local\npm-cache\_logs\2026-10-12T01_49_51_124Z-debug-0.log

#Önekler: koşula bağlı sınıflar

Ders 20'de :hover yazmıştın: "fare üstündeyken şu kural geçerli". Ders 21'de @media (min-width: 640px): "pencere en az 640 piksel genişse şu kural geçerli". Tailwind ikisini de aynı yolla yazar: sınıfın başına bir önek koyarsın. hover:bg-violet-600 "fare üstündeyken zemini mor yap", sm:grid-cols-2 "640 pikselden itibaren iki sütun", dark:bg-zinc-900 "koyu temadaysa zemini koyu gri yap" demek.

Önekler üst üste de binebilir:

#Duyarlı sınıflar: sm:, md:, lg:

Tailwind de Ders 21'deki gibi mobil öncelikli çalışır. Öneksiz sınıf her genişlikte geçerlidir; önekli sınıf o genişlikten itibaren devreye girer ve öncekini ezer:

Sayfaya maçları ekleyerek dene. Önce bir veri dosyası aç: proje kökünde lib klasörü ve içine maclar.ts:

1export type Mac = {2    id: number3    sampiyon: string4    sonuc: "zafer" | "bozgun"5    oldurme: number6    olum: number7    asist: number8    dakika: number9}10 11export const maclar: Mac[] = [12    { id: 1, sampiyon: "Ahri", sonuc: "zafer", oldurme: 8, olum: 2, asist: 11, dakika: 31 },13    { id: 2, sampiyon: "Jinx", sonuc: "bozgun", oldurme: 4, olum: 7, asist: 6, dakika: 27 },14    { id: 3, sampiyon: "Garen", sonuc: "zafer", oldurme: 6, olum: 3, asist: 4, dakika: 24 },15    { id: 4, sampiyon: "Lux", sonuc: "zafer", oldurme: 3, olum: 1, asist: 17, dakika: 35 },16]

Sonra page.tsx'te paragrafın altına bir ızgara koy (en üste import { maclar } from "@/lib/maclar" satırını eklemeyi unutma):

8            <ul className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">9                {maclar.map((mac) => (10                    <li key={mac.id} className="rounded-xl bg-white p-4">11                        {mac.sampiyon}12                    </li>13                ))}14            </ul>

grid ızgarayı açar ve öneksiz hâlde tek sütundur; sm:grid-cols-2 640 pikselden itibaren iki, lg:grid-cols-3 1024 pikselden itibaren üç sütun yapar. Geliştirici araçlarında Ctrl+Shift+M ile cihaz araç çubuğunu aç ve genişliği değiştir. Sınırların iki yanını ölçtük:

#Koyu tema: dark:

Windows'ta Ayarlar → Kişiselleştirme → Renkler → Modunuzu seçin bölümünde (İngilizce Windows'ta Settings → Personalization → Colors → Choose your mode) koyu modu seçen biri, sitelerin de koyu olmasını bekler. Tarayıcı bu tercihi sayfalara prefers-color-scheme medya özelliğiyle bildirir. Tailwind'in dark: öneki varsayılan olarak tam bunu dinler: kullanıcının sistemi koyuysa dark: önekli sınıflar devreye girer.

layout.tsx'teki iki satırı şöyle değiştir:

11        <html lang="tr" className="scheme-light-dark">12            <body className="bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">{children}</body>

page.tsx'te de paragrafa ve liste ögelerine koyu karşılıklarını ekle:

<p className="mt-1 text-zinc-600 dark:text-zinc-400">Son maçlarına bak, yenisini ekle.</p>

<li key={mac.id} className="rounded-xl bg-white p-4 dark:bg-zinc-900">

• dark:bg-zinc-950 koyu temada zemini neredeyse siyah, dark:text-zinc-100 yazıyı neredeyse beyaz yapar. Açık temada bu sınıflar yokmuş gibidir.
• scheme-light-dark, Ders 25'teki color-scheme özelliğinin Tailwind karşılığı: tarayıcıya "bu sayfa iki temayı da destekliyor" der. Kaydırma çubuklarını, açılır listeleri ve onay kutularını tarayıcı da temaya uygun çizer.

Windows'un temasını değiştirmeden denemek için geliştirici araçlarında Ctrl+Shift+P ile komut menüsünü aç, rendering yaz ve Show Rendering'i seç. Açılan Rendering sekmesinde Emulate CSS media feature prefers-color-scheme listesinden prefers-color-scheme: dark'ı seç (arayüz değişmiş olabilir). Sayfa anında koyulaşır.

Kural basit: renk veren her sınıfın bir koyu karşılığı olmalı. bg-white yazıp dark:bg-… yazmayı unutursan koyu temada beyaz bir kart parlar; daha kötüsü, body'den gelen açık renkli yazı beyaz kartın üstünde görünmez olur.

#Düğme: durumları olan bir bileşen

Taslaktaki düğme düz yazı gibi duruyordu. Bir düğme kullanıcıya üç şey söylemeli: "bana basılabilir" (biçim ve imleç), "şu an üstümdesin" (fare ya da klavye odağı) ve "şu an basılamam" (devre dışı). Her biri bir önek. Aynı düğmeyi sayfanın birçok yerinde kullanacağın için onu baştan bir bileşen yap: proje kökünde components klasörü ve içine Dugme.tsx:

1const turSiniflari = {2    birincil: "bg-violet-700 text-white hover:bg-violet-600",3    ikincil: "border border-zinc-500 bg-white text-zinc-900 hover:bg-zinc-100 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800",4    tehlike: "bg-red-700 text-white hover:bg-red-600",5}6 7type DugmeProps = {8    tur?: "birincil" | "ikincil" | "tehlike"9    type?: "button" | "submit"10    disabled?: boolean11    onClick?: () => void12    children: React.ReactNode13}14 15export default function Dugme({ tur = "birincil", type = "button", disabled = false, onClick, children }: DugmeProps) {16    return (17        <button18            type={type}19            disabled={disabled}20            onClick={onClick}21            className={`cursor-pointer rounded-lg px-4 py-2 font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500 disabled:cursor-not-allowed disabled:opacity-50 ${turSiniflari[tur]}`}22        >23            {children}24        </button>25    )26}

Parça parça:

• turSiniflari: düğmenin üç çeşidi (birincil, ikincil, tehlike), her biri için tam yazılmış bir sınıf listesi (boşlukla ayrılmış sınıf adlarından oluşan tek bir metin). turSiniflari[tur] seçilen çeşidin metnini verir (Ders 4'teki köşeli parantezle alan okuma). Neden renk adını değişkenden kurmadığımızı birazdan bir hatayla göreceksin.
• ReactNode: React'in çizebildiği her şeyin tipi (Ders 40). children düğmenin içine yazdığın şey: <Dugme>Kaydet</Dugme>'de "Kaydet".
• tur = "birincil", type = "button": varsayılan parametreler. type önemli: form içindeki bir <button>'ın türü yazılmazsa submit sayılır ve her basışta formu gönderir. Göndermesi gereken düğmeye type="submit"'i bilerek vereceksin.
• cursor-pointer: Tarayıcılar düğmenin üstünde sıradan ok imlecini gösterir; Tailwind 4 de bunu değiştirmez (Tailwind 3 değiştiriyordu). El imleci "buraya basılır" ipucunu verir.
• hover:bg-violet-600: fare üstündeyken bir ton açık. Tailwind 4 hover:'ı yalnız fareyle gezilen cihazlarda çalıştırır; telefonda parmakla dokununca düğme açık tonda takılı kalmaz.
• focus-visible:outline-2 …: klavyeyle gelindiğinde 2 piksel kalınlığında, 2 piksel dışarıda, mor bir çerçeve. Ders 25'teki :focus-visible ile aynı: fareyle tıklayınca çıkmaz, Tab ile gelince çıkar.
• disabled:opacity-50 disabled:cursor-not-allowed: disabled olan düğme yarı saydam görünür ve üstüne gelince yasak imleci çıkar. Tarayıcı devre dışı düğmeye basılmasına zaten izin vermez; bu sınıflar bunu gözle görünür yapar.

Dört çeşidi yan yana görmek için page.tsx'te paragrafın altına geçici olarak şunu koy (en üste import Dugme from "@/components/Dugme"):

<div className="mt-6 flex flex-wrap gap-3">    <Dugme>Kaydet</Dugme>    <Dugme tur="ikincil">Vazgeç</Dugme>    <Dugme tur="tehlike">Sil</Dugme>    <Dugme disabled>Kaydediliyor…</Dugme></div>

Sayfayı yenile ve fareye dokunmadan bir kez Tab'a bas:

localhost:3000

Fareyi düğmelerin üstünde gezdir: renkler bir ton açılıyor. Son düğmenin üstünde imleç yasak işaretine dönüyor ve Tab onu atlıyor: devre dışı düğme odak almaz. Düğmeleri gördükten sonra bu div'i sil; düğmeyi formda ve hata ekranında kullanacaksın.

#Sınıf adını parça parça kurmak

Düğmeye yeni bir renk eklemek istediğini düşün: onay için yeşil. Akla gelen ilk yol, renk adını tutan bir obje ve şablon metinle kurulan bir sınıf. Önce Node'da ne ürettiğine bak. C:\kod\ogren\ders45.ts dosyasına yaz ve o klasörde node ders45.ts ile çalıştır:

1const renk = "emerald"2const sinif = `bg-${renk}-700`3console.log(sinif)

bg-emerald-700

JavaScript doğru metni üretiyor. Şimdi aynı fikri bir bileşende dene:

Sık hataSınıf adını parça parça kurmak: bg-${renk}-700

Ne zaman çıkar? Sınıf adının bir parçasını değişkenden, prop'tan ya da şablon metinle kurunca. Şu bileşeni components/RenkliDugme.tsx olarak yaz ve sayfada iki kez kullan: <RenkliDugme tur="birincil">Kaydet</RenkliDugme> ve <RenkliDugme tur="onay">Onayla</RenkliDugme>.

1const renkler = {2    birincil: "violet",3    onay: "emerald",4}5 6type RenkliDugmeProps = {7    tur: "birincil" | "onay"8    children: React.ReactNode9}10 11export default function RenkliDugme({ tur, children }: RenkliDugmeProps) {12    return (13        <button className={`cursor-pointer rounded-lg px-4 py-2 font-semibold text-white bg-${renkler[tur]}-700`}>14            {children}15        </button>16    )17}

Ne terminal ne tarayıcı hata verir. Ama sayfada şu çıkar:

localhost:3000

Onayla'ya sağ tıkla, İncele de. Elements'te class="… bg-emerald-700" yazıyor, yani sınıf öğenin üstünde. Styles panelinde ise .bg-emerald-700 diye bir kural yok. Elements'te seçili öğe Console'da $0 adıyla durur; zeminine sor:

> getComputedStyle($0).backgroundColor'rgba(0, 0, 0, 0)'

Saydam. Kaydet düğmesinde aynı soru 'lab(35.2783 67.9912 -88.793)' döndü: mor. Kaydet neden çalışıyor? Çünkü bg-violet-700 sözcüğü projede başka bir yerde, Dugme.tsx'te tam olarak yazılı; Tailwind onu orada görüp CSS'ini üretti. bg-emerald-700 ise hiçbir dosyada tam olarak geçmiyor; Tailwind yalnız bg-${renkler[tur]}-700 metnini okudu ve bundan bir sınıf çıkaramadı. Kodun çalışınca ne üreteceğini bilemez, çünkü kodu çalıştırmaz.

Bu yüzden bu hata sinsidir: aynı renk başka bir dosyada geçiyorsa her şey çalışır görünür, o dosyayı sildiğin gün düğme kaybolur.

Nasıl düzelir? Sınıf adını her zaman tam yaz; değişkenle yalnız hangi tam adın seçileceğini belirle. Dugme.tsx'teki turSiniflari tam olarak bunu yapıyor:

const renkler = {    birincil: "bg-violet-700 hover:bg-violet-600",    onay: "bg-emerald-700 hover:bg-emerald-600",}

Denedikten sonra RenkliDugme.tsx'i ve sayfadaki iki satırı sil.

#Kart: bir maçın bütün bilgisi

Listedeki ögeler şimdilik yalnız şampiyonun adını gösteriyor. Bir maç kartında sonuç, skor (öldürme / ölüm / asist) ve süre de olsun. components/MacKarti.tsx:

1import type { Mac } from "@/lib/maclar"2 3const sonucSiniflari = {4    zafer: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300",5    bozgun: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300",6}7 8export default function MacKarti({ mac }: { mac: Mac }) {9    const zafer = mac.sonuc === "zafer"10    return (11        <article className="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">12            <div className="flex items-center justify-between gap-3">13                <h2 className="text-lg font-bold">{mac.sampiyon}</h2>14                <span className={`rounded-full px-2.5 py-0.5 text-sm font-semibold ${sonucSiniflari[mac.sonuc]}`}>15                    <span aria-hidden="true">{zafer ? "✓ " : "✗ "}</span>16                    {zafer ? "Zafer" : "Bozgun"}17                </span>18            </div>19            <p className="mt-3 font-mono text-xl">{mac.oldurme} / {mac.olum} / {mac.asist}</p>20            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{mac.dakika} dakika</p>21        </article>22    )23}

• Kartın kendisi: rounded-xl 12 piksel yuvarlak köşe, border border-zinc-200 ince açık gri kenar, shadow-sm hafif gölge, p-4 iç boşluk. Koyu temada kenar ve zemin koyulaşıyor.
• Üst satır: flex items-center justify-between (Ders 21): ad solda, rozet sağda, ikisi dikeyde ortalı. gap-3 ad uzarsa ikisinin birbirine yapışmasını önler.
• Rozet: rounded-full hap biçimi, px-2.5 py-0.5 küçük bir iç boşluk; 2.5 gibi buçuklu sayılar da ölçekte var (10 piksel). Renkler yine tam yazılmış sınıf listelerinden geliyor.
• aria-hidden="true": ✓ ve ✗ işaretleri gözle bakan için. Ekran okuyucu onları "onay işareti" diye okumasın; zaten hemen yanında "Zafer" yazıyor. Bu küçük nitelik bu dersin ARIA bölümünde yeniden karşına çıkacak.
• font-mono: skoru eş genişlikli yazı tipiyle yazar; rakamlar alt alta kartlarda hizalı durur.

page.tsx'te listeyi kartlara çevir: <li>'nin sınıflarını sil, içine kartı koy (en üste import MacKarti from "@/components/MacKarti"):

1import MacKarti from "@/components/MacKarti"2import { maclar } from "@/lib/maclar"3 4export default function Home() {5    return (6        <main className="mx-auto max-w-5xl px-4 py-8">7            <h1 className="text-3xl font-bold">Maç geçmişi</h1>8            <p className="mt-1 text-zinc-600 dark:text-zinc-400">Son maçlarına bak, yenisini ekle.</p>9            <ul className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">10                {maclar.map((mac) => (11                    <li key={mac.id}>12                        <MacKarti mac={mac} />13                    </li>14                ))}15            </ul>16        </main>17    )18}

Telefon genişliğinde (390 px) kartlar alt alta, dizüstü genişliğinde (1280 px) üçerli dizilir:

localhost:3000

Koyu temada da kontrol et (Rendering sekmesi ya da Windows ayarı):

localhost:3000

#Form: etiket, girdi ve hata mesajı

Formun bir girdi kutusu var ve kullanıcı ona yazınca state değişecek; bu yüzden form bir istemci bileşeni olur. components/YeniMacFormu.tsx:

1"use client"2 3import { useState } from "react"4import Dugme from "@/components/Dugme"5 6export default function YeniMacFormu() {7    const [sampiyon, setSampiyon] = useState("")8    const [hata, setHata] = useState("")9    const [mesaj, setMesaj] = useState("")10 11    function gonder(olay: React.SubmitEvent<HTMLFormElement>) {12        olay.preventDefault()13        if (sampiyon.trim() === "") {14            setHata("Şampiyonun adını yaz.")15            setMesaj("")16            return17        }18        setHata("")19        setMesaj(`${sampiyon} maçı kaydedildi.`)20        setSampiyon("")21    }22 23    return (24        <form id="yeni-mac" onSubmit={gonder} noValidate className="mt-10 max-w-md rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">25            <h2 className="text-xl font-bold">Yeni maç</h2>26            <label htmlFor="sampiyon" className="mt-4 block font-medium">Şampiyon</label>27            <input28                id="sampiyon"29                value={sampiyon}30                onChange={(olay) => setSampiyon(olay.target.value)}31                placeholder="Örn. Ahri"32                required33                aria-invalid={hata !== ""}34                aria-describedby={hata ? "sampiyon-hata" : undefined}35                className={`mt-1 block w-full rounded-lg border bg-white px-3 py-2 placeholder:text-zinc-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500 dark:bg-zinc-950 dark:placeholder:text-zinc-400 ${hata ? "border-red-700 dark:border-red-400" : "border-zinc-500"}`}36            />37            {hata && (38                <p id="sampiyon-hata" role="alert" className="mt-1 text-sm text-red-700 dark:text-red-400">39                    {hata}40                </p>41            )}42            <label htmlFor="sonuc" className="mt-4 block font-medium">Sonuç</label>43            <select id="sonuc" className="mt-1 block w-full rounded-lg border border-zinc-500 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500 dark:bg-zinc-950">44                <option value="zafer">Zafer</option>45                <option value="bozgun">Bozgun</option>46            </select>47            <div className="mt-6 flex items-center gap-3">48                <Dugme type="submit">Kaydet</Dugme>49                <p role="status" className="text-sm text-emerald-700 dark:text-emerald-400">{mesaj}</p>50            </div>51        </form>52    )53}

Mantık Ders 41'deki kontrollü girdiyle aynı; yeni olan görünüm ve erişilebilirlik ayrıntıları:

• Etiket: Her kutunun gerçek bir <label htmlFor>'u var (JSX'te for yerine htmlFor, Ders 40). block etiketi kendi satırına alır; etikete tıklayınca imleç kutuya gider.
• Kutu: Preflight kutunun kenarını sıfırlamıştı; border kenarı geri getirir, w-full kutuyu formun genişliğine yayar. Kenar rengi zinc-500: Ders 25'teki kurala göre bir girdi kutusunun kenarı zeminle en az 3:1 kontrast taşımalı. Beyaz zeminde zinc-500 4,83:1, daha açık zinc-400 ise 2,62:1'de kalır.
• placeholder:text-zinc-500 dark:placeholder:text-zinc-400: placeholder: öneki, kutu boşken görünen silik yazıyı boyar. İpucu yazısının da okunabilir olması gerekir. Koyu temada bir ton açığını seçtik: dark:placeholder: iki önek üst üste, "koyu temadaysa ve ipucu yazısıysa" demek. Nedenini kontrast bölümünde ölçeceksin.
• Hata hâli: Kenar rengi hataya göre değişiyor; dikkat et, iki renk de tam ad. border-zinc-500 ile border-red-700'ü aynı anda yazmak yerine biri seçiliyor: aynı özelliği ayarlayan iki sınıf bir arada olursa hangisinin kazanacağı className'deki sıraya değil, Tailwind'in ürettiği CSS dosyasındaki sıraya bağlıdır.
• aria-invalid ve aria-describedby: İlki ekran okuyucuya "bu kutunun değeri geçersiz" der. İkincisi kutuyu altındaki hata paragrafına bağlar: kullanıcı kutuya geldiğinde ekran okuyucu etiketin ardından "Şampiyonun adını yaz." cümlesini de okur. HTML'de bu bağı kuran başka bir yol yok; ARIA'nın gerçekten gerektiği yerlerden biri.
• role="alert" ve role="status": Ders 23–25'te gördüğün gibi: hata çıkınca hemen okunur, başarı mesajı değişince sırası gelince okunur.
• required ve noValidate: required (Ders 23) kutunun zorunlu olduğunu ekran okuyucuya da söyler; kutuya gelen kullanıcı "gerekli" sözcüğünü duyar. noValidate ise tarayıcının kendi doğrulama balonunu kapatır: boş gönderimde tarayıcının "Lütfen bu alanı doldurun." (İngilizce tarayıcıda "Please fill out this field.") balonu yerine bizim tasarladığımız hata cümlesi çıkar ve gonder her basışta çalışır.

Aynı üç odak sınıfı girdi kutusunda, açılır listede, düğmede ve birazdan yazacağın bağlantıda tekrar ediyor. Görev 3'te onları tek bir sabite toplayacaksın.

Formu sayfaya koy ve başlığın yanına forma götüren bir "Maç ekle" bağlantısı ekle. page.tsx'in son hâli:

1import MacKarti from "@/components/MacKarti"2import YeniMacFormu from "@/components/YeniMacFormu"3import { maclar } from "@/lib/maclar"4 5export default function Home() {6    return (7        <main className="mx-auto max-w-5xl px-4 py-8">8            <div className="flex flex-wrap items-center justify-between gap-4">9                <div>10                    <h1 className="text-3xl font-bold">Maç geçmişi</h1>11                    <p className="mt-1 text-zinc-600 dark:text-zinc-400">Son maçlarına bak, yenisini ekle.</p>12                </div>13                <a href="#yeni-mac" className="rounded-lg bg-violet-700 px-4 py-2 font-semibold text-white hover:bg-violet-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500">14                    Maç ekle15                </a>16            </div>17            <ul className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">18                {maclar.map((mac) => (19                    <li key={mac.id}>20                        <MacKarti mac={mac} />21                    </li>22                ))}23            </ul>24            <YeniMacFormu />25        </main>26    )27}

"Maç ekle" düğmeye benziyor ama bir bağlantı (<a>): sayfada bir yere götürüyor, bir iş yapmıyor. Kural: götüren şey bağlantı, iş yapan şey düğme. Ekran okuyucu ikisini farklı duyurur, klavyede Enter ikisinde de çalışır ama Space yalnız düğmede çalışır. Görünüş aynı olabilir; etiket doğru olmalı. #yeni-mac adresi sayfayı id="yeni-mac" olan forma kaydırır (Ders 19'daki sayfa içi bağlantı).

Boş formla Kaydet'e bas:

localhost:3000

Hata yalnız kırmızı renkle değil, bir cümleyle de anlatılıyor. Bunun neden önemli olduğunu az sonra göreceksin.

#Erişilebilirlik: dört denetim

Erişilebilirlik temellerini Ders 19'da, kontrol listesini Ders 25'te gördün. Tailwind ve React'te kurallar değişmez; yalnız onları bozmanın yeni yolları çıkar. Her bileşeni bitirdiğinde dört soruyu sor: her şeyin bir adı var mı, odak görünüyor mu, kontrast yetiyor mu, klavyeyle her yere ulaşılıyor mu?

#Etiket: her şeyin bir adı olsun

Ekran okuyucu bir kutuya ya da düğmeye geldiğinde onun adını okur. Ad nereden gelir?

• Girdi kutusunda: ona bağlı <label>. placeholder etiket değildir: kullanıcı yazmaya başlayınca kaybolur, kutuya ne yazdığını unutan biri geri dönüp bakamaz.
• Düğmede ve bağlantıda: içindeki yazı. "Kaydet" yazan düğmenin adı "Kaydet".
• Yalnız simgeli bir düğmede ad yoktur. Adı ya aria-label ile ya da gözle görünmeyen bir yazıyla verirsin:

<button type="button" aria-label="Aramayı temizle">    <svg aria-hidden="true" viewBox="0 0 24 24">…</svg></button> <button type="button">    <span className="sr-only">Aramayı temizle</span>    <svg aria-hidden="true" viewBox="0 0 24 24">…</svg></button>

sr-only Tailwind'in "yalnız ekran okuyucu için" sınıfı: yazıyı sayfada tutar ama 1×1 piksellik görünmez bir kutuya sıkıştırır. Gözle bakan görmez, ekran okuyucu okur. İki yol da aynı adı verir. Simgedeki aria-hidden="true" ise SVG'nin ayrıca okunmasını önler.

Resimlerde ad, alt metnidir (Ders 19). Bilgi taşıyan resme ne gösterdiğini yaz; yalnız süs olan resme alt="" ver ki ekran okuyucu atlasın. Ders 43'teki next/image'ın Image bileşeni alt'ı zorunlu tutar; yazmazsan tsc Property 'alt' is missing diye uyarır.

#Odak: nerede olduğunu göster

Fareyi kullanamayan biri sayfada Tab ile gezer. Odak çerçevesi onun fare imlecidir. Bizim sayfamızda Tab sırası şöyle çıktı:

1. "Maç ekle" bağlantısı
2. Şampiyon kutusu
3. Sonuç listesi
4. Kaydet düğmesi

Geliştirme sunucusunda (npm run dev) beşinci Tab ekranın sol alt köşesindeki yuvarlak N düğmesine gider: o Next'in geliştirici aracı, yayın hâlinde (npm start) yoktur. Kartlarda tıklanacak bir şey yok; o yüzden Tab onları atlıyor. Sıra, öğelerin HTML'deki sırası; görsel olarak yerlerini değiştirsen bile (ör. flex-row-reverse) Tab HTML sırasını izler.

Sık hataOdak çerçevesini kaldırmak: outline-none

Ne zaman çıkar? İnternetteki hazır düğme örneklerinin çoğunda focus:outline-none ya da outline-none yazar: tarayıcının odak çerçevesi "çirkin" bulunup kapatılır. Dugme'deki üç focus-visible: sınıfını silip yerine outline-none yazarsan formda Tab'a dört kez bastığında şunu görürsün:

Hata mesajı yok; Lighthouse da bunu yakalamaz. Fareyle gezen biri hiçbir şey fark etmez. Klavyeyle gezen biri ise Enter'a basınca neyin olacağını bilemez: imleci görünmeyen bir fareyle tıklamak gibi.

Nasıl düzelir? Çerçeveyi silme, kendi tarzında çiz: focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500. Tarayıcının çerçevesini illa gizlemen gerekiyorsa (ör. odağı başka bir yolla, kalın bir gölgeyle gösterdiğinde) outline-none yerine outline-hidden kullan: çerçeveyi normalde gizler ama Windows'un yüksek karşıtlık temalarında (Ayarlar → Erişilebilirlik → Karşıtlık temaları; İngilizce Windows'ta Settings → Accessibility → Contrast themes) yine çizer. O temalarda tarayıcı gölgeleri siler, renkleri de sistemin renkleriyle değiştirir; geriye odağın tek ipucu olarak çerçeve kalır.

#Kontrast: okunabiliyor mu?

Ders 20'de normal yazı için en az 4,5:1, Ders 25'te kutu kenarları için en az 3:1 sınırını gördün. Bir ayrıntı daha: büyük yazıda (24 piksel ve üstü ya da yaklaşık 18,7 piksel ve üstü kalın) da 3:1 yeter, çünkü iri harf daha kolay seçilir. Bu derste kullandığımız renkleri, sayfada üstünde durdukları zeminle ölçtük:

Son iki satıra dikkat: aynı zinc-400, koyu zeminde rahatça geçerken açık zeminde kalıyor. Beyaz kutuda 4,83:1 ile geçen zinc-500 ise koyu kutuda kalıyor; formdaki ipucu yazısına koyu tema için dark:placeholder:text-zinc-400 (7,59:1) vermemizin sebebi bu. Kontrast bir rengin değil, bir çiftin özelliğidir; her rengi iki temada da kendi zeminiyle ölç. Devre dışı düğme (yarı saydam) bu kuralın dışındadır; basılamadığı için okunması beklenmez, ama yine de ne yazdığı ayırt edilebilmeli.

Ölçmek için Ders 20'deki yolu kullan: yazıya sağ tıkla, İncele de, Styles'ta renk karesine tıkla; renk seçicideki Contrast ratio satırı oranı gösterir.

#Klavye: her şeye ulaşılıyor mu?

Fareyi bırak ve sayfayı yalnız klavyeyle kullan: Tab ile gez, Enter ve Space ile bas, açılır listede ok tuşlarıyla seç. Bir yere ulaşamıyorsan ya da odak bir yerde kayboluyorsa sorun var.

En sık sebep, tıklanacak şeyi div ile yapmaktır: <div onClick={…}>Sil</div>. Fareyle mükemmel çalışır. Ama div odak almaz; Tab onun üstünde durmaz, Enter ona ulaşmaz, ekran okuyucu onun bir düğme olduğunu bilmez. Ne ESLint ne Lighthouse bunu yakalar; Görev 3'te kendin göreceksin. Çözüm her zaman aynı: iş yapan şey <button type="button">, götüren şey <a href> ya da Next'in Link'i. İkisi de klavyeyi, odağı ve ekran okuyucu adını hazır getirir. Görünüşü Tailwind'le istediğin gibi değiştirebilirsin.

#Bilgiyi yalnız renkle verme

Sık hataSonucu yalnız renkle göstermek

Ne zaman çıkar? Bir durumu yalnız renk farkıyla anlatınca. Örneğin kartta "Zafer/Bozgun" yazısını kaldırıp sonucu yalnız kartın sol kenarının rengiyle göstermek:

<article className={`rounded-xl border-l-8 bg-white p-4 shadow-sm ${zafer ? "border-emerald-600" : "border-red-600"}`}>

Erkeklerin yaklaşık 12'de birinde bir tür renk körlüğü var; en yaygını kırmızıyla yeşili ayırt edememek. Chrome bunu gösterebiliyor: Rendering sekmesinde Emulate vision deficiencies listesinden Achromatopsia (no color) (hiç renk görmeyen) ya da Deuteranopia (no green) seç. Kartlarımızdan ikisi (Ahri kazandı, Jinx kaybetti) şöyle göründü:

Deuteranopia'da yeşil kenar gri-zeytine, kırmızı kenar koyu sarıya döndü: iki kart yan yana dururken fark seçiliyor, ama tek bir karta bakan hangisinin kazandığını renkten çıkaramaz. Hiç renk görmeyen için iki kenar neredeyse aynı gri. Hata mesajı yok, Lighthouse da uyarmıyor. Formdaki kırmızı kenar da aynı tuzak olurdu; o yüzden altına bir hata cümlesi yazdık.

Nasıl düzelir? Rengi bırakma, yanına ikinci bir işaret ekle: yazı ("Zafer"), simge (✓ ✗), biçim (dolu ve boş yıldız) ya da desen. Renk görenler için hız, görmeyenler için bilgi.

#ARIA: ne zaman, ne zaman değil

Bu derste birkaç aria- niteliği kullandın. Hepsi aynı ailenin üyesi:

ARIA güçlüdür ve tam bu yüzden tehlikelidir: yanlış ARIA, hiç ARIA olmamasından kötüdür. W3C'nin ARIA kullanım notlarındaki ilk kural şu: doğru HTML öğesi varsa onu kullan, ARIA ekleme.

Gerçekten gerektiği yerler ise bu derste gördüklerin: yalnız simgeli düğmenin adı (aria-label), hatayı kutuya bağlamak (aria-describedby, aria-invalid), değişen mesajı duyurmak (role="alert", role="status", aria-live), aç-kapa düğmesinin durumu (aria-pressed) ve süs öğesini gizlemek (aria-hidden). Bir de menüde o an açık olan sayfanın bağlantısı: Ders 43'ün menü görevinde onu yalnız beyaz renkle (.aktif) ayırmıştın; bağlantıya aria-current="page" eklersen ekran okuyucu "geçerli sayfa" der. Bu da "bilgiyi yalnız renkle verme" kuralının ARIA'lı hâli.

PS C:\kod\stil-atolyesi> npm run lint > stil-atolyesi@0.1.0 lint> eslint  C:\kod\stil-atolyesi\components\MacKarti.tsx  15:27  warning  aria-hiden: This attribute is an invalid ARIA attribute. Did you mean to use aria-hidden?  jsx-a11y/aria-props ✖ 1 problem (0 errors, 1 warning)

#Lighthouse ile ölçmek

Şimdiye kadar gözle ve klavyeyle denetledin. Bir de makineye ölçtür. Lighthouse, Chrome'un (Edge ve Brave'de de var) geliştirici araçlarına gömülü bir denetçi: sayfayı yükler, onlarca kurala karşı sınar ve her kategoriye 0 ile 100 arası bir puan verir.

Rapor en üstte dört daire gösterir. Her biri bir kategori; renk, puanın hangi aralıkta olduğunu söyler:

Erişilebilirlik puanında yarım not yok: bir kural ya geçilir ya kalınır. Bir sayfada on düğmeden biri adsızsa "düğmelerin adı var" kuralı tümüyle kalır. Her kuralın bir ağırlığı vardır; ağır kurallardan kalmak puanı daha çok düşürür. Yeni Chrome sürümlerinde beşinci bir kategori, Agentic Browsing (Türkçesi Ajan Tabanlı Tarama: yapay zekâ ajanlarının sayfayı ne kadar rahat kullanabildiği) görebilirsin; Lighthouse onu hâlâ geliştirme aşamasında diye işaretliyor, bu derste ona bakmıyoruz.

#Bilerek bozup ölçmek

Sayfamız iki temada da dört kategoride 99–100 aldı (Performans 99, diğerleri 100). Neyi yakaladığını görmek için üç şeyi bilerek boz: layout.tsx'te lang="tr"'yi sil, page.tsx'te açıklamanın sınıfını yalnız text-zinc-400 yap, formda Şampiyon'un <label> satırını sil. Yeniden derleyip ölçtüğümüzde:

Kalınan kuralların raporda göründüğü adlar (Türkçe arayüzde ikincisi):

Her satırı açınca sorunlu öğe ve açıklaması çıkar. Kontrastta Lighthouse oranı da yazdı: Element has insufficient color contrast of 2.51 (foreground color: #9f9fa9, background color: #fafafa …). Expected contrast ratio of 4.5:1. Tablodaki 2,51 ile aynı.

Bu tablodan üç ders çıkıyor:

• Lighthouse, sayfayı bilgisayarının o anki temasında ölçer. Windows'un koyu temadaysa açık temadaki kontrast hatasını görmez. Önemli sayfaları iki temada da ölç: Windows'un modunu değiştirip Lighthouse'u yeniden çalıştır.
• Lighthouse placeholder'ı ad sayar. Etiketi sildik, Lighthouse sustu; çünkü kutunun hâlâ "Örn. Ahri" diye bir adı var. Gözle bakan kullanıcı ise yazmaya başlayınca kutunun ne için olduğunu göremez. Kuralı geçmek, sorunu çözmek değil.
• 100 puan "erişilebilir" demek değildir. Odak çerçevesini silmek, div'e onClick vermek, bilgiyi yalnız renkle vermek bu derste hiçbir puanı düşürmedi. Erişilebilirlik bölümünün altında Additional items to manually check (Türkçe arayüzde Manuel olarak kontrol edilecek ek öğeler) başlığıyla on maddelik bir liste var: etkileşimli öğeler klavyeyle odaklanabiliyor mu, sekme sırası mantıklı mı, odak bir yerde tuzağa düşüyor mu… Puanı etkilemezler; onları sen denetlersin.

#Boş, yükleniyor ve hata durumları

Ders 24'te bir sayfanın dört durumunu gördün: yükleniyor, dolu, boş, hata. Orada her durum tek satırlık bir yazıydı. İyi bir arayüz bundan fazlasını yapar: her durumda kullanıcıya ne olduğunu ve ne yapabileceğini söyler. Bu bölümde maçları bir "veritabanından" bekleyen sayfa yapacak ve üç durumu tasarlayacaksın.

Önce hazırlık. Başlık üç ekranda da (sayfa, yükleniyor, hata) aynı kalacak; üç yere kopyalamak yerine bir bileşene taşı. components/SayfaBasi.tsx:

1export default function SayfaBasi() {2    return (3        <div className="flex flex-wrap items-center justify-between gap-4">4            <div>5                <h1 className="text-3xl font-bold">Maç geçmişi</h1>6                <p className="mt-1 text-zinc-600 dark:text-zinc-400">Son maçlarına bak, yenisini ekle.</p>7            </div>8            <a href="#yeni-mac" className="rounded-lg bg-violet-700 px-4 py-2 font-semibold text-white hover:bg-violet-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500">9                Maç ekle10            </a>11        </div>12    )13}

Sonra lib/maclar.ts'in sonuna, veritabanını taklit eden bir fonksiyon ekle. Fonksiyonun ilk satırı Ders 44'teki bekle ile aynı işi görür: bir buçuk saniye bekler. Ardından verilen durum'a göre hata fırlatır ya da boş liste döndürür; böylece üç durumu da istediğin an görebileceksin:

18export async function maclariGetir(durum?: string) {19    await new Promise((coz) => setTimeout(coz, 1500))20    if (durum === "hata") {21        throw new Error("Veritabanına bağlanılamadı")22    }23    if (durum === "bos") {24        return []25    }26    return maclar27}

durum'u adresten okuyacağız: localhost:3000/?durum=bos gibi. Adresin ?'ten sonraki kısmını (Ders 18) Next sayfaya searchParams prop'uyla verir. Ders 43'teki params gibi bu da bir Promise; await ile açarsın. page.tsx'in son hâli:

1import BosDurum from "@/components/BosDurum"2import MacKarti from "@/components/MacKarti"3import SayfaBasi from "@/components/SayfaBasi"4import YeniMacFormu from "@/components/YeniMacFormu"5import { maclariGetir } from "@/lib/maclar"6 7export default async function Home({ searchParams }: PageProps<"/">) {8    const { durum } = await searchParams9    const liste = await maclariGetir(typeof durum === "string" ? durum : undefined)10    return (11        <main className="mx-auto max-w-5xl px-4 py-8">12            <SayfaBasi />13            {liste.length === 0 ? (14                <BosDurum />15            ) : (16                <ul className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">17                    {liste.map((mac) => (18                        <li key={mac.id}>19                            <MacKarti mac={mac} />20                        </li>21                    ))}22                </ul>23            )}24            <YeniMacFormu />25        </main>26    )27}

• PageProps<"/">: Next'in senin için ürettiği tip; içinde searchParams: Promise<Record<string, string | string[] | undefined>> var. ?durum=bos&durum=hata gibi aynı ad iki kez yazılırsa değer dizi olur, hiç yazılmazsa undefined.
• typeof durum === "string": daraltma. Yalnız düz metinse fonksiyona veriyoruz.
• BosDurum, loading.tsx ve error.tsx'i aşağıda yazacaksın. BosDurum.tsx dosyası yokken sayfayı açarsan Next onu bulamadığı için hata gösterir; üçünü de yazdıktan sonra dene.

#Yükleniyor: iskelet

Sayfa artık 1,5 saniye bekliyor. Bu sürede ne görünecek? Ders 44'te loading.tsx'e bir "yükleniyor" yazısı ve üç gri kutu koymuştun. Yalnız yazı iki kusur taşır: kullanıcı ne geleceğini bilmez ve veri gelince sayfa birden zıplar. Gri kutular ikisini de çözebilir, ama yalnız gelecek içerikle aynı boyda olurlarsa. Bu bölümde iskeleti ölçüp tasarlayacaksın.

app/loading.tsx:

1import SayfaBasi from "@/components/SayfaBasi"2 3export default function Yukleniyor() {4    return (5        <main className="mx-auto max-w-5xl px-4 py-8">6            <SayfaBasi />7            <p role="status" className="sr-only">Maçlar yükleniyor…</p>8            <ul aria-hidden="true" className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">9                {[1, 2, 3].map((n) => (10                    <li key={n} className="rounded-xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">11                        <div className="animate-pulse motion-reduce:animate-none">12                            <div className="flex items-center justify-between">13                                <div className="h-7 w-24 rounded bg-zinc-200 dark:bg-zinc-700" />14                                <div className="h-6 w-16 rounded-full bg-zinc-200 dark:bg-zinc-700" />15                            </div>16                            <div className="mt-3 h-7 w-32 rounded bg-zinc-200 dark:bg-zinc-700" />17                            <div className="mt-1 h-5 w-20 rounded bg-zinc-200 dark:bg-zinc-700" />18                        </div>19                    </li>20                ))}21            </ul>22        </main>23    )24}

• Aynı iskelet: Başlık gerçek SayfaBasi; zaten bildiğimiz şeyi gri kutuyla göstermeye gerek yok. Kartlar gerçek kartın kabuğu (kenar, zemin, p-4), içleri gri çubuklar. Çubukların yükseklikleri gerçek satırların yüksekliğine göre seçildi: h-7 (28 piksel) text-lg başlığın, h-5 (20 piksel) text-sm sürenin satır yüksekliği. Ölçtük: iskelet kartı da gerçek kart da 126 piksel yüksekliğinde. Veri gelince hiçbir şey kaymıyor.
• animate-pulse: Tailwind'in hazır animasyonu; kutular yavaşça solup koyulaşır, "bir şey oluyor" der. motion-reduce:animate-none ise Windows'ta Ayarlar → Erişilebilirlik → Görsel efektler → Animasyon efektleri'ni (İngilizce Windows'ta Settings → Accessibility → Visual effects → Animation effects) kapatan kullanıcılarda animasyonu durdurur; bunu genelde hareket görünce başı dönen ya da dikkati dağılan kişiler kapatır. Bu tercihi tarayıcı prefers-reduced-motion ile bildirir; Rendering sekmesinden de taklit edebilirsin.
• Ekran okuyucu için: Gri kutuların okunacak bir şeyi yok; aria-hidden="true" onları gizler. Yerine sr-only bir role="status" paragrafı "Maçlar yükleniyor…" der.

Sayfayı yenile:

localhost:3000

Lighthouse bu sayfaya Performans'tan 99 ile 100 arası puan verdi; 1,5 saniyelik beklemeye rağmen. Çünkü sayfanın ilk görünen hâli (başlık ve iskelet) beklemeden geliyor ve sonra hiçbir şey kaymıyor.

#Boş durum: yol göster

localhost:3000/?durum=bos'u aç. Liste boş olunca kullanıcıya boş bir alan değil, bir sonraki adımı göster.

components/BosDurum.tsx:

1export default function BosDurum() {2    return (3        <div className="mt-6 rounded-xl border-2 border-dashed border-zinc-300 px-6 py-12 text-center dark:border-zinc-700">4            <svg aria-hidden="true" viewBox="0 0 24 24" className="mx-auto size-12 text-zinc-500" fill="none" stroke="currentColor" strokeWidth="1.5">5                <rect x="4" y="3" width="16" height="18" rx="2" />6                <path d="M8 8h8M8 12h8M8 16h5" />7            </svg>8            <h2 className="mt-4 text-lg font-bold">Henüz maç yok</h2>9            <p className="mt-1 text-zinc-600 dark:text-zinc-400">Oynadığın maçları ekledikçe burada kart kart görünecek.</p>10            <a href="#yeni-mac" className="mt-6 inline-block rounded-lg bg-violet-700 px-4 py-2 font-semibold text-white hover:bg-violet-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500">11                İlk maçını ekle12            </a>13        </div>14    )15}

border-dashed kesik kenar "burası henüz boş bir yer" der. size-12 simgenin hem genişliğini hem yüksekliğini 48 piksel yapar; stroke="currentColor" SVG'nin çizgisini text-zinc-500'ün rengine bağlar. Simge süs; adı yok, aria-hidden'la gizli.

localhost:3000/?durum=bos

İki çeşit boşluğu karıştırma. "Hiç maç yok" ile "aramana uyan maç yok" farklı durumlardır: ilkinde "İlk maçını ekle" dersin, ikincisinde "Filtreyi temizle". İkisine aynı ekranı gösterirsen, filtresi açık kalmış kullanıcı bütün maçlarının silindiğini sanır.

#Hata durumu: ne oldu, ne yapmalı?

localhost:3000/?durum=hata'yı aç. maclariGetir bir hata fırlatıyor; Next sayfanın yerine error.tsx'i çizer. Ders 44'teki gibi bu dosya bir istemci bileşenidir ve retry fonksiyonunu prop olarak alır: çağırınca Next sayfanın verisini sunucudan yeniden ister ve çizmeyi bir kez daha dener. Bu sefer error prop'unu almıyoruz; ekranda teknik ayrıntı göstermeyeceğiz.

1"use client"2 3import Dugme from "@/components/Dugme"4import SayfaBasi from "@/components/SayfaBasi"5 6export default function HataSayfasi({ retry }: { retry: () => void }) {7    return (8        <main className="mx-auto max-w-5xl px-4 py-8">9            <SayfaBasi />10            <div role="alert" className="mt-6 rounded-xl border border-red-300 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950">11                <h2 className="text-lg font-bold text-red-800 dark:text-red-200">Maçlar yüklenemedi</h2>12                <p className="mt-1 text-red-800 dark:text-red-200">Sunucuya şu an ulaşamıyoruz. Bilgilerin silinmedi; birazdan yeniden dene.</p>13                <div className="mt-4">14                    <Dugme onClick={() => retry()}>Yeniden dene</Dugme>15                </div>16            </div>17        </main>18    )19}

localhost:3000/?durum=hata

İyi bir hata ekranının dört özelliği:

1. Sayfa çökmüş gibi görünmez. Başlık ve "Maç ekle" bağlantısı yerinde; kullanıcı nerede olduğunu biliyor.
2. Ne olduğunu insan diliyle söyler. "Maçlar yüklenemedi", Error: ECONNREFUSED değil.
3. Kaygıyı giderir. "Bilgilerin silinmedi" cümlesi, maç kayıtlarının kaybolduğunu sanan birini sakinleştirir.
4. Bir çıkış yolu sunar. "Yeniden dene" düğmesi. Sorun geçiciyse tek basış yeter.

Teknik ayrıntıyı kullanıcıya göstermiyoruz. Yayın hâlinde Next zaten göstermez: sunucu bileşeninde fırlatılan hatanın mesajı tarayıcıya hiç gitmez. Bu denemeyi npm run build ve npm start ile yaptık; tarayıcının konsolunda yalnız kısaltılmış bir React satırı çıktı, gerçek hata sunucunun terminalindeydi:

PS C:\kod\stil-atolyesi> npm start...⨯ Error: Veritabanına bağlanılamadı    at i (C:\kod\stil-atolyesi\.next\server\chunks\ssr\_1fsjxgo00dktp._.js:1:2254)    ... {  digest: '3517635533'}

Error: Minified React error #441; visit https://react.dev/errors/441 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

digest hatanın kimliği: kullanıcı "bir hata aldım" dediğinde terminaldeki ya da barındırıcının loglarındaki (Ders 32) satırı bu sayıyla bulursun. Geliştirme sunucusunda (npm run dev) ise Next, hatayı ekranın köşesindeki kırmızı N düğmesinde de gösterir; o yalnız senin içindir.

#Görevler

Görevleri C:\kod\stil-atolyesi projesinde yap. Her görev yeni bir sayfa ya da bileşen; dersin dosyalarını bozmadan yan yana durabilirler. Bitirince sayfayı hem açık hem koyu temada, hem telefon hem bilgisayar genişliğinde aç.

bg-violet-100 text-violet-800bg-amber-100 text-amber-800bg-zinc-100 text-zinc-800bg-zinc-100 text-zinc-800bg-zinc-100 text-zinc-800

1const rolSiniflari: Record<string, string> = {2    "Tank": "bg-sky-100 text-sky-800",3    "Suikastçı": "bg-red-100 text-red-800",4    "Büyücü": "bg-violet-100 text-violet-800",5    "Nişancı": "bg-amber-100 text-amber-800",6    "Destek": "bg-emerald-100 text-emerald-800",7}8 9function rolSinifi(rol: string) {10    return rolSiniflari[rol] ?? "bg-zinc-100 text-zinc-800"11}12 13console.log(rolSinifi("Büyücü"))14console.log(rolSinifi("Nişancı"))15console.log(rolSinifi("Orman"))16console.log(rolSinifi("tank"))17console.log(rolSinifi(""))

bg-violet-100 text-violet-800bg-amber-100 text-amber-800bg-zinc-100 text-zinc-800bg-zinc-100 text-zinc-800bg-zinc-100 text-zinc-800

1import { rolSinifi } from "@/lib/roller"2 3export default function RolRozeti({ rol }: { rol: string }) {4    return <span className={`rounded-full px-2.5 py-0.5 text-sm font-semibold ${rolSinifi(rol)}`}>{rol}</span>5}

const birimler = [    { ad: "Garen", maliyet: 1 },    { ad: "Lux", maliyet: 2 },    { ad: "Jinx", maliyet: 3 },    { ad: "Teemo", maliyet: 4 },    { ad: "Annie", maliyet: 5 },]

1const birimler = [2    { ad: "Garen", maliyet: 1 },3    { ad: "Lux", maliyet: 2 },4    { ad: "Jinx", maliyet: 3 },5    { ad: "Teemo", maliyet: 4 },6    { ad: "Annie", maliyet: 5 },7]8 9export default function Dukkan() {10    return (11        <main className="mx-auto max-w-5xl px-4 py-8">12            <h1 className="text-2xl font-bold">Dükkân</h1>13            <ul className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">14                {birimler.map((birim) => (15                    <li key={birim.ad} className="rounded-lg border border-zinc-200 bg-white p-3 text-center dark:border-zinc-800 dark:bg-zinc-900">16                        <p className="font-semibold">{birim.ad}</p>17                        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{birim.maliyet} altın</p>18                    </li>19                ))}20            </ul>21        </main>22    )23}

1"use client"2 3import { useState } from "react"4 5const sampiyonlar = ["Ahri", "Annie", "Garen", "Jinx", "Lux", "Teemo"]6 7export default function SampiyonArama() {8    const [arama, setArama] = useState("")9    const [favori, setFavori] = useState("")10    const sonuclar = sampiyonlar.filter((ad) => ad.toLowerCase().includes(arama.toLowerCase()))11 12    return (13        <div className="max-w-sm rounded-xl bg-white p-6 dark:bg-zinc-900">14            <div className="flex gap-2">15                <input value={arama} onChange={(olay) => setArama(olay.target.value)} placeholder="Şampiyon ara" className="w-full rounded-lg border border-zinc-500 px-3 py-2 outline-none" />16                <button type="button" onClick={() => setArama("")} className="cursor-pointer rounded-lg bg-violet-700 px-3 text-white outline-none">17                    <svg viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth="2">18                        <path d="M6 6l12 12M18 6L6 18" />19                    </svg>20                </button>21            </div>22            <p className="mt-2 text-sm text-zinc-400">Yazdıkça liste süzülür.</p>23            <ul className="mt-4 space-y-2">24                {sonuclar.map((ad) => (25                    <li key={ad}>26                        <div onClick={() => setFavori(ad)} className={`cursor-pointer rounded-lg px-3 py-2 ${favori === ad ? "bg-amber-200 dark:bg-amber-900" : "hover:bg-zinc-100 dark:hover:bg-zinc-800"}`}>27                            {ad}28                        </div>29                    </li>30                ))}31            </ul>32        </div>33    )34}

1import SampiyonArama from "@/components/SampiyonArama"2 3export default function Arama() {4    return (5        <main className="mx-auto max-w-5xl px-4 py-8">6            <h1 className="text-2xl font-bold">Favori şampiyonun</h1>7            <div className="mt-4">8                <SampiyonArama />9            </div>10        </main>11    )12}

1"use client"2 3import { useState } from "react"4 5const sampiyonlar = ["Ahri", "Annie", "Garen", "Jinx", "Lux", "Teemo"]6const odak = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500"7 8export default function SampiyonArama() {9    const [arama, setArama] = useState("")10    const [favori, setFavori] = useState("")11    const sonuclar = sampiyonlar.filter((ad) => ad.toLowerCase().includes(arama.toLowerCase()))12 13    return (14        <div className="max-w-sm rounded-xl bg-white p-6 dark:bg-zinc-900">15            <label htmlFor="arama" className="block font-medium">Şampiyon ara</label>16            <div className="mt-1 flex gap-2">17                <input id="arama" value={arama} onChange={(olay) => setArama(olay.target.value)} aria-describedby="arama-ipucu" className={`w-full rounded-lg border border-zinc-500 px-3 py-2 ${odak}`} />18                <button type="button" onClick={() => setArama("")} aria-label="Aramayı temizle" className={`cursor-pointer rounded-lg bg-violet-700 px-3 text-white ${odak}`}>19                    <svg aria-hidden="true" viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth="2">20                        <path d="M6 6l12 12M18 6L6 18" />21                    </svg>22                </button>23            </div>24            <p id="arama-ipucu" className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">Yazdıkça liste süzülür.</p>25            <ul className="mt-4 space-y-2">26                {sonuclar.map((ad) => (27                    <li key={ad}>28                        <button type="button" onClick={() => setFavori(ad)} aria-pressed={favori === ad} className={`w-full cursor-pointer rounded-lg px-3 py-2 text-left ${odak} ${favori === ad ? "bg-amber-200 font-semibold dark:bg-amber-900" : "hover:bg-zinc-100 dark:hover:bg-zinc-800"}`}>29                            <span aria-hidden="true">{favori === ad ? "★ " : "☆ "}</span>30                            {ad}31                        </button>32                    </li>33                ))}34            </ul>35        </div>36    )37}

1export default function Sampiyon() {2    return (3        <main className="mx-auto max-w-2xl px-4 py-8">4            <article className="flex gap-4 rounded-xl border border-zinc-200 bg-white p-4">5                <div aria-hidden="true" className="grid size-24 shrink-0 place-items-center rounded-lg bg-violet-700 text-4xl font-bold text-white">A</div>6                <div>7                    <h2 className="text-xl font-bold text-zinc-900">Ahri</h2>8                    <p className="text-sm text-zinc-500">Dokuz Kuyruklu Tilki</p>9                    <p className="mt-2 text-zinc-700">Ruhları büyüleyen, hızlı ve hareketli bir büyücü. Yakın dövüşe girip çıkmayı sever.</p>10                </div>11            </article>12        </main>13    )14}

1export default function Sampiyon() {2    return (3        <main className="mx-auto max-w-2xl px-4 py-8">4            <article className="flex flex-col gap-4 rounded-xl border border-zinc-200 bg-white p-4 sm:flex-row dark:border-zinc-800 dark:bg-zinc-900">5                <div aria-hidden="true" className="grid size-24 shrink-0 place-items-center rounded-lg bg-violet-700 text-4xl font-bold text-white">A</div>6                <div>7                    <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Ahri</h2>8                    <p className="text-sm text-zinc-500 dark:text-zinc-400">Dokuz Kuyruklu Tilki</p>9                    <p className="mt-2 text-zinc-700 dark:text-zinc-300">Ruhları büyüleyen, hızlı ve hareketli bir büyücü. Yakın dövüşe girip çıkmayı sever.</p>10                </div>11            </article>12        </main>13    )14}

1export type Favori = {2    id: number3    ad: string4    rol: string5}6 7const favoriler: Favori[] = [8    { id: 1, ad: "Ahri", rol: "Büyücü" },9    { id: 2, ad: "Jinx", rol: "Nişancı" },10    { id: 3, ad: "Garen", rol: "Tank" },11]12 13export async function favorileriGetir(durum?: string) {14    await new Promise((coz) => setTimeout(coz, 1500))15    if (durum === "hata") {16        throw new Error("Favoriler okunamadı")17    }18    if (durum === "bos") {19        return []20    }21    if (durum === "tek") {22        return favoriler.slice(0, 1)23    }24    return favoriler25}

1import Link from "next/link"2import { favorileriGetir } from "@/lib/favoriler"3 4export default async function Favoriler({ searchParams }: PageProps<"/favoriler">) {5    const { durum } = await searchParams6    const liste = await favorileriGetir(typeof durum === "string" ? durum : undefined)7    return (8        <main className="mx-auto max-w-md px-4 py-8">9            <h1 className="text-2xl font-bold">Favori şampiyonların</h1>10            {liste.length === 0 ? (11                <div className="mt-4 rounded-xl border-2 border-dashed border-zinc-300 p-8 text-center dark:border-zinc-700">12                    <h2 className="font-bold">Henüz favorin yok</h2>13                    <p className="mt-1 text-zinc-600 dark:text-zinc-400">Bir şampiyonun yıldızına basınca burada görünür.</p>14                    <Link href="/" className="mt-4 inline-block rounded-lg bg-violet-700 px-4 py-2 font-semibold text-white hover:bg-violet-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500">15                        Şampiyonlara göz at16                    </Link>17                </div>18            ) : (19                <ul className="mt-4 space-y-3">20                    {liste.map((favori) => (21                        <li key={favori.id} className="flex items-center gap-3 rounded-xl border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-900">22                            <div aria-hidden="true" className="grid size-10 place-items-center rounded-full bg-violet-700 font-bold text-white">{favori.ad[0]}</div>23                            <div>24                                <p className="font-semibold">{favori.ad}</p>25                                <p className="text-sm text-zinc-600 dark:text-zinc-400">{favori.rol}</p>26                            </div>27                        </li>28                    ))}29                </ul>30            )}31        </main>32    )33}

1export default function FavorilerYukleniyor() {2    return (3        <main className="mx-auto max-w-md px-4 py-8">4            <h1 className="text-2xl font-bold">Favori şampiyonların</h1>5            <p role="status" className="sr-only">Favoriler yükleniyor…</p>6            <ul aria-hidden="true" className="mt-4 space-y-3">7                {[1, 2, 3].map((n) => (8                    <li key={n} className="flex animate-pulse items-center gap-3 rounded-xl border border-zinc-200 bg-white p-3 motion-reduce:animate-none dark:border-zinc-800 dark:bg-zinc-900">9                        <div className="size-10 rounded-full bg-zinc-200 dark:bg-zinc-700" />10                        <div>11                            <div className="h-6 w-24 rounded bg-zinc-200 dark:bg-zinc-700" />12                            <div className="h-5 w-16 rounded bg-zinc-200 dark:bg-zinc-700" />13                        </div>14                    </li>15                ))}16            </ul>17        </main>18    )19}

1"use client"2 3import Dugme from "@/components/Dugme"4 5export default function FavorilerHata({ retry }: { retry: () => void }) {6    return (7        <main className="mx-auto max-w-md px-4 py-8">8            <h1 className="text-2xl font-bold">Favori şampiyonların</h1>9            <div role="alert" className="mt-4 rounded-xl border border-red-300 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950">10                <h2 className="font-bold text-red-800 dark:text-red-200">Favorilerin yüklenemedi</h2>11                <p className="mt-1 text-red-800 dark:text-red-200">Listen yerinde duruyor, yalnız şu an okuyamadık. Birazdan yeniden dene.</p>12                <div className="mt-4">13                    <Dugme onClick={() => retry()}>Yeniden dene</Dugme>14                </div>15            </div>16        </main>17    )18}

#Kendini sına

<h1 className="text-xl md:text-3xl">Maç geçmişi</h1>

<span className={`bg-${sonuc === "zafer" ? "emerald" : "red"}-100`}>{sonuc}</span>

<p className="text-zinc-600 text-red-700">Hata!</p>