Uygulamalı Eğitim Ön Kayıt
Geliştir, Öğren, Geleceğini İnşa Et
Uygulamalı Eğitim

Next.js ile Modern Web Uygulamaları Geliştir

Sıfırdan başlayın, gerçek projelerle uzmanlaşın.

Eğitime Başla Müfredatı İncele
  • Gerçek Projeler
  • Güncel Teknolojiler
  • Uygulamalı Öğrenme

Altı hafta boyunca App Router, Server ve Client Components, Next.js 16'nın yeni cache modeli, Server Actions, auth, performans ve deploy konularını gerçek bir uygulama üzerinde birlikte ele alıyoruz. Programın sonunda uygulamanı canlıya alıyor, performansını ölçüyor ve auth akışını tamamlıyoruz.

  • 6 haftalık canlı kohort
  • 12 ders · 48 saat
  • React bilenler için
Takvim
07.11 — 13.126 hafta
Ders saati
Cmt & Paz 09.0012 ders × 4 saat
Kontenjan
20dolunca bekleme listesi
Ücret
29.000 ₺KDV dahil · 6 taksit
APP ROUTERVERİ ÇEKMEUSE CACHESERVER ACTIONSROUTE HANDLERSPROXY.TSSTREAMINGPARTIAL PRERENDERINGAUTHVERİTABANITURBOPACKSELF-HOST
Sürüm notu
Next.js 16.3React 19.2

Bu programda Next.js 16.3 ve React 19.2 ile çalışıyoruz. Cache Components etkinleştirildiğinde veri erişimi varsayılan olarak çalışma zamanında gerçekleşiyor; önbelleğe alınacak bölümleri "use cache" ile açıkça tanımlıyoruz. Next.js 16'da middleware.ts yerini proxy.ts'e bıraktı, params ve cookies() artık await istiyor, Turbopack varsayılan bundler oldu. Türkçe içeriklerin çoğu hâlâ 13–14 anlatıyor; biz güncel sürümle çalışıyoruz, eski bir projeyi nasıl yükselteceğimizi de birlikte uyguluyoruz.

01 — Uygunluk

React biliyorsan buradan devam.

React'i baştan anlatmıyoruz. Mevcut React bilginin üzerine Next.js bilgisini koyuyor, birlikte üretime hazır bir uygulama geliştiriyoruz. İlk dersten itibaren Server ve Client Components ayrımıyla başladığımız için bir giriş eşiğimiz var.

Birlikte çalışabiliriz

  • 01React yazıyorsun; hook'lara ve component kompozisyonuna hakimsin
  • 02Next.js'e başladın ama App Router ve cache davranışı kafanda oturmadı
  • 03Vite/CRA projeni Next.js'e taşıman gerekiyor
  • 04Pages Router biliyorsun, App Router'a geçmen gerekiyor
  • 0515'ten 16'ya yükselteceğin bir projen var; breaking change listesi gözünü korkutuyor
  • 06"Lokalde çalışıyor, deploy edince farklı davranıyor" cümlesini kurdun

Sana göre değil

  • 01React'e yeni başlıyorsan — önce hook'ları ve bileşen kompozisyonunu öğrenmen gerekir; YouTube'daki ücretsiz React serimle başlayabilirsin
  • 02Sadece video izleyip sertifika almak istiyorsan
  • 03Haftada 8 saat canlı derse ek olarak ödevlere zaman ayıramayacaksan
  • 04İş garantisi arıyorsan; burada öyle bir vaat yok
02 — Müfredat

Altı hafta, React'ten canlıya.

Altı hafta boyunca tek bir uygulama geliştiriyoruz; her hafta aynı projeye yeni bir katman ekliyoruz: routing → veri → mutasyon → entegrasyon → performans → deploy. Ödevler ayrı alıştırmalar değil, bu uygulamanın kendisi. Ödevlerini GitHub'da pull request olarak açıyorsun; ben de her birini kişisel olarak inceliyorum.

HAFTA 01

App Router ve render modeli

Ders 017 Kasım / Cumartesi

Next.js 16 zihin haritası

  • App Router dosya sistemi: layout, page, template, loading, error, not-found
  • Dinamik route'lar, route grupları, paralel ve intercepting route'lar
  • Turbopack artık varsayılan: dev ve build farkları
  • Pages Router ile karşılaştırma: neyin karşılığı ne
Ders 028 Kasım / Pazar

Server vs Client Components

  • Sınır tam olarak nerede: "use client" ne yapar, ne yapmaz
  • Client'a props gönderimi, Server Component'i Client Component içinde kullanma kalıbı
  • 3rd party kütüphaneleri sarmalama, provider'ları konumlandırma
  • Yaygın 5 hata ve hata mesajlarını okuma

Ödev 1 — Vite/CRA sayfasını App Router'a taşı, sınırı çiz

HAFTA 02

Veri çekme ve cache

Ders 0314 Kasım / Cumartesi

Sunucuda veri ve streaming

  • Server component içinde fetch ve doğrudan veritabanı erişimi
  • Async params, searchParams, cookies(), headers()
  • Suspense ile streaming, loading UI, iskelet tasarımı
  • Paralel vs sıralı veri çekme; waterfall'ı fark etmek
Ders 0415 Kasım / Pazar

Cache Components ve use cache

  • Yeni model: her şey varsayılan dinamik, cache opt-in
  • cacheLife profilleri, cacheTag, otomatik cache key
  • revalidateTag, updateTag, refresh farkları
  • Partial Prerendering: statik kabuk + dinamik ada

Ödev 2 — Liste/detay sayfası: streaming + etiketli cache

HAFTA 03

Mutasyon, form ve auth

Ders 0521 Kasım / Cumartesi

Server Actions

  • Form gönderimi, useActionState, useFormStatus
  • Zod ile doğrulama; sunucu hatalarını forma bağlamak
  • Optimistic UI ve mutasyon sonrası cache tazeleme
  • Güvenlik: Server Action, client'tan çağrılabilen herkese açık bir endpoint'tir.
Ders 0622 Kasım / Pazar

Auth, oturum ve proxy.ts

  • middleware'den proxy'ye: ne için kullanılır, ne için kullanılmaz
  • Cookie tabanlı oturum, JWT vs session, güvenli cookie ayarları
  • Auth.js entegrasyonu; sosyal giriş ve e-posta akışı
  • Rol bazlı erişim ve korumalı route kalıpları

Ödev 3 — Kimlik doğrulamalı CRUD: kayıt, oturum, yetkili işlem

HAFTA 04

Veri katmanı ve entegrasyon

Ders 0728 Kasım / Cumartesi

Route Handlers ve veritabanı

  • route.ts: REST uçları, webhook alma, imza doğrulama
  • Dosya yükleme ve streaming yanıtları
  • Prisma / Drizzle; serverless ortamlarda bağlantı problemi
  • Gizli anahtar yönetimi ve server-only sınırı
Ders 0829 Kasım / Pazar

Client state ve URL

  • TanStack Query'nin Next.js'te yeri: nerede hâlâ gerekli
  • Hydration ve server verisini client cache'ine bağlama
  • Filtre, sayfalama, sıralamayı searchParams ile yönetmek
  • Gerçek zamanlı veri: polling, SSE, WebSocket

Ödev 4 — Filtrelenebilir, paylaşılabilir URL'li liste

HAFTA 05

Performans, SEO ve UX

Ders 095 Aralık / Cumartesi

Performans

  • next/image ve next/font; CLS'i sıfırlamak
  • Bundle analizi, dynamic import, client bundle'ını küçültme
  • React Compiler: otomatik memoization, ne zaman açmalı
  • Instant Navigations, yeni prefetch davranışı ve Core Web Vitals
Ders 106 Aralık / Pazar

SEO, metadata ve cila

  • Metadata API, generateMetadata, dinamik OG görselleri
  • sitemap.ts, robots.ts, yapılandırılmış veri
  • i18n: route tabanlı dil, para ve tarih biçimleri
  • View Transitions ile geçişler; erişilebilirlik

Ödev 5 — Ölçülmüş performans + SEO iyileştirmesi

HAFTA 06

Üretime alma ve taşıma

Ders 1112 Aralık / Cumartesi

Deploy ve gözlemlenebilirlik

  • Vercel vs self-host: Docker, output: 'standalone'
  • Barındırmaya göre değişen ISR, image optimizasyonu, cache
  • Ortam değişkenleri, preview/prod ayrımı, migration akışı
  • Log, hata izleme, temel metrikler ve alarm
Ders 1213 Aralık / Pazar

Taşıma, test ve AI destekli geliştirme

  • Pages Router → App Router: kademeli taşıma stratejisi
  • 15 → 16 yükseltme: codemod, async params, proxy, revalidateTag
  • Playwright ile e2e test ve CI kurulumu
  • Next.js DevTools MCP ve ajanlarla hata ayıklama

Bitirme: Canlıya alınmış, ölçülmüş, kimlik doğrulamalı uygulama

03 — Çıktılar

Birlikte geliştiriyor, canlıya alıyoruz.

01

App Router'a taşıyoruz

Server ve Client Components sınırını doğru çizerek çalışan bir proje kuruyoruz.

02

Cache ve streaming kuruyoruz

Etiketli cache, revalidation ve Suspense ile hızlı bir akış oluşturuyoruz.

03

Kimlik doğrulamalı CRUD geliştiriyoruz

Server Actions, oturum yönetimi ve rol bazlı yetkilendirmeyi uyguluyoruz.

04

Webhook ve veritabanını bağlıyoruz

Route Handler ile dış servis entegrasyonunu ve veri katmanını kuruyoruz.

05

Performans ve SEO'yu ölçüyoruz

Core Web Vitals ve metadata sonuçlarını öncesi/sonrası verileriyle karşılaştırıyoruz.

06

Vercel ve Docker'a dağıtıyoruz

Projeyi hem Vercel'e hem de Docker ile kendi sunucuna çıkarıyoruz.

04 — Eğitmen

Zafer Ayan

On yılı aşkın süredir frontend geliştiriyorum. Son yıllarda kurumsal ölçekte React ve Next.js uygulamaları üzerinde çalışıyorum. Yapı Kredi Leasing için microfrontend ve Module Federation mimarisiyle kurumsal React uygulamaları geliştirdim; Fibabanka'da React Native ile şubesiz bankacılık ve KYC akışlarını, Teknasyon'da ise 150 milyon kullanıcılı bir uygulamanın React Native entegrasyonunu yürüttüm.

Aynı dönemde altı dönem boyunca 20 haftalık frontend programları verdim; yüzlerce geliştiricinin ilk React kodunu yazmasına eşlik ettim. Bu program o deneyimin üzerine kurulu: nerede takıldığınızı biliyorum, çünkü aynı soruları altı dönemdir dinliyorum.

React performansı, microfrontend, SSR ve AI destekli geliştirme üzerine Türkçe teknik içerik üretiyorum; JSKonf, Google I/O Extended ve GDG etkinliklerinde konuştum.

Zafer AyanFrontend geliştirici · eğitmen
Deneyim
10+ yıl
Verilen dönem
6 dönem
Canlı eğitim
100+ saat
LinkedIn / Medium
14 bin / 2,7 bin
Konum
İstanbul
05 — Kayıt

Ücret ve kontenjan

Ödeme için kredi kartı ve havale seçenekleri sunuyor, her kayıt için fatura düzenliyoruz. Kredi kartıyla 6 taksite kadar ödeyebilirsin; taksitli ödemede bankanın taksit farkı tutara eklenir, peşin fiyat değişmez. Ödemeyi şirketin yapıyorsa kurumsal fatura kesiyoruz.

29.000 ₺
48 saat canlısaati 604 ₺

KDV dahil · 6 hafta · 6 taksitte ayda 4.833 ₺ + banka taksit farkı

İlk 5 kesin kayıt 23.000 ₺ 29.000 ₺
Ön kayıt formu

Form bağlayıcı değildir; kayıt açıldığında önce forma yazılanlara haber veriyoruz. Kontenjan ve erken kayıt indirimi ödeme sırasına göre kesinleşiyor. Kontenjan dolduğunda bekleme listesine alınıyorsun; bir yer boşalırsa sırayla haber veriyoruz.

Program boyunca sağladıklarımız

  • 12 canlı ders (Cumartesi & Pazar 09.00–13.00)
  • Ders kayıtlarına 13 Mart 2027'ye kadar erişim
  • Ödevlere kişisel kod incelemesi (GitHub PR)
  • WhatsApp topluluğu ve haftalık soru-cevap
  • Ders kodları ve başlangıç repo'ları
  • Next.js 16 yükseltme kontrol listesi
  • Katılım belgesi
  • Program başlayana kadar koşulsuz tam iade
06 — SSS

Merak edilenler

Sorunun burada yoksa ozcanzaferayan@gmail.com adresine yazabilirsin.

Hiç Next.js kullanmadım, katılabilir miyim?

Evet. Next.js'i sıfırdan ele alıyoruz; senden beklediğimiz ön koşul React bilgisi. React hook'larını kullanabiliyor ve bileşen kompozisyonunu anlıyorsan ilk dersten itibaren birlikte ilerleyebiliriz. Temelleri tazelemek istersen YouTube'daki ücretsiz React ile Modern Web Geliştirme serimle başlayabilirsin.

Pages Router kullanıyorum, işime yarar mı?

Fazlasıyla. Son dersin tamamını taşıma stratejisine ayırıyoruz: Pages Router'dan App Router'a kademeli geçiş ve 15'ten 16'ya yükseltme. Bu sırada kendi projenin taşıma planını da birlikte çıkarıyoruz.

Dersleri canlı takip edemezsem?

Her dersi kaydediyor ve program bittikten sonra üç ay daha, 13 Mart 2027'ye kadar erişime açık tutuyoruz. Ancak programı tartışma ve ödev geri bildirimi üzerine kurduğumuz için derslerin en az yarısını canlı takip edemeyeceksen beklediğin verimi alamazsın.

Ödevler ayrı alıştırmalar mı, tek proje mi?

Tek proje. İlk hafta kurduğumuz uygulamayı altı hafta boyunca büyütüyoruz: veri çekme, cache, Server Actions, kimlik doğrulama, veritabanı, performans ve deploy hep aynı projenin üstüne biniyor. Program bitince elinde canlıda çalışan, kimlik doğrulamalı ve ölçülmüş tek bir uygulama oluyor; doğrudan portföyüne koyabilirsin.

Backend bilmem gerekiyor mu?

Hayır. Veritabanını Next.js uygulamasında ihtiyaç duyduğumuz kapsamda ele alıyoruz: Prisma/Drizzle ile temel sorgular, bağlantı yönetimi ve webhook. Ayrı bir backend mimarisi işlemiyoruz.

Katılım belgesi veriliyor mu?

Program sonunda, içerik ve saat bilgisinin yer aldığı bir katılım belgesi veriyoruz. Belgede canlı katıldığın ders ve tamamladığın ödev sayısı da yer alıyor. Bu belge MEB onaylı bir sertifika değildir; biz de bu şekilde sunmuyoruz.

Örnek katılım belgesi: katılımcı adı, program tarihleri, 48 saat, canlı ders ve ödev sayısı, haftalık konular ve eğitmen imzası
Fiyatı neye göre değerlendirmeliyim?

Saat başına bakmanı öneriyorum. Program 48 saat canlı ders içeriyor; Türkiye'deki benzer canlı eğitimler genelde 21–24 saat oluyor ve etiket fiyatları da bu programa yakın. 29.000 ₺ ile saati 604 ₺'ye, ilk 5 kayıt fiyatıyla 479 ₺'ye geliyor. Üstüne her ödevine GitHub üzerinden kişisel kod incelemesi, WhatsApp topluluğu ve haftalık soru-cevap dahil.

Şirketim ödeyecek, fatura sorun olur mu?

Hayır. Şahıs şirketim üzerinden kurumsal fatura düzenliyorum. Şirketin için gereken program içeriğini, saat bilgisini ve eğitmen özgeçmişini kayıt sırasında paylaşıyorum.

Beğenmezsem iade alabilir miyim?

Evet. Program başlayana kadar, yani 6 Kasım 2026 saat 23.59'a kadar, gerekçe göstermeden ücretinin tamamını iade ediyoruz. İlk ders başladıktan sonra iade yapmıyoruz; bu yüzden takvimi ve müfredatı kayıt olmadan önce incelemeni öneriyoruz. Program başlamadan ertelenirse ya da iptal edilirse ücretin her durumda iade edilir.

7 Kasım 2026 · 20 kişi

Başlıyoruz.

Ön kayıt formu

20 kişilik kontenjan · form bağlayıcı değildir