Next.js ile Modern Web Geliştirme Rehberi

Next.js ile modern web geliştirme, son birkaç yılda kurumsal web projelerinde en sık tercih edilen yaklaşımlardan biri hâline geldi. React'in bileşen tabanlı yapısını; sunucu tarafı render, statik üretim, yönlendirme ve görsel optimizasyonu gibi üretim ortamı ihtiyaçlarıyla tek bir çatı altında birleştirmesi, Next.js'i hem pazarlama siteleri hem de karmaşık web uygulamaları için güçlü bir aday yapıyor.

App Router ve onunla birlikte gelen React Server Components modeli, Next.js'te uygulama mimarisini kökten değiştirdi; Next.js 15 ve 16 sürümleri ise önbellekleme ve derleme tarafında önemli değişiklikler getirdi. Bu rehberde, güncel Next.js'in temel kavramlarını, eski Pages Router yaklaşımıyla farklarını ve kurumsal projelerde dikkat edilmesi gereken en iyi uygulamaları ele alıyoruz.

Next.js Nedir ve Kurumsal Projelerde Neden Tercih Edilir?

Next.js, Vercel tarafından geliştirilen ve React üzerine kurulu açık kaynaklı bir web çatısıdır. Saf React ile bir uygulama geliştirirken yönlendirme, veri çekme, derleme ve sunucu tarafı render gibi konular için ayrı ayrı karar vermek gerekir. Next.js bu kararların büyük kısmını makul varsayılanlarla sunar.

• Sunucu tarafı render ve statik üretim sayesinde arama motorlarına uygun, hızlı açılan sayfalar
• Dosya tabanlı yönlendirme ile öngörülebilir ve ölçeklenebilir proje yapısı
• Görsel, font ve script optimizasyonu için hazır bileşenler
• API uç noktaları ve sunucu mantığını aynı projede barındırabilme
• TypeScript desteği ve geniş React ekosistemine doğrudan erişim
• Next.js 16 ile varsayılan derleyici hâline gelen Turbopack sayesinde hızlı geliştirme ve derleme süreleri

Next.js App Router: Pages Router'dan Farkları

App Router, app klasörü altında çalışan yeni yönlendirme sistemidir. Her klasör bir rota segmentini temsil eder; page, layout, loading ve error gibi özel dosyalar ise o segmentin davranışını tanımlar. İç içe layout'lar sayesinde ortak arayüz parçaları, sayfa geçişlerinde yeniden render edilmeden korunur.

App Router'da sayfa parametreleri (params, searchParams) ile cookies ve headers gibi istek API'leri asenkrondur; bu değerler await ile okunur. Eski örnek kodları güncel projelere taşırken bu farka dikkat etmek gerekir.

Pages Router hâlâ desteklenmektedir ve mevcut projeler için bir anda geçiş zorunlu değildir. İki yapı aynı projede bir arada çalışabildiği için kademeli geçiş, büyük uygulamalarda genellikle en düşük riskli yoldur.

Geçiş planlanırken öncelikle sık değişmeyen, içerik ağırlıklı sayfalarla başlamak mantıklıdır. Kimlik doğrulama, ödeme veya karmaşık form akışları gibi kritik bölümler ise ekip yeni modele alıştıktan ve test kapsamı yeterli seviyeye geldikten sonra taşınmalıdır.

React Server Components ile Performans ve Güvenlik

App Router'da bileşenler varsayılan olarak sunucuda çalışır. Sunucu bileşenleri veritabanına veya iç servislere doğrudan erişebilir, ürettikleri çıktı istemciye HTML ve hafif bir veri yapısı olarak gönderilir. Bu bileşenlerin JavaScript kodu tarayıcıya hiç inmez; bu da özellikle içerik ağırlıklı sayfalarda paket boyutunu belirgin biçimde azaltır.

Etkileşim gerektiren parçalar, dosyanın başına eklenen "use client" yönergesiyle istemci bileşeni olarak işaretlenir. İyi bir mimaride istemci bileşenleri ağacın uç noktalarında, mümkün olduğunca küçük tutulur: bir form, bir açılır menü veya bir grafik gibi.

App Router ayrıca React Suspense ile streaming desteği sunar. Sayfanın hızlı hazırlanan bölümleri hemen gönderilirken, yavaş bir servise bağlı bölümler hazır olduğunda akış hâlinde eklenir. Böylece kullanıcı tüm verinin yüklenmesini beklemeden sayfayla etkileşime geçebilir; loading dosyaları da bu bekleme anları için tutarlı bir iskelet görünümü tanımlamayı kolaylaştırır.

Veri Çekme, Önbellekleme ve Next.js Server Actions

Önbellekleme katmanları

Next.js 15'ten itibaren fetch istekleri varsayılan olarak önbelleğe alınmaz; veri her istekte güncel olarak çekilir. Önbellekleme artık bilinçli bir tercihtir: Next.js 16 ile gelen Cache Components yaklaşımında "use cache" yönergesiyle hangi bileşen veya fonksiyonun önbelleğe alınacağı, cacheLife ile ne kadar süre tutulacağı belirtilir; cacheTag ile etiketlenen veriler revalidateTag veya updateTag fonksiyonlarıyla olay bazlı olarak yenilenir. Bu model güçlüdür ancak hangi verinin ne kadar süre önbellekte kalabileceğine iş kuralları üzerinden karar verilmelidir.

Server Actions

Next.js 14 ile kararlı hâle gelen Server Actions, form gönderimi ve veri güncelleme gibi işlemlerin ayrı bir API uç noktası yazmadan sunucuda çalıştırılmasını sağlar. Bu yaklaşım kod miktarını azaltır, ancak her action'ın bir sunucu uç noktası gibi ele alınması gerekir.

1. 1Her Server Action içinde kullanıcı kimliğini ve yetkisini yeniden doğrulayın.
2. 2Gelen veriyi Zod gibi bir şema kütüphanesiyle sunucu tarafında doğrulayın.
3. 3Veri değiştiren işlemlerden sonra ilgili yolu veya etiketi yeniden doğrulayın.
4. 4Hata durumlarını kullanıcıya anlamlı mesajlarla döndürün, iç hata ayrıntılarını gizleyin.

Next.js ile SEO ve Core Web Vitals Optimizasyonu

Kurumsal web sitelerinde arama motoru görünürlüğü çoğu zaman doğrudan iş hedefleriyle bağlantılıdır. App Router'daki Metadata API, her sayfa için başlık, açıklama, Open Graph ve canonical bilgilerini tip güvenli biçimde tanımlamayı sağlar. Dinamik sayfalarda generateMetadata fonksiyonu, içerik verisine göre metadata üretir. Site haritası ve robots dosyaları da kod üzerinden üretilebilir.

Performans tarafında next/image bileşeni görselleri uygun boyut ve formatta sunarak sayfa yerleşim kaymalarını azaltır; next/font ise web fontlarını kendi sunucunuzdan, harici bir istek yapmadan yükler. Bu iki bileşen, Core Web Vitals metriklerinde iyileşme için genellikle ilk ele alınması gereken noktalardır.

Kurumsal Next.js Projelerinde En İyi Uygulamalar

• TypeScript ile başlayın; paylaşılan tipler bakım maliyetini uzun vadede düşürür.
• Sunucu ve istemci sınırını bilinçli çizin; "use client" yönergesini gerektiği yerde, en alt seviyede kullanın.
• Kimlik doğrulama ve yönlendirme kuralları için proxy dosyasını (Next.js 16 öncesindeki adıyla middleware) kullanın, ancak ağır iş mantığını oraya taşımayın.
• Barındırma kararını erken verin: Vercel, Node.js sunucusu veya Docker ile kendi altyapınız farklı operasyonel sonuçlar doğurur.
• Hata izleme, loglama ve performans ölçümünü ilk sürümden itibaren devreye alın.

Next.js'in yayın döngüsü hızlıdır ve bazı özellikler deneysel olarak sunulur. Kurumsal projelerde deneysel bayrakları üretim ortamında kullanmaktan kaçınmak ve sürüm yükseltmelerini planlı biçimde, test kapsamı güçlü bir ortamda yapmak önemlidir.

Sonuç

Next.js ile modern web geliştirme; App Router, Server Components ve Server Actions sayesinde daha az istemci kodu, daha iyi performans ve daha düzenli bir mimari vaat ediyor. Bu kazanımların gerçekleşmesi ise sunucu ve istemci sınırının doğru çizilmesine, önbellekleme davranışının iyi anlaşılmasına ve güvenlik kontrollerinin her katmanda uygulanmasına bağlı.

Yeni bir projeye başlıyorsanız App Router doğrudan tercih edilebilir; mevcut bir Pages Router uygulamanız varsa kademeli bir geçiş planı en sağlıklı yoldur. BMK Yazılım olarak kurumların Next.js tabanlı web uygulamalarını planlama, geliştirme ve mevcut sistemlerle entegre etme süreçlerinde destek veriyoruz.