Next.js Baslangic Rehberi: Modern Web Gelistirme

Next.js Nedir?

Next.js, React tabanli, uretim ortami icin optimize edilmis bir web gelistirme framework'udur. Vercel tarafindan gelistirilen ve acik kaynak olarak sunulan Next.js, sunucu tarafli renderlama (SSR), statik site olusturma (SSG), artimli statik yenileme (ISR) ve istemci tarafli renderlama gibi farkli renderlama stratejilerini tek bir projede birlestirme imkani sunar.

2026 yilinda Next.js, React ekosisteminin en populer framework'u konumundadir. App Router mimarisi, React Server Components destegi ve gelismis optimizasyon yetenekleri ile modern web uygulamalari gelistirmek icin guclu bir altyapi saglar. Bu rehberde, Next.js ile gelistirmeye baslamak icin bilmeniz gereken temel kavramlari ve uygulamalari ele alacagiz.

Next.js Neden Tercih Edilmeli?

Next.js'in saf React uygulamalarina kiyasla sundugu temel avantajlar sunlardir:

Dosya Tabanli Yonlendirme: Ayri bir router kutuphanesi kurmadan, dosya ve klasor yapisi ile otomatik yonlendirme saglar.
Coklu Renderlama Stratejisi: SSR, SSG, ISR ve istemci tarafli renderlama arasinda sayfa bazinda secim yapabilirsiniz.
Otomatik Kod Bolumleme: Her sayfa icin yalnizca gerekli JavaScript yuklenir, performans optimize edilir.
Gorsel Optimizasyonu: Yerlesik Image bileseni ile otomatik boyutlandirma, lazy loading ve modern format desteegi.
SEO Dostu: Sunucu tarafli renderlama sayesinde arama motorlari icerigi kolayca dizinleyebilir.
API Routes: Ayni proje icinde backend API endpointleri olusturabilirsiniz.
Middleware Destegi: Request bazli yonlendirme, kimlik dogrulama ve A/B test gibi islemleri edge'de gerceklestirebilirsiniz.

App Router: Yeni Nesil Yonlendirme

Next.js 13 ile tanitilan ve sonraki surummlerde olgunlasan App Router, dosya tabanli yonlendirme sisteminin evrimlesmmis halidir. app/dizini altinda calisan bu yapi, React Server Components'i varsayilan olarak kullanir.

Temel Dosya Yapisi

page.tsx: Bir rota segmentinin UI bilesenidir. app/hakkimizda/page.tsx dosyasi /hakkimizda rotasina karsilik gelir.
layout.tsx: Bir rota segmenti ve alt segmentleri icin paylasilan ortak yerlesim bilesenidir. Navigasyon, footer gibi tum sayfalarda gorunen ogeler burada tanimlanir.
loading.tsx: Sayfa yuklenirken gosterilen yukleme durumu bilesenidir. React Suspense'i otomatik olarak kullanir.
error.tsx: Hata durumlarinda gosterilen hata siniri bilesenidir.
not-found.tsx: 404 sayfasi icin ozel bilesen.
template.tsx: Layout'a benzer ancak her navigasyonda yeniden olusturulur.

Rota Gruplari ve Dinamik Rotalar

Dinamik Rotalar: app/blog/[slug]/page.tsx gibi koseli parantez ile dinamik segmentler olusturulur.
Rota Gruplari: app/(pazarlama)/ gibi parantez ile URL yapisini etkilemeden dosyalari organize edebilirsiniz.
Catch-all Rotalar: app/docs/[...slug]/page.tsx ile birden fazla segmenti yakaklayabilirsiniz.
Paralel Rotalar: @modal gibi at isareti ile ayni sayfada birden fazla rota segmentini es zamanli renderllayabilirsiniz.

Layouts: Paylasilan Yerlesimler

Layout bilesenleri, alt sayfalarin paylastigi ortak UI ogelerini tanimlar. En onemli ozelligi, navigasyon sirasinda yeniden renderlanmamasi ve state'ini korumasidir.

Root Layout: app/layout.tsx dosyasi, tum uygulamanin en ust duzey layout'udur. HTML ve body etiketlerini burada tanimlamaniz gerekir.
Ic ice Layout: Alt dizinlerde tanimlanan layout'lar, ust layout icinde ic ice yerlesir. Ornegin app/blog/layout.tsx sadece blog sayfalarinda gorunur.
Metadata: Her layout ve page dosyasinda metadata nesnesi veya generateMetadata fonksiyonu ile SEO meta etiketleri tanimlanir.

Veri Cekme (Data Fetching)

App Router'da veri cekme, React Server Components sayesinde dogrudan bilesen icinde async/awaitile yapilir. Bu yaklasim, sunucu tarafinda calisan bilesenlerin veritabaniniz veya API'lerinizle dogrudan iletisim kurmasini saglar.

Server Components'ta Veri Cekme

Server Component'lar varsayilan olarak sunucuda calisir ve istemciye JavaScript gondermez. Bu bilesenler icinde dogrudan fetch fonksiyonu veya veritabani sorgusu kullanabilirsiniz. Next.js, fetch isteklerini otomatik olarak onbellekler ve ayni istegi yalnizca bir kez gerceklestirir.

Onbellekleme Stratejileri

Statik Veri: Varsayilan olarak fetch istekleri onbelleklenir. Build zamaninda alinir ve her istekte yeniden kulllanilir.
Dinamik Veri: cache: 'no-store' parametresi ile her istekte yeni veri cekilir.
Yeniden Dogrulama: next: { revalidate: 3600 } parametresi ile belirli araliklarla onbellek yenilenir (ISR).

Renderlama Stratejileri: SSR, SSG ve ISR

Next.js, farkli sayfa ihtiyaclarina yonelik farkli renderlama stratejileri sunar. Dogru strateji secimi, performans ve kullanici deneyimini dogrudan etkiler.

Strateji	Aciklama	Kullanim Alani
SSG (Static Site Generation)	Build zamaninda HTML olusturulur, CDN uzerinden sunulur	Blog, dokumantasyon, pazarlama sayfalari
SSR (Server-Side Rendering)	Her istekte sunucuda HTML olusturulur	Kisisellestirilmis sayfalar, gercek zamanli veri
ISR (Incremental Static Regeneration)	Statik sayfalar belirli araliklarla yeniden olusturulur	Sik guncellenen ancak gercek zamanli olmasi gerekmeyen icerikler
CSR (Client-Side Rendering)	Tarayicida JavaScript ile renderlanir	Interaktif dashboardlar, kullanici odakli bilesen alanlar

Server Components vs Client Components

App Router'da tum bilesenler varsayilan olarak Server Component'tir. Client Component kullanmak icin dosyanin basina "use client" direktifi eklenir.

Server Components kullanin: Veri cekme, veritabani erisimi, hassas bilgilere erisim (API anahtarlari), buyuk bagimliliklar (sunucu tarafinda kalir, bundle boyutunu etkilemez).
Client Components kullanin: Etkilesimlilik gerektiren durumlar (onClick, onChange), state yonetimi (useState, useReducer), yasam dongusu efektleri (useEffect), tarayici API'leri (localStorage, geolocation).

Deployment: Vercel ve Diger Secenekler

Next.js uygulamanizi cesitli platformlarda yayina alabilirsiniz:

Vercel: Next.js'in yaraticilari tarafindan gelistirilen platformdur. Sifir konfigurasyonla deploy, otomatik CI/CD, edge network, analitik ve preview deployments sunar. Next.js icin en optimize cozumdur.
AWS (Amplify, Lambda): Buyuk olcekli uygulamalar icin esnek altyapi. SSR icin Lambda@Edge veya CloudFront Functions kullanilabilir.
Docker: Kendi sunucunuzda veya Kubernetes ortaminda calistirmak icin Docker imajlari olusturabilirsiniz. output: 'standalone' ayari ile optimize edilmis Docker imajlari elde edin.
Netlify: Next.js destegi sunan bir diger populer hosting platformudur.

Next.js Projesi Baslangic Kontrol Listesi

npx create-next-app@latest komutu ile yeni proje olusturun. TypeScript, ESLint ve Tailwind CSS seceneklerini etkinlestirin.
App Router yapisinda app/ dizini altinda sayfa ve layout dosyalariinizi olusturun.
Root layout'ta metadata, font ve genel stilleri yapilandirin.
Dinamik rotalari, rota gruplarini ve catch-all rotalari planlayiin.
Veri cekme stratejinizi belirleyin: statik mi, dinamik mi, ISR mi?
Image bileseni ile gorselleri optimize edin.
Middleware ile kimlik dogrulama, yonlendirme veya lokalizasyon mantigi ekleyin.
Error ve loading state bilesenleriini tum rota segmentleri icin tanimlayiin.
Lighthouse ile performans, erisilebilirlik ve SEO puanlarini olcun.
Vercel veya tercih ettiginiz platformda deploy edin ve preview deployments ile CI/CD surecini kurun.

Performans Optimizasyonu Ipuclari

Dinamik importlar kullanin: Hemen gerekli olmayan bilesenleri dynamic() ile lazy load edin.
Font optimizasyonu: next/font ile Google Fonts veya yerel fontlari otomatik optimize edin.
Bundle analizi yapin: @next/bundle-analyzer ile JavaScript bundle boyutunu inceleyin ve gereksiz bagimliliklari tespit edin.
Server Components'i maksimize edin: Mumkun oldugunca bilesenleri sunucu tarafinda tutarak istemciye gonderilen JavaScript'i minimuma indirin.
Streaming ve Suspense: Buyuk sayfalardaa kritik icerigi once gonderip, daha yavas yuklenen bolumlerri Suspense ile stream edin.

Sonuc:Next.js, modern web uygulamalari gelistirmek icin en guclu ve kapsamli React framework'udur. App Router, Server Components, gelismis veri cekme stratejileri ve yerlesik optimizasyon araclari ile hem gelistirici deneyimini hem de son kullanici performansini en ust duzeyde tutar. Megis olarak, Next.js ile yuksek performansli, SEO dostu ve olceklenebilir web uygulamalari gelistiriyoruz.