Next.js temelleri

Üç derstir React ile arayüz kuruyorsun: bileşenler, state, effect. Ama gerçek bir site tek bir ekrandan ibaret değil: birden çok sayfası, her sayfanın kendi adresi, sekmede bir başlığı, bulunamayan adresler için bir 404 sayfası olur. Bu derste React'in üstüne kurulan Next.js çatısıyla tanışıyorsun. Dersin sonunda Şampiyon Rehberi adında çok sayfalı bir siten olacak: ana sayfa, şampiyon listesi, her şampiyon için ayrı bir adres (/sampiyonlar/1, /sampiyonlar/2…), kendi 404 sayfan, sekme başlıkları, hızlı yüklenen resimler ve Türkçe harfleri sorunsuz gösteren bir yazı tipi.

#Next.js neden var?

Ders 40'tan beri yazdığın React uygulamalarının hepsi aynı yoldan açılıyor: sunucu tarayıcıya içi boş bir HTML ve bir yığın JavaScript dosyası gönderiyor, tarayıcı JavaScript'i çalıştırıyor, React sayfayı orada kuruyor. Veri gerekiyorsa sayfa önce "yükleniyor" diyor, fetch cevap verince doluyor. Bu düzen çalışır, ama üç derdi var:

• İlk görüntü geç gelir. Telefon yavaşsa kullanıcı, JavaScript inip çalışana kadar boş bir sayfaya bakar.
• Arama motorları ve paylaşım önizlemeleri boş sayfa görür. Google'ın, WhatsApp'ın bağlantı önizlemesinin okuduğu ilk HTML'de yalnız <div id="root"></div> vardır.
• Sayfa ve adres kavramı yoktur. Vite projesi tek bir index.html'den ibaret. /sampiyonlar/ahri gibi adresler, sayfalar arası geçiş, sekme başlığı, 404 sayfası… hepsini kendin kurman gerekir.

Next.js bu üçünü birden çözer. Bileşenlerini önce sunucuda çalıştırır ve tarayıcıya dolu bir HTML gönderir. Adresleri de klasörlerinden çıkarır: app/sampiyonlar/page.tsx dosyasını oluşturursan /sampiyonlar adresi kendiliğinden olur. React'i bırakmıyorsun; Next.js, React'i bu işler için düzenleyen bir çatı. Ders 28'de Express de Node için bir çatıydı.

#Proje açmak: create-next-app

Next.js projesini Vite'taki gibi bir sihirbazla açıyorsun: create-next-app. Bu derste Next.js 16.4 kullanıyoruz (npm view next version bu dersi yazarken 16.4.0 diyordu). Sihirbaz, komuta --ts gibi -- ile başlayan seçenekler yazılmazsa soru sorar. Bu seçeneklere bayrak (İngilizce flag) da denir. Biz cevapları bayraklarla komuta yazıyoruz ki herkesin projesi aynı olsun. Önceki derslerin projeleriyle karışmasın diye yeni bir klasör açacağız: next-rehber.

VS Code'da bir terminal aç, cd C:\kod ile kod klasörüne geç ve yaz (tek satır; uzun olduğu için kopyalayabilirsin):

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

İlk çalıştırmada npm, sihirbazı indirmek için izin ister; y yaz ve Enter'a bas. Sonra kurulum yaklaşık yarım dakika sürer. Ekran şöyle akar:

PS C:\kod> npx create-next-app@latest next-rehber --ts --app --tailwind --eslint --no-src-dir --import-alias "@/*" --no-react-compiler --no-cache-components --use-npmNeed to install the following packages:create-next-app@16.4.0Ok to proceed? (y) y Using defaults for unprovided options:   --agents-md             AGENTS.md (use --no-agents-md for No AGENTS.md)  --no-agent-feedback     No agent feedback (use --agent-feedback for Agent feedback) Creating a new Next.js app in C:\kod\next-rehber. Using npm. Initializing project with template: app-tw  Installing dependencies:- next- react- react-dom Installing devDependencies:- @tailwindcss/turbopack- @types/node- @types/react- @types/react-dom- eslint- eslint-config-next- tailwindcss- typescript npm warn deprecated eslint@9.39.5: This version is no longer supported. Please see https://eslint.org/version-support for other options. added 357 packages, and audited 358 packages in 34s 145 packages are looking for funding  run `npm fund` for details 5 high severity vulnerabilities To address all issues (including breaking changes), run:  npm audit fix --force Run `npm audit` for details.npm warn install-scripts 1 package has install scripts not yet covered by allowScripts:npm warn install-scripts   unrs-resolver@1.12.2 (postinstall: node postinstall.js)npm warn install-scriptsnpm warn install-scripts Run `npm install-scripts ls` to review, or `npm install-scripts approve <pkg>` to allow. Generating route types...✓ Types generated successfully Initialized a git repository. Success! Created next-rehber at C:\kod\next-rehber

Uzun ama korkutucu değil. Satır satır:

• Using defaults for unprovided options: yazmadığın iki seçenek için varsayılanı kullandı. AGENTS.md, yapay zekâ kod yardımcılarına "bu Next sürümünün belgeleri node_modules/next/dist/docs içinde, önce onları oku" diyen kısa bir not. Blok 7'de anlamı netleşecek; dokunmana gerek yok.
• npm warn ile başlayan satırlar uyarı, hata değil. Proje kuruldu.
• 5 high severity vulnerabilities: npm audit bunların ESLint'in yardımcı paketlerinde olduğunu söylüyor, yani yalnız senin bilgisayarında çalışan geliştirme araçlarında; sitene giren kodda değil. npm audit fix --force çalıştırma: bu projede eslint-config-next'i 14.2.35'e indirmeyi öneriyor, yani Next 16 için yazılmış ayarı iki ana sürüm geriye götürüp projeyi bozar. Paket yazarları düzeltme yayımlayınca normal bir npm update yeter.
• Initialized a git repository: sihirbaz git init yaptı ve ilk kaydı (Initial commit from Create Next App) kendisi aldı. Dersin sonunda bu yüzden git init yazmayacaksın.

Bu ders create-next-app 16.4.0 ile denendi. Daha yeni bir sürümde birkaç satır değişebilir ya da altta npm notice ile başlayan bir yeni sürüm duyurusu görebilirsin; görmezden gel.

#Geliştirme sunucusunu başlat

Klasörü VS Code'da aç (güven sorusu gelirse Yes, I trust the authors), terminali aç ve geliştirme sunucusunu başlat:

PS C:\kod> code next-rehber

PS C:\kod\next-rehber> npm run dev > next-rehber@0.1.0 dev> next dev ▲ Next.js 16.4.0 (Turbopack)- Local:         http://localhost:3000- Network:       http://192.168.1.35:3000✓ Ready in 1978ms✓ Running next.config.ts took 66ms ○ Compiling / ... GET / 200 in 495ms (next.js: 319ms, application-code: 176ms)

Next'in geliştirme sunucusu 3000 numaralı portu dinler (Vite 5173'tü). Turbopack, Next'in Vite'a benzeyen derleme aracı: .tsx dosyalarını çevirir, kaydettikçe sayfayı tazeler. - Network: satırındaki adres sende farklı olur; aynı Wi-Fi'deki telefonundan siteye bu adresle bakabilirsin (bunun için Ders 18'deki güvenlik duvarı penceresinde node.exe'ye izin vermiş olman gerekir; localhost izinsiz de çalışır). Son iki satırı ancak tarayıcıda http://localhost:3000'i açınca görürsün: Next bir sayfayı ilk istendiğinde derler (Compiling /), sonra her isteği bir GET satırıyla yazar. 200 durum kodu, parantezdekiler sürenin nereye gittiği. Arada Turbopack has seen frequent file updates… diye bir satır görürsen zararsız: Turbopack, node_modules'taki dosyaların oturmasını bekliyor.

localhost:3000

Sol alttaki yuvarlak N düğmesi Next'in geliştirme araçları. Yalnız npm run dev ile çalışırken görünür; bir hata olunca kırmızıya döner ve kaç sorun olduğunu yazar. Sunucuyu durdurmak için terminalde Ctrl+C.

#Klasörün içi

Vite projesindeki index.html'i arama: Next projesinde yok. Sayfaların HTML'ini Next her istekte (ya da derlemede) kendisi üretiyor. Önemli dosyalar:

• app/: sitenin kendisi. İçinde layout.tsx (bütün sayfaların çerçevesi), page.tsx (ana sayfa), globals.css (bütün siteye uygulanan CSS) ve sekmedeki küçük simge favicon.ico var. Bu derste neredeyse hep burada çalışacaksın.
• public/: olduğu gibi sunulan dosyalar. public/kapak.png dosyası sitede /kapak.png adresinden açılır. Şablonun koyduğu beş SVG burada.
• next.config.ts: Next'in ayarları. Resimler bölümünde buna bir satır ekleyeceksin.
• package.json: betikler. dev (geliştirme sunucusu), build (yayın için derleme), start (derlenmiş siteyi çalıştırma), lint (ESLint).
• tsconfig.json: TypeScript ayarları. "paths": { "@/*": ["./*"] } satırı, @/ takma adının anlamını burada tanımlıyor.
• eslint.config.mjs, AGENTS.md, README.md: ESLint ayarı, yapay zekâ notu ve projeyi tanıtan yazı.
• next-env.d.ts ve .next/: Next'in kendi ürettiği dosyalar. .next derleme çıktısı; ikisi de .gitignore'da, Git'e girmez. Dokunma.

#page.tsx: ilk sayfan

Şablonun sayfası işini gördü. Önce stilleri hazırla: app/globals.css'in ilk satırını (@import "tailwindcss";) bırak, altındaki her şeyi sil ve yerine şunu koy. CSS bu dersin konusu değil; bu kez kopyalayabilirsin. Dersin ilerisinde kullanacağın bütün sınıflar şimdiden burada:

1@import "tailwindcss";2 3body {4    margin: 0;5    background: #16141f;6    color: #e8e6f0;7}8 9.ust {10    display: flex;11    flex-wrap: wrap;12    align-items: center;13    justify-content: space-between;14    gap: 12px;15    padding: 14px 20px;16    border-bottom: 1px solid #34304a;17    background: #1c1928;18}19 20.logo {21    font-size: 20px;22    font-weight: 800;23}24 25.ust nav {26    display: flex;27    gap: 18px;28}29 30.ust nav a {31    color: #a9a4bd;32}33 34.ust nav a:hover,35.ust nav a.aktif {36    color: #ffffff;37}38 39main {40    max-width: 760px;41    margin: 0 auto;42    padding: 24px 16px;43}44 45h1 {46    margin: 0 0 12px;47    font-size: 30px;48    font-weight: 800;49}50 51p {52    margin: 0 0 12px;53    line-height: 1.6;54}55 56.soluk {57    color: #a9a4bd;58}59 60.kapak {61    width: 100%;62    height: auto;63    margin-bottom: 20px;64    border-radius: 14px;65}66 67.dugme {68    display: inline-block;69    padding: 10px 18px;70    border-radius: 999px;71    background: #6d4bd8;72    color: #ffffff;73    font-weight: 700;74}75 76.kartlar {77    display: grid;78    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));79    gap: 12px;80}81 82.kart {83    display: block;84    padding: 16px;85    border: 1px solid #34304a;86    border-radius: 12px;87    background: #211e2e;88}89 90.kart:hover {91    border-color: #6d4bd8;92}93 94.kart h2 {95    margin: 10px 0 2px;96    font-size: 18px;97    font-weight: 700;98}99 100.kart p {101    margin: 0;102    color: #a9a4bd;103}104 105.harf {106    display: grid;107    place-items: center;108    width: 56px;109    height: 56px;110    border-radius: 50%;111    background: #6d4bd8;112    font-size: 24px;113    font-weight: 800;114}115 116.ikon {117    border-radius: 50%;118}119 120.harita {121    width: 240px;122    height: auto;123    margin-bottom: 16px;124    border-radius: 12px;125}126 127.geri {128    display: inline-block;129    margin-bottom: 16px;130    color: #a9a4bd;131}132 133.favori {134    margin-top: 8px;135    padding: 8px 14px;136    border: 1px solid #6d4bd8;137    border-radius: 999px;138    background: transparent;139    color: #e8e6f0;140    font: inherit;141    cursor: pointer;142}143 144.favori.secili {145    background: #6d4bd8;146}

Tailwind satırı neden kalıyor? Ders 45'te kullanacaksın. Şimdilik bir yan etkisini bil: Tailwind, tarayıcının varsayılan stillerini sıfırlar. Başlıklar büyük ve kalın görünmez, bağlantıların altı çizilmez; bu yüzden h1'in boyutunu yukarıda kendimiz verdik.

Şimdi app/page.tsx'in içini tamamen sil ve şunu kendin yaz:

1export default function Home() {2    return (3        <main>4            <h1>Şampiyon Rehberi</h1>5            <p className="soluk">Hangi şampiyonla başlasan? Rollerine ve zorluklarına bak, sana uyanı seç.</p>6        </main>7    )8}

PS C:\kod\next-rehber> npm run dev > next-rehber@0.1.0 dev> next dev ▲ Next.js 16.4.0 (Turbopack)- Local:         http://localhost:3000- Network:       http://192.168.1.35:3000✓ Ready in 1978ms✓ Running next.config.ts took 66ms ○ Compiling / ... GET / 200 in 495ms (next.js: 319ms, application-code: 176ms)

Kaydet ve tarayıcıya bak: koyu zeminde başlık ve soluk bir cümle. Bu, Ders 40'taki App gibi bir bileşen; tek farkı onu kimin çağırdığı. Vite'ta main.tsx içinde <App /> yazıyordun. Burada kimseye söylemiyorsun: Next app/page.tsx dosyasını bulur, varsayılan dışa aktarmasını alır ve / adresinin sayfası olarak çizer. Fonksiyonun adı (Home) önemsiz; dosyanın adı ve yeri önemli.

#Klasör = adres

İkinci bir sayfa için yapman gereken tek şey bir klasör açmak. VS Code'un dosya listesinde app klasörüne sağ tıkla, New Folder ile hakkinda adında bir klasör aç, içine page.tsx adında bir dosya oluştur:

1export default function Hakkinda() {2    return (3        <main>4            <h1>Hakkında</h1>5            <p>Bu site, Next.js öğrenirken yaptığım bir alıştırma projesi.</p>6        </main>7    )8}

Kaydet ve tarayıcıda http://localhost:3000/hakkinda adresine git. Sayfa orada. Ne import yazdın, ne bir yönlendirme listesi: klasörün adı adresin kendisi oldu. Ders 27'de req.url === "/sampiyonlar" gibi if'lerle elle yazdığın yönlendirmeyi, Ders 28'de Express'te app.get("/", …) satırlarıyla kurduğunu Next klasör ağacından kendisi çıkarıyor.

Kurallar az ve kesin:

• Adres yalnız klasör adlarından oluşur. app/hakkinda/page.tsx → /hakkinda. app/sampiyonlar/yeni/page.tsx → /sampiyonlar/yeni.
• Sayfa dosyasının adı her zaman page.tsx, tamamı küçük harf. Page.tsx, index.tsx, hakkinda.tsx sayfa olmaz.
• Bir klasörde page.tsx yoksa o adreste sayfa yoktur, ama klasör yine de alt klasörlerine yol olur.
• Klasöre page.tsx dışında dosya da koyabilirsin (birazdan bir düğme bileşeni koyacaksın). Onlar adres olmaz.
• Klasör adlarında Türkçe harf ve boşluk kullanma; küçük harf yaz, sözcükleri tireyle ayır: yama-notlari. Türkçe harf yasağının sebebi değişken adlarındakiyle aynı; tire ise adreslerin alışılmış yazımı (adreslerde camelCase yerine tire tercih edilir).

 GET /hakkinda 404 in 29ms (next.js: 11ms, application-code: 19ms)

⨯ Error: The default export is not a React Component in "/hakkinda/page"    at ignore-listed frames

#layout.tsx: bütün sayfaların çerçevesi

İki sayfan var ama aralarında gidip gelmenin yolu yok: adresi elle yazıyorsun. Her sayfanın üstüne bir menü koymak istiyorsun. Menüyü iki sayfaya ayrı ayrı yazarsan, üçüncü sayfada da yazman, menü değişince hepsini düzeltmen gerekir. Next'in çözümü layout: sayfaları saran ve bütün sayfalarda aynı kalan bir çerçeve.

app/layout.tsx zaten var; şablon onu koydu. Şu an böyle görünüyor:

1import type { Metadata } from "next";2import { Geist, Geist_Mono } from "next/font/google";3import "./globals.css";4 5const geistSans = Geist({6  variable: "--font-geist-sans",7  subsets: ["latin"],8});9 10const geistMono = Geist_Mono({11  variable: "--font-geist-mono",12  subsets: ["latin"],13});14 15export const metadata: Metadata = {16  title: "Create Next App",17  description: "Generated by create next app",18};19 20export default function RootLayout({ children }: LayoutProps<"/">) {21  return (22    <html23      lang="en"24      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}25    >26      <body className="min-h-full flex flex-col">{children}</body>27    </html>28  );29}

Yazı tipi (Geist) ve metadata kısımlarına dersin sonunda döneceğiz. Önemli olan en alttaki fonksiyon:

• RootLayout bir bileşen; <html> ve <body> etiketlerini o çiziyor. Vite'taki index.html'in işini artık bu dosya görüyor.
• { children }: o an açılan sayfa. / adresindeyken app/page.tsx'in çizdiği şey, /hakkinda'dayken app/hakkinda/page.tsx'inki. Props'un özel bir adı olan children, "bu bileşenin içine konan şey" demek.
• LayoutProps<"/">: Next'in senin klasörlerine bakarak kendisi ürettiği bir tip; içinde children var. import etmeden kullanabilirsin.

Dosyayı tamamen sil ve şunu yaz. Şimdilik sade tutuyoruz; menüde düz <a> bağlantıları var:

1import "./globals.css"2 3export default function RootLayout({ children }: LayoutProps<"/">) {4    return (5        <html lang="tr">6            <body>7                <header className="ust">8                    <a href="/" className="logo">Şampiyon Rehberi</a>9                    <nav>10                        <a href="/sampiyonlar">Şampiyonlar</a>11                        <a href="/hakkinda">Hakkında</a>12                    </nav>13                </header>14                {children}15            </body>16        </html>17    )18}

lang="tr" tarayıcıya ve ekran okuyuculara sayfanın Türkçe olduğunu söyler; şablonda en yazıyordu. Kaydet: iki sayfanın da üstünde aynı menü var. Menüdeki Hakkında'ya tıkla, sonra logoya: sayfalar arasında gezebiliyorsun. Şampiyonlar şimdilik 404 verir; o sayfayı birazdan yazacaksın.

#Link ile gezinme

Menü çalışıyor ama bir sorun var: her tıklamada sayfa baştan yükleniyor. Sekmedeki yükleme halkası dönüyor, tarayıcı HTML'i, CSS'i, bütün JavaScript dosyalarını yeniden istiyor. Projenin bitmiş hâlinde denedik: menüdeki düz <a>'ya tıklayınca tarayıcı 19 istek gönderdi (bir HTML, iki yazı tipi, bir CSS, 15 JavaScript dosyası), sayfadaki JavaScript'in hafızası da sıfırlandı. Bir state'in tuttuğu her şey, örneğin açık bir menü ya da yazılmış bir arama, bu yeniden yüklemede kaybolur.

Next'in Link bileşeni bunu çözer. app/layout.tsx'te <a>'ları Link yap:

1import Link from "next/link"2import "./globals.css"3 4export default function RootLayout({ children }: LayoutProps<"/">) {5    return (6        <html lang="tr">7            <body>8                <header className="ust">9                    <Link href="/" className="logo">Şampiyon Rehberi</Link>10                    <nav>11                        <Link href="/sampiyonlar">Şampiyonlar</Link>12                        <Link href="/hakkinda">Hakkında</Link>13                    </nav>14                </header>15                {children}16            </body>17        </html>18    )19}

Aynı denemeyi Link ile yaptık: tıklama sayfa için tek bir istek gönderdi (/hakkinda?_rsc=…) ve sayfadaki JavaScript'in hafızası yerinde kaldı. Next yalnız yeni sayfanın içeriğini istedi ve {children}'ın yerine koydu; layout'a, menüye, yazı tipine, CSS'e dokunmadı. Adres çubuğu yine değişir, geri tuşu yine çalışır.

Ana sayfaya da şampiyonlara giden bir düğme koy:

1import Link from "next/link"2 3export default function Home() {4    return (5        <main>6            <h1>Şampiyon Rehberi</h1>7            <p className="soluk">Hangi şampiyonla başlasan? Rollerine ve zorluklarına bak, sana uyanı seç.</p>8            <Link href="/sampiyonlar" className="dugme">Şampiyonlara göz at</Link>9        </main>10    )11}

Link HTML'de yine bir <a href="…"> olarak çıkar. Bu yüzden sağ tıklayıp "yeni sekmede aç" çalışır, arama motorları bağlantıyı izler. className gibi nitelikleri de <a>'daki gibi verirsin.

Yayındaki sitede (dersin sonunda npm run build ile deneyeceksin) Link bir şey daha yapar: ekranda görünen bağlantıların sayfalarını, sen tıklamadan önce arka planda hazırlamaya başlar. Tıkladığında sayfa çoğu zaman çoktan gelmiştir.

Ne zaman düz <a>? Sitenin dışına giden bağlantılarda: <a href="https://nextjs.org">. Link yalnız kendi sitenin sayfaları arasında işe yarar.

#Veriden sayfa: sunucu bileşeni

Şimdi asıl sayfaya, şampiyon listesine geçelim. Önce veri: proje kökünde (app'in yanında, içinde değil) lib adında bir klasör aç ve içine sampiyonlar.ts dosyasını yaz. JSX yok, bu yüzden uzantı .ts:

1export type Sampiyon = {2    id: number3    isim: string4    rol: string5    zorluk: number6    tanitim: string7}8 9export const sampiyonlar: Sampiyon[] = [10    { id: 1, isim: "Ahri", rol: "Büyücü", zorluk: 2, tanitim: "Çevik bir büyücü. Düşmanın arasına dalıp çıkmayı sever." },11    { id: 2, isim: "Garen", rol: "Dövüşçü", zorluk: 1, tanitim: "Dayanıklı bir savaşçı. Öğrenmesi kolay, alt etmesi zor." },12    { id: 3, isim: "Jinx", rol: "Nişancı", zorluk: 2, tanitim: "Uzaktan vuran bir nişancı. Takım savaşında coşar." },13    { id: 4, isim: "Lux", rol: "Büyücü", zorluk: 1, tanitim: "Işık büyüleriyle uzaktan oyunu yöneten bir büyücü." },14    { id: 5, isim: "Yasuo", rol: "Dövüşçü", zorluk: 3, tanitim: "Rüzgârı kullanan bir kılıç ustası. Ustalaşması uzun sürer." },15    { id: 6, isim: "Teemo", rol: "Nişancı", zorluk: 1, tanitim: "Küçük ama sinir bozucu bir izci. Haritaya mantar eker." },16]

Gerçek bir sitede bu veri bir veritabanından gelir; onu Ders 44'te bağlayacaksın. lib klasörü adres olmaz, çünkü app'in dışında; Next yalnız app'in içine bakar. Sayfa olmayan ortak kodu (veri, yardımcı fonksiyonlar) koymak için yaygın bir ad.

Sonra app/sampiyonlar/page.tsx dosyasını oluştur:

1import Link from "next/link"2import { sampiyonlar } from "@/lib/sampiyonlar"3 4export default function SampiyonListesi() {5    console.log("Şampiyon listesi hazırlanıyor")6 7    return (8        <main>9            <h1>Şampiyonlar</h1>10            <p className="soluk">{sampiyonlar.length} şampiyon var. Birine tıkla, ayrıntısını gör.</p>11            <div className="kartlar">12                {sampiyonlar.map((s) => (13                    <Link key={s.id} href={`/sampiyonlar/${s.id}`} className="kart">14                        <div className="harf">{s.isim[0]}</div>15                        <h2>{s.isim}</h2>16                        <p>{s.rol}</p>17                    </Link>18                ))}19            </div>20        </main>21    )22}

localhost:3000/sampiyonlar

map, key ve süslü parantezler Ders 40'tan tanıdık. Yeni olan iki şey var.

Birincisi "@/lib/sampiyonlar". Proje kurulurken --import-alias "@/*" demiştin: @/ her yerden proje kökü demek. Bu dosya app/sampiyonlar içinde; takma ad olmasaydı "../../lib/sampiyonlar" yazman gerekirdi ve dosyayı başka klasöre taşıyınca ../ sayısını düzeltmen gerekirdi. @/lib/sampiyonlar her dosyada aynı.

İkincisi console.log. Sayfayı aç ve terminale bak:

Şampiyon listesi hazırlanıyor GET /sampiyonlar 200 in 57ms (next.js: 10ms, application-code: 47ms)

Mesaj, Vite'ta olduğu gibi tarayıcının konsoluna değil, npm run dev'in çalıştığı terminale düştü. Çünkü bu bileşen sunucuda çalıştı. Next, app klasöründeki her bileşeni varsayılan olarak sunucuda çalıştırır, çıkan HTML'i tarayıcıya gönderir. Sayfada sağ tıklayıp Sayfa kaynağını görüntüle'yi (İngilizce tarayıcıda View page source; kısayolu Ctrl+U) seçersen kartları ilk HTML'in içinde görürsün. Kısaltılmış hâli:

<main><h1>Şampiyonlar</h1><p class="soluk">6<!-- --> şampiyon var. Birine tıkla, ayrıntısını gör.</p><div class="kartlar"><a class="kart" href="/sampiyonlar/1"><div class="harf">A</div><h2>Ahri</h2><p>Büyücü</p></a>…

Ders 40'taki <div id="root"></div>'in yerinde artık içerik var. (<!-- --> React'in metin parçalarını ayırmak için bıraktığı bir işaret; zararsız.)

Sunucuda çalışmanın sana kattığı şu: bir sonraki derste bu bileşenin içine doğrudan bir veritabanı sorgusu yazacaksın. Ders 38'deki gibi ayrı bir API yazıp onu tarayıcıdan fetch ile çağırmana, yükleniyor durumuyla uğraşmana gerek kalmayacak; veri sayfayla birlikte gelecek.

#Dinamik route: her şampiyona ayrı adres

Kartlar /sampiyonlar/1, /sampiyonlar/2… adreslerine gidiyor ama o sayfalar yok. Altı şampiyon için altı klasör (app/sampiyonlar/1, app/sampiyonlar/2…) açmak olmaz; şampiyon sayısı 170 olunca hiç olmaz. Ders 28'de Express'te aynı sorunu /api/sampiyonlar/:id gibi bir yol parametresiyle çözmüştün. Next'teki karşılığı köşeli parantezli bir klasör.

app/sampiyonlar içinde [id] adında bir klasör aç (köşeli parantezler adın parçası) ve içine page.tsx yaz:

1import Link from "next/link"2import { sampiyonlar } from "@/lib/sampiyonlar"3 4type Props = {5    params: Promise<{ id: string }>6}7 8export default async function SampiyonSayfasi({ params }: Props) {9    const { id } = await params10    const sampiyon = sampiyonlar.find((s) => s.id === Number(id))11 12    if (!sampiyon) {13        return (14            <main>15                <h1>Böyle bir şampiyon yok</h1>16            </main>17        )18    }19 20    return (21        <main>22            <Link href="/sampiyonlar" className="geri">← Bütün şampiyonlar</Link>23            <h1>{sampiyon.isim}</h1>24            <p className="soluk">{sampiyon.rol} · Zorluk {sampiyon.zorluk}/3</p>25            <p>{sampiyon.tanitim}</p>26        </main>27    )28}

Listeden bir karta tıkla: Ahri'nin, Jinx'in kendi sayfası açılıyor. Tek bir dosya, her id için ayrı bir sayfa. Adım adım:

1. [id] klasörü "bu parça değişebilir, adı id olsun" demek. /sampiyonlar/3 açılınca Next bu dosyayı seçer ve id'ye "3" değerini verir.
2. Next sayfa bileşenine params adında bir prop verir. Next 16'da params bir Promise: değeri hemen değil, await ile alınır. Bu yüzden fonksiyonun başında async var ve ilk satır const { id } = await params.
3. Tip notu bunu söylüyor: params: Promise<{ id: string }>. id her zaman metin, çünkü adres bir metin. Dizideki id'ler ise sayı; karşılaştırmadan önce Number(id) ile sayıya çeviriyoruz.
4. Şampiyon bulunamazsa (ör. /sampiyonlar/99) kısa bir mesaj döndürüyoruz. if'ten sonra TypeScript sampiyon'un artık undefined olamayacağını bilir (daraltma).

Promise olduğunu kendi gözünle gör. Fonksiyonun başına geçici olarak iki satır ekle:

8export default async function SampiyonSayfasi({ params }: Props) {9    console.log(params)10    const { id } = await params11    console.log(id, typeof id)

/sampiyonlar/3'ü açınca terminal:

Promise {  { id: '3' },  Symbol(async_id_symbol): 52741,  Symbol(trigger_async_id_symbol): 52740}3 string GET /sampiyonlar/3 200 in 52ms (next.js: 7ms, application-code: 45ms)

params bir Promise; içinde { id: '3' } bekliyor. Symbol(…) satırları Node'un kendi iç kayıtları, sayıları sende farklı olur; geç. await'ten sonra id "3" metni. Denemeden sonra iki console.log'u sil.

Aynı şeyi Next olmadan, düz Node'da da görebilirsin. C:\kod\ogren klasöründe ders43.js dosyasını aç ve yaz. paramsHazirla, Next'in yaptığını taklit ediyor: async bir fonksiyon her zaman bir Promise döndürür (Ders 15).

1async function paramsHazirla() {2    return { id: "3" }3}4 5async function sayfa() {6    const params = paramsHazirla()7    console.log(params)8    console.log(params.id)9    const { id } = await params10    console.log(id, typeof id)11}12 13sayfa()

Promise { { id: '3' } }undefined3 string

Promise'in kendisinde id diye bir alan yok; params.id bu yüzden undefined. Değer ancak await'ten sonra eline geçiyor. Birazdan bu undefined'ın Next'te nasıl bir hataya dönüştüğünü göreceksin.

8export default async function SampiyonSayfasi({ params }: Props) {9    const id = params.id10    const sampiyon = sampiyonlar.find((s) => s.id === Number(id))

Error: Route "/sampiyonlar/[id]" used `params.id`. `params` is a Promise and must be unwrapped with `await` or `React.use()` before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis    at SampiyonSayfasi (app\sampiyonlar\[id]\page.tsx:9:23)   7 |   8 | export default async function SampiyonSayfasi({ params }: Props) {>  9 |     const id = params.id     |                       ^  10 |     const sampiyon = sampiyonlar.find((s) => s.id === Number(id))  11 |  12 |     if (!sampiyon) {

PS C:\kod\next-rehber> npx tsc --noEmitapp/sampiyonlar/[id]/page.tsx:9:23 - error TS2339: Property 'id' does not exist on type 'Promise<{ id: string; }>'. 9     const id = params.id                        ~~   app/sampiyonlar/[id]/page.tsx:9:23    9     const id = params.id                            ~~    Did you forget to use 'await'?  Found 1 error in app/sampiyonlar/[id]/page.tsx:9

PS C:\kod\next-rehber> npx tsc --noEmitapp/sampiyonlar/[id]/page.tsx:10:46 - error TS2367: This comparison appears to be unintentional because the types 'number' and 'string' have no overlap. 10     const sampiyon = sampiyonlar.find((s) => s.id === id)                                                ~~~~~~~~~~~  Found 1 error in app/sampiyonlar/[id]/page.tsx:10

#İstemci bileşeni: "use client"

Şampiyon sayfasına bir Favorilere ekle düğmesi koymak istiyorsun: tıklayınca yıldız dolsun, yazı değişsin. Ders 41'den biliyorsun, bu iş useState ve onClick ister. app/sampiyonlar/[id] klasörüne FavoriDugmesi.tsx adında bir dosya ekle. Bilerek eksik yazıyoruz:

1import { useState } from "react"2 3export default function FavoriDugmesi({ isim }: { isim: string }) {4    const [favori, setFavori] = useState(false)5 6    return (7        <button className={favori ? "favori secili" : "favori"} onClick={() => setFavori(!favori)}>8            {favori ? "★ " + isim + " favorilerinde" : "☆ Favorilere ekle"}9        </button>10    )11}

Sonra sayfada kullan: page.tsx'in başına import FavoriDugmesi from "./FavoriDugmesi" ekle ve tanıtım paragrafının altına <FavoriDugmesi isim={sampiyon.isim} /> yaz. Kaydedip bir şampiyon sayfası açınca:

localhost:3000/sampiyonlar/1

⨯ ./app/sampiyonlar/[id]/FavoriDugmesi.tsx:1:10Error: You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.    Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client> 1 | import { useState } from "react"    |          ^^^^^^^^  2 |  3 | export default function FavoriDugmesi({ isim }: { isim: string }) {  4 |     const [favori, setFavori] = useState(false) Ecmascript file had an error Import trace:  Server Component:    ./app/sampiyonlar/[id]/FavoriDugmesi.tsx    ./app/sampiyonlar/[id]/page.tsx

Mesajın dediğini yap. Dosyanın ilk satırına tırnaklarıyla birlikte şunu ekle:

1"use client"2 3import { useState } from "react"4 5export default function FavoriDugmesi({ isim }: { isim: string }) {6    const [favori, setFavori] = useState(false)7 8    return (9        <button className={favori ? "favori secili" : "favori"} onClick={() => setFavori(!favori)}>10            {favori ? "★ " + isim + " favorilerinde" : "☆ Favorilere ekle"}11        </button>12    )13}

localhost:3000/sampiyonlar/1

Hata katmanı kapandı, düğme çalışıyor. "use client" bir değişken ya da fonksiyon değil, bir yönerge: Next'e "bu dosya ve içe aktardığı her şey tarayıcıda da çalışacak" der. Next bu bileşenin kodunu tarayıcıya gönderilecek JavaScript'e ekler.

İlginç bir ayrıntı: istemci bileşeni de ilk HTML'de yer alır. Sayfa kaynağına bakarsan <button class="favori">☆ Favorilere ekle</button> satırını görürsün. Next onu sunucuda bir kez çizip HTML'e koydu; tarayıcıda JavaScript yüklenince React aynı düğmeyi bulup ona onClick'i bağladı. Bu "uyandırma" işinin adı canlandırma. Düğme canlanmadan önce görünür ama tıklamaya tepki vermez; hızlı bir bağlantıda bu an fark edilmeyecek kadar kısadır.

#Hangisi ne zaman?

Kural kısa: önce sunucu bileşeni, yalnız gerektiğinde istemci. Gerektiği an şu: bileşen kullanıcıyla etkileşiyor ya da yalnız tarayıcıda olan bir şeyi kullanıyorsa.

İki alışkanlık edin:

• İstemci bileşenini küçük tut, "yaprağa" koy. Bütün şampiyon sayfasını "use client" yapsaydın düğme yine çalışırdı, ama sayfanın bütün kodu tarayıcıya inerdi ve sayfa async olamazdı. Biz yalnız düğmeyi istemci yaptık; sayfa sunucuda kaldı ve düğmeye yalnız bir isim verdi.
• Sunucudan istemciye düz veri ver. isim="Ahri" gibi metin, sayı, obje, dizi geçer. Fonksiyon geçmez: sunucudaki bir fonksiyon tarayıcıya taşınamaz. Aşağıdaki hata tam bundan doğar.

⨯ Error: Event handlers cannot be passed to Client Component props.  <button onClick={function onClick} children=...>                  ^^^^^^^^^^^^^^^^^^If you need interactivity, consider converting part of this to a Client Component.    at ignore-listed frames {  digest: '176785635'}

#Metadata ve not-found

#Sekme başlığı ve açıklama

Tarayıcı sekmesine bak: başlıkta site adı değil, adres yazıyor. Şablondaki metadata'yı layout'u sadeleştirirken silmiştin. Vite'taki bir React uygulamasında ilk HTML'deki başlık hep index.html'de ne yazıyorsa odur; sayfaya göre değiştirmek (örneğin useEffect içinde document.title'a değer atamak) ancak tarayıcıda, JavaScript çalışınca olur. Next'te bunu bir objeyle söylersin ve başlık ilk HTML'de gelir. app/layout.tsx'e ekle:

1import type { Metadata } from "next"2import Link from "next/link"3import "./globals.css"4 5export const metadata: Metadata = {6    title: {7        default: "Şampiyon Rehberi",8        template: "%s · Şampiyon Rehberi",9    },10    description: "Şampiyonları tanı: rolleri, zorlukları ve kısa tanıtımları.",11}12 13export default function RootLayout({ children }: LayoutProps<"/">) {

(Fonksiyonun gövdesi değişmedi; yalnız üst kısmı gösterdik.) metadata adında, Metadata tipinde bir obje dışa aktarıyorsun. Ad önemli: Next tam olarak bu adı arar.

• title.default: sayfa kendi başlığını vermezse kullanılacak başlık.
• title.template: sayfa başlık verirse kalıp. %s sayfanın başlığıyla değişir.
• description: arama sonuçlarında başlığın altında görünen açıklama.

Sayfalara kendi başlıklarını ver. app/sampiyonlar/page.tsx'in başına:

1import type { Metadata } from "next"2import Link from "next/link"3import { sampiyonlar } from "@/lib/sampiyonlar"4 5export const metadata: Metadata = {6    title: "Şampiyonlar",7}

Sekmede artık Şampiyonlar · Şampiyon Rehberi yazıyor. Sayfa kaynağında:

<title>Şampiyonlar · Şampiyon Rehberi</title><meta name="description" content="Şampiyonları tanı: rolleri, zorlukları ve kısa tanıtımları."/>

Açıklamayı sayfa vermediği için layout'unki geldi. Aynı şekilde app/hakkinda/page.tsx'e title: "Hakkında" ver; bu kez kendin yaz.

⨯ ./app/hakkinda/page.tsx:5:14Error: You are attempting to export "metadata" from a component marked with "use client", which is disallowed. "metadata" must be resolved on the server before the page component is rendered. Keep your page as a Server Component and move Client Component logic to a separate file. Read more: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#why-generatemetadata-is-server-component-only  3 | import type { Metadata } from "next"  4 |> 5 | export const metadata: Metadata = {    |              ^^^^^^^^  6 |     title: "Hakkında",  7 | }  8 |

#Dinamik sayfanın başlığı: generateMetadata

Şampiyon sayfasının başlığı her şampiyonda farklı olmalı: Ahri · Şampiyon Rehberi. Sabit bir obje bunu yapamaz; başlık params'a bağlı. Bunun için metadata yerine generateMetadata adında bir async fonksiyon dışa aktarırsın. Next onu sayfayla aynı params'la çağırır.

Ama önce bir tekrarı önle: şampiyonu bulan satır hem sayfada hem başlıkta gerekecek. Kendini tekrar etme: lib/sampiyonlar.ts'in sonuna bir fonksiyon ekle:

18export function sampiyonBul(id: string) {19    return sampiyonlar.find((s) => s.id === Number(id))20}

Şimdi app/sampiyonlar/[id]/page.tsx'e geç. En üste import type { Metadata } from "next" ekle, sampiyonlar yerine yeni fonksiyonu içe aktar (import { sampiyonBul } from "@/lib/sampiyonlar") ve Props tipinin altına şunu yaz:

10export async function generateMetadata({ params }: Props): Promise<Metadata> {11    const { id } = await params12    const sampiyon = sampiyonBul(id)13    return { title: sampiyon ? sampiyon.isim : "Bulunamadı" }14}

Sayfa fonksiyonundaki sampiyonlar.find(…) satırını da const sampiyon = sampiyonBul(id) yap; artık iki yer aynı fonksiyonu kullanıyor.

• generateMetadata da params'ı await eder ve bir Metadata objesi döndürür. Dönüş tipi Promise<Metadata>, çünkü fonksiyon async.
• Şampiyon bulunamazsa başlık Bulunamadı olur (Ders 40'taki üçlü ifade).

Ahri'nin sayfasını aç: sekmede Ahri · Şampiyon Rehberi yazıyor. Kalıp layout'tan geldi; sayfa yalnız %s'in yerine geçecek adı verdi.

#not-found.tsx ve notFound()

Bir sorun daha var. /sampiyonlar/7'yi aç, F12 → Network'te ilk satırın durum koduna bak: 200. Terminal de öyle diyor:

 GET /sampiyonlar/7 200 in 34ms (next.js: 1.7ms, application-code: 33ms)

Sayfa "Böyle bir şampiyon yok" diyor, ama tarayıcıya ve arama motoruna "her şey yolunda, işte sayfa" diyor. Ders 26'dan biliyorsun: olmayan bir şey için doğru cevap 404. Next'te bunun yolu next/navigation'dan gelen notFound() fonksiyonu: çağırdığın an sayfanın çizimi durur, Next 404 durum koduyla bir "bulunamadı" sayfası gösterir.

Şampiyon sayfasının son hâli. Yeni olan yalnız notFound'un içe aktarılması ve if'in içi:

1import type { Metadata } from "next"2import Link from "next/link"3import { notFound } from "next/navigation"4import { sampiyonBul } from "@/lib/sampiyonlar"5import FavoriDugmesi from "./FavoriDugmesi"6 7type Props = {8    params: Promise<{ id: string }>9}10 11export async function generateMetadata({ params }: Props): Promise<Metadata> {12    const { id } = await params13    const sampiyon = sampiyonBul(id)14    return { title: sampiyon ? sampiyon.isim : "Bulunamadı" }15}16 17export default async function SampiyonSayfasi({ params }: Props) {18    const { id } = await params19    const sampiyon = sampiyonBul(id)20 21    if (!sampiyon) {22        notFound()23    }24 25    return (26        <main>27            <Link href="/sampiyonlar" className="geri">← Bütün şampiyonlar</Link>28            <h1>{sampiyon.isim}</h1>29            <p className="soluk">{sampiyon.rol} · Zorluk {sampiyon.zorluk}/3</p>30            <p>{sampiyon.tanitim}</p>31            <FavoriDugmesi isim={sampiyon.isim} />32        </main>33    )34}

• notFound() hiç geri dönmez; TypeScript bunu bilir. Bu yüzden if'ten sonra sampiyon yine kesin olarak bir Sampiyon.
• Eski "Böyle bir şampiyon yok" bloğu gitti; artık o işi notFound() görüyor.

Şimdi /sampiyonlar/99 404 dönüyor ve Next'in İngilizce hazır sayfası açılıyor: 404 | This page could not be found. Kendi sayfanı yazmak için app klasörünün köküne not-found.tsx dosyasını ekle:

1import Link from "next/link"2 3export default function BulunamadiSayfasi() {4    return (5        <main>6            <h1>Bu sayfa haritada yok</h1>7            <p className="soluk">Aradığın adres ya hiç olmadı ya da taşındı.</p>8            <Link href="/" className="dugme">Ana sayfaya dön</Link>9        </main>10    )11}

localhost:3000/sampiyonlar/99

Bu sayfa iki durumda çıkar: notFound() çağrıldığında ve hiçbir klasörün karşılamadığı bir adres açıldığında (/yok-boyle-bir-yer). Layout'un içinde çizildiği için menü yerinde; kullanıcı kaybolmaz.

#Görseller ve yazı tipleri

#next/image: kapak resmi

Ana sayfaya bir kapak resmi koyalım. Şu resmi kullanacaksın (kendi çizimimiz). Üstüne sağ tıkla, Resmi farklı kaydet…'i seç (İngilizce tarayıcıda Save image as…) ve C:\kod\next-rehber\public klasörüne kapak.png adıyla kaydet:

Resim 1200 piksel genişliğinde, 400 piksel yüksekliğinde. Düz <img src="/kapak.png"> yazabilirdin, ama Next'in Image bileşeni birkaç işi senin yerine yapar. app/page.tsx'i şöyle değiştir:

1import Image from "next/image"2import Link from "next/link"3 4export default function Home() {5    return (6        <main>7            <Image8                src="/kapak.png"9                alt="Üç koridorlu küçük bir harita ve yan yana üç şampiyon kartı"10                width={1200}11                height={400}12                className="kapak"13                loading="eager"14            />15            <h1>Şampiyon Rehberi</h1>16            <p className="soluk">Hangi şampiyonla başlasan? Rollerine ve zorluklarına bak, sana uyanı seç.</p>17            <Link href="/sampiyonlar" className="dugme">Şampiyonlara göz at</Link>18        </main>19    )20}

localhost:3000

• src="/kapak.png": public klasörü sitenin köküdür; public/kapak.png adreste /kapak.png olur. Adrese public yazılmaz.
• alt: resmi göremeyen biri (ekran okuyucu kullanan, resmi yüklenemeyen) için resmin ne olduğu. Zorunlu.
• width ve height: resmin gerçek piksel boyutu. Next bunlardan en-boy oranını hesaplar ve resim inmeden önce sayfada yerini ayırır; resim gelince yazılar aşağı kaymaz. Ekrandaki boyutu CSS verir: .kapak sınıfı width: 100%; height: auto diyor, resim kutusuna sığıyor.
• loading="eager": "hemen yükle". Image varsayılan olarak resmi ancak ekrana yaklaşınca yükler (Ders 24'teki geç yükleme); sayfa açılır açılmaz görünen büyük bir resim için bu beklemeyi kaldırıyoruz.

Peki Image arkada ne yaptı? Sayfa kaynağına bak:

<img alt="Üç koridorlu küçük bir harita ve yan yana üç şampiyon kartı" loading="eager" width="1200" height="400" decoding="async" data-nimg="1" class="kapak" style="color:transparent" srcSet="/_next/image?url=%2Fkapak.png&amp;w=1200&amp;q=75 1x, /_next/image?url=%2Fkapak.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Fkapak.png&amp;w=3840&amp;q=75"/>

Tarayıcı resmi artık doğrudan /kapak.png'den değil, Next'in resim servisinden (/_next/image) istiyor. srcSet iki adres veriyor: sıradan ekranlar 1x'i, piksel yoğunluğu yüksek ekranlar (çoğu telefon) 2x'i seçer. Servis resmi istenen genişliğe (w) göre hazırlıyor, kalitesini (q=75) ayarlıyor ve tarayıcı destekliyorsa daha küçük bir biçime, WebP'ye çeviriyor. Biz ölçtük: kapak.png 21.114 bayt, servisin verdiği 1200 piksellik WebP hâli 8.132 bayt; aynı resim, üçte birinden biraz fazla yer. Resim büyüdükçe (bir fotoğraf gibi) kazanç da büyür.

⨯ Error: Image with src "/kapak.png" is missing required "width" property.    at ignore-listed frames {  digest: '2684950454'}

#Başka siteden resim: remotePatterns

Kartlardaki harfli yuvarlakların yerine şampiyonların gerçek resimlerini koyalım. Ders 15'te tanıdığın Data Dragon, her şampiyonun kare resmini herkese açık bir adreste yayımlıyor. lib/sampiyonlar.ts'e adresi kuran bir fonksiyon ekle:

22export function ikonAdresi(isim: string) {23    return `https://ddragon.leagueoflegends.com/cdn/16.20.1/img/champion/${isim}.png`24}

16.20.1 bu dersi yazarken oyunun son sürümüydü; güncelini https://ddragon.leagueoflegends.com/api/versions.json adresindeki listenin ilk elemanından öğrenirsin. Sonra app/sampiyonlar/page.tsx'te harfli div'in yerine bir Image koy:

19                    <Link key={s.id} href={`/sampiyonlar/${s.id}`} className="kart">20                        <Image src={ikonAdresi(s.isim)} alt="" width={56} height={56} className="ikon" />21                        <h2>{s.isim}</h2>

(Dosyanın başına import Image from "next/image" eklemeyi ve ikonAdresi'ni de içe aktarmayı unutma: import { ikonAdresi, sampiyonlar } from "@/lib/sampiyonlar".) Burada alt="" boş, çünkü resmin hemen altında şampiyonun adı yazıyor; ekran okuyucu adı iki kez okumasın. Kaydet:

⨯ Error: Invalid src prop (https://ddragon.leagueoflegends.com/cdn/16.20.1/img/champion/Ahri.png) on `next/image`, hostname "ddragon.leagueoflegends.com" is not configured under images in your `next.config.js`See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host    at ignore-listed frames {  digest: '359635635'}

next.config.ts'i aç ve images bölümünü ekle. Şablonun dosyası noktalı virgüllü ve iki boşluk girintili; biz de ona uyduk:

1import type { NextConfig } from "next";2 3const nextConfig: NextConfig = {4  /* config options here */5  images: {6    remotePatterns: [new URL("https://ddragon.leagueoflegends.com/cdn/**")],7  },8  turbopack: {9    rules: {10      "*.css": {11        loaders: ["@tailwindcss/turbopack"],12        as: "*.css",13      },14    },15  },16};17 18export default nextConfig;

remotePatterns "şu kalıba uyan adreslere izin ver" demek; sondaki ** "/cdn/'den sonra ne gelirse". İzni dar tut: bütün siteye değil, yalnız resimlerin olduğu yola. Kaydettiğin anda terminal şunu yazar ve sunucu kendini yeniden başlatır:

⚠ Found a change in next.config.ts. Restarting the server to apply the changes...

localhost:3000/sampiyonlar

Şampiyon sayfasına da büyük bir resim koy. app/sampiyonlar/[id]/page.tsx'te import Image from "next/image" ekle, sampiyonBul'un yanına ikonAdresi'ni de içe aktar ve geri bağlantısının altına şunu yaz:

29            <Image src={ikonAdresi(sampiyon.isim)} alt={sampiyon.isim} width={96} height={96} className="ikon" loading="eager" />

loading="eager"'i yazmasaydın tarayıcı konsolu seni uyarırdı. Önce onsuz denedik:

Image with src "https://ddragon.leagueoflegends.com/cdn/16.20.1/img/champion/Ahri.png" was detected as the Largest Contentful Paint (LCP). Please add the `loading="eager"` property if this image is above the fold.

"Bu resim, sayfanın en büyük görünen parçası (Largest Contentful Paint, kullanıcının sayfanın açıldığını hissettiği an) olarak algılandı. Sayfanın ilk ekranındaysa loading="eager" ekle." Next, sayfanın ilk ekranındaki büyük resmin geç yüklenip açılışı yavaşlattığını fark etti. Kural: sayfa açılınca hemen görünen ana resme eager, aşağıda kalanlar varsayılanda (lazy) kalsın.

#next/font: yazı tipi

Son olarak yazı tipi. Şablon Geist adında bir Google yazı tipi kullanıyordu; biz yuvarlak hatlı, Türkçe harfleri olan Nunito'yu seçiyoruz. app/layout.tsx'in son hâli:

1import type { Metadata } from "next"2import { Nunito } from "next/font/google"3import Link from "next/link"4import "./globals.css"5 6const nunito = Nunito({7    subsets: ["latin", "latin-ext"],8})9 10export const metadata: Metadata = {11    title: {12        default: "Şampiyon Rehberi",13        template: "%s · Şampiyon Rehberi",14    },15    description: "Şampiyonları tanı: rolleri, zorlukları ve kısa tanıtımları.",16}17 18export default function RootLayout({ children }: LayoutProps<"/">) {19    return (20        <html lang="tr">21            <body className={nunito.className}>22                <header className="ust">23                    <Link href="/" className="logo">Şampiyon Rehberi</Link>24                    <nav>25                        <Link href="/sampiyonlar">Şampiyonlar</Link>26                        <Link href="/hakkinda">Hakkında</Link>27                    </nav>28                </header>29                {children}30            </body>31        </html>32    )33}

• import { Nunito } from "next/font/google": Google Fonts'taki her yazı tipi burada bir fonksiyon. Adında boşluk olanlar alt çizgiyle yazılır (şablondaki Geist_Mono gibi).
• Nunito({ subsets: [...] }): yazı tipini hazırlar. subsets, hangi harf gruplarının sayfa açılırken önceden yükleneceği. latin İngilizce harfleri ve ı'yı içerir; ş, ğ ve İ ise latin-ext'te. İkisini birden yazınca Türkçe metin ilk anda doğru yazı tipiyle çıkar.
• Kalınlık (weight) yazmadık, çünkü Nunito bütün kalınlıkları tek dosyada taşıyan bir değişken yazı tipi (variable font). Yalnız bir ya da birkaç kalınlığı olan yazı tiplerinde hangisini istediğini weight: "400" gibi yazman gerekir; yazmazsan Next hata verir.
• className={nunito.className}: Next'in ürettiği sınıf; <body>'ye verince bütün site bu yazı tipini kullanır. Sınıfı tek bir öğeye de verebilirsin; o zaman yalnız o öğe bu yazı tipiyle yazılır.

Burada Next görünmeyen iki iş yapıyor. Birincisi, yazı tipi dosyalarını Google'dan bir kez indirip kendi sitenden sunuyor: tarayıcı Google'a hiç gitmiyor. Biz sayfanın isteklerine baktık: yazı tipleri /_next/static/media/…woff2 adreslerinden geliyordu. Ziyaretçinin bilgisi üçüncü bir siteye gitmez, tarayıcı da yazı tipi için ayrı bir sunucuya bağlanmakla vakit kaybetmez. İkincisi, yazı tipi inene kadar gösterilen yedek yazı tipini (Arial) Nunito'nun ölçülerine göre ayarlıyor; yazı tipi gelince satırlar zıplamıyor.

#Sık hatalar

Bu derste bölümlerin içinde gördüğün kartlara ek olarak iki hata daha. Hepsine hata rehberinden de ulaşabilirsin.

PS C:\kod\next-rehber> npx next dev -p 3001▲ Next.js 16.4.0 (Turbopack)- Local:         http://localhost:3001- Network:       http://192.168.1.35:3001✓ Ready in 546ms✓ Running next.config.ts took 45ms⨯ Another next dev server is already running. - Local:        http://localhost:3000- PID:          32364- Dir:          C:\kod\next-rehber- Log:          .next\dev\logs\next-development.log You can access the existing server at http://localhost:3000,or run taskkill /PID 32364 /F to stop it and start a new one.

11            <p>Garen biraz güçlendi, Teemo'nun mantarları biraz zayıfladı.</p>

PS C:\kod\next-rehber> npm run lint > next-rehber@0.1.0 lint> eslint  C:\kod\next-rehber\app\yama-notlari\page.tsx  11:43  error  `'` can be escaped with `'`, `‘`, `'`, `’`  react/no-unescaped-entities ✖ 1 problem (1 error, 0 warnings)

#Görevler

Görevleri aynı next-rehber projesinde yap. Her görevden sonra tarayıcıda dene, en sonda bir kez npx tsc --noEmit ve npm run lint çalıştır; ikisi de hata yazmamalı. Önce kendin dene, takılırsan ipuçlarını sırayla aç.

1import type { Metadata } from "next"2 3export const metadata: Metadata = {4    title: "Yama Notları",5}6 7export default function YamaNotlari() {8    return (9        <main>10            <h1>Yama Notları</h1>11            <p>{"Garen biraz güçlendi, Teemo'nun mantarları biraz zayıfladı."}</p>12            <p className="soluk">Bu sayfa her yamada güncellenecek.</p>13        </main>14    )15}

1export type Esya = {2    id: number3    ad: string4    fiyat: number5    aciklama: string6}7 8export const esyalar: Esya[] = [9    { id: 1, ad: "Uzun Kılıç", fiyat: 250, aciklama: "Saldırı gücünü biraz artırır." },10    { id: 2, ad: "Yakut Kristali", fiyat: 400, aciklama: "Can puanını artırır." },11    { id: 3, ad: "Ağır Zırh", fiyat: 1100, aciklama: "Fiziksel hasara karşı korur." },12]

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

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

1"use client"2 3import { useState } from "react"4 5export default function SatinAlDugmesi({ fiyat }: { fiyat: number }) {6    const [altin, setAltin] = useState(1000)7    const [adet, setAdet] = useState(0)8 9    function satinAl() {10        if (altin >= fiyat) {11            setAltin(altin - fiyat)12            setAdet(adet + 1)13        }14    }15 16    return (17        <div>18            <p>Altının: {altin} · Aldığın: {adet}</p>19            <button className="favori" onClick={satinAl} disabled={altin < fiyat}>20                {altin >= fiyat ? "Satın al (" + fiyat + " altın)" : "Altın yetmiyor"}21            </button>22        </div>23    )24}

Görev 5

Yama notlarına harita ve yazı tipi

Görev 1'deki yama notları sayfasını süsle:

• Başlığın üstünde Sihirdar Vadisi'nin mini haritası dursun. Resim Data Dragon'da: https://ddragon.leagueoflegends.com/cdn/16.20.1/img/map/map11.png. Gerçek boyutu 512×512 piksel, ama ekranda 240 piksel genişlikte görünmeli; globals.css'teki .harita sınıfı hazır.
• Yalnız başlık (h1) Google Fonts'taki Russo One yazı tipiyle yazılsın; sayfanın geri kalanı Nunito'da kalsın.

Sayfa açılınca tarayıcı konsolunda (F12 → Console) LCP uyarısı olmamalı. Başlamadan düşün: next.config.ts'e dokunman gerekiyor mu?

Sınırı da dene: başlığı geçici olarak Ağır Zırh İndirimi Şimdi Başladı yap. ğ, ı, İ, ş, Ş dahil bütün harfler aynı kalın yazı tipiyle çıkmalı. Sonra kodda Russo_One'ı Lilita_One yap (onun da tek kalınlığı var: 400) ve aynı başlığa yeniden bak. Ne değişti?

İpucu 1

Resme width={512} height={512} ver: gerçek boyut. Ekrandaki boyutu className="harita" belirler. Resim sayfanın en üstünde, ilk ekranda; LCP uyarısını hangi nitelik susturuyordu? next.config.ts'e dokunmana gerek yok: remotePatterns'e yazdığın /cdn/** kalıbı /cdn/16.20.1/img/map/… yolunu da kapsıyor.

İpucu 2

Yazı tipini layout'taki Nunito gibi hazırla, ama bu sayfanın dosyasında: import { Russo_One } from "next/font/google" (adındaki boşluk alt çizgi oluyor). Sınıfı <body>'ye değil, yalnız başlığa ver: <h1 className={russo.className}>.

İpucu 3

Russo One değişken bir yazı tipi değil, tek kalınlığı var. weight yazmazsan VS Code Russo_One({…})'un altını çizer (Property 'weight' is missing…) ve sayfa açılmaz; terminalde Missing weight for Russo One. Available weights: 400 yazar. Doğrusu: Russo_One({ weight: "400", subsets: ["latin", "latin-ext"] }).

Çözümü göster

1import type { Metadata } from "next"2import { Russo_One } from "next/font/google"3import Image from "next/image"4 5const russo = Russo_One({6    weight: "400",7    subsets: ["latin", "latin-ext"],8})9 10export const metadata: Metadata = {11    title: "Yama Notları",12}13 14export default function YamaNotlari() {15    return (16        <main>17            <Image18                src="https://ddragon.leagueoflegends.com/cdn/16.20.1/img/map/map11.png"19                alt="Sihirdar Vadisi'nin mini haritası"20                width={512}21                height={512}22                className="harita"23                loading="eager"24            />25            <h1 className={russo.className}>Yama Notları</h1>26            <p>{"Garen biraz güçlendi, Teemo'nun mantarları biraz zayıfladı."}</p>27            <p className="soluk">Bu sayfa her yamada güncellenecek.</p>28        </main>29    )30}

Denediğimizde harita 240 piksel genişlikte çıktı; loading="eager" silinince konsolda Image with src "https://ddragon.leagueoflegends.com/cdn/16.20.1/img/map/map11.png" was detected as the Largest Contentful Paint (LCP) uyarısı belirdi, geri yazınca kayboldu. alt niteliğindeki kesme işareti ESLint'e takılmaz; kural yalnız etiketlerin arasındaki metne bakar.

Sınır denemesinde Russo One bütün harfleri çizdi. Lilita One ise ı'yı çizdi ama ğ, İ, Ş ve ş'yi ince, başka bir yazı tipiyle gösterdi: Lilita One'ın çiziminde bu harfler yok, tarayıcı onları yedek yazı tipinden aldı. subsets'e latin-ext yazmak bunu çözmez; yazı tipini seçmeden önce Türkçe harflerini dene. Denemeden sonra Russo One'a dön.

1"use client"2 3import Link from "next/link"4import { usePathname } from "next/navigation"5 6const baglantilar = [7    { href: "/sampiyonlar", ad: "Şampiyonlar" },8    { href: "/esyalar", ad: "Eşyalar" },9    { href: "/yama-notlari", ad: "Yama Notları" },10    { href: "/hakkinda", ad: "Hakkında" },11]12 13export default function Menu() {14    const yol = usePathname()15 16    return (17        <nav>18            {baglantilar.map((b) => {19                const aktif = yol === b.href || yol.startsWith(b.href + "/")20                return (21                    <Link key={b.href} href={b.href} className={aktif ? "aktif" : ""}>22                        {b.ad}23                    </Link>24                )25            })}26        </nav>27    )28}

#Kendini sına

app/├─ page.tsx├─ layout.tsx├─ esyalar/│  ├─ page.tsx│  ├─ EsyaKarti.tsx│  └─ [id]/│     └─ page.tsx└─ profil/   └─ ayarlar/      └─ page.tsx

export default async function Sayfa({ params }: { params: Promise<{ id: string }> }) {    const { id } = params    return <h1>Eşya {id}</h1>}