Next.js Nedir?

React'in eksik bıraktığı katman

React bir arayüz kütüphanesidir: bileşenleri nasıl yazacağınızı söyler ama URL'lerin nasıl eşleneceği, sayfanın sunucuda mı tarayıcıda mı üretileceği, kodun nasıl paketleneceği gibi soruları size bırakır. Next.js bu soruların cevaplarını hazır getiren bir framework'tür. Yönlendirme, render stratejileri, veri çekme ve önbellekleme, metadata yönetimi, görsel ve font optimizasyonu aynı çatı altında gelir; bundler ve derleyici gibi alt seviye araçlar da kendiliğinden yapılandırılır. Sürüm 16'dan itibaren varsayılan bundler Turbopack'tir; Webpack'e ihtiyaç duyan projeler bunu --webpack bayrağıyla seçer.

Next.js'te iki yönlendirici vardır. Sürüm 13'te gelen App Router bugünkü önerilen yapıdır ve React Server Components üzerine kuruludur. Eski Pages Router hâlâ destekleniyor, ancak yeni özellikler App Router tarafında geliştiriliyor.

App Router'da klasör yapısı URL'dir

app dizinindeki her klasör bir URL parçasına (route segment) karşılık gelir. Bir klasörün herkese açık bir sayfa olması için içinde page.tsx bulunmalıdır; layout.tsx ise alt sayfaların paylaştığı ve gezinme sırasında yeniden render edilmeyen çerçeveyi tanımlar.

app/
  layout.tsx            → tüm sitenin ortak iskeleti
  page.tsx              → /
  (pazarlama)/hakkimizda/page.tsx → /hakkimizda (parantezli klasör URL'ye girmez)
  blog/[slug]/page.tsx  → /blog/ilk-yazi, /blog/ikinci-yazi …
  api/iletisim/route.ts → HTTP isteklerini karşılayan Route Handler
proxy.ts                → istek tamamlanmadan önce çalışan kod

Köşeli parantezli klasörler dinamik segmenttir; sayfa bileşenine gelen params güncel sürümlerde bir Promise'tir ve await ile okunur. route.ts dosyaları Web standardındaki Request ve Response nesneleriyle çalışan uç noktalar tanımlar. Önceki sürümlerdeki middleware dosyası 16 ile birlikte kullanımdan kaldırılarak proxy adını aldı; eski bir rehberi takip ederken bu tür isim değişikliklerine dikkat etmek gerekir.

Server Component ve Client Component

App Router'da bileşenler varsayılan olarak Server Component'tir: sunucuda çalışır, veritabanına veya bir API'ye doğrudan erişebilir ve tarayıcıya gönderilen JavaScript paketine eklenmez. State, efekt, tıklama olayı veya tarayıcı API'si gereken bileşenler dosyanın başına "use client" yazılarak Client Component yapılır. Bunlar da ilk yüklemede sunucuda HTML'e dönüştürülür, ardından tarayıcıda hydration ile etkileşimli hâle gelir. Formlar ve veri değişiklikleri için "use server" ile işaretlenen Server Function'lar kullanılır.

Pratik sonuç şudur: etkileşim gerektirmeyen içerik ne kadar çok Server Component'te kalırsa tarayıcının indirip çalıştırması gereken kod o kadar azalır. "use client" sınırını ağacın üst kısmına koymak bu avantajı büyük ölçüde ortadan kaldırır.

Render modları ve önbellekleme

• Prerender (statik render): İstek anı verisine ihtiyaç duymayan sayfalar derleme sırasında HTML'e dönüştürülür ve bir CDN'den sunulabilir. Bu, klasik SSG yaklaşımıdır.
• Dinamik render: cookies(), headers() veya searchParams gibi istek anı API'lerini kullanan bileşenler her istekte sunucuda render edilir.
• Revalidation: Statik içerik, sitenin tamamı yeniden derlenmeden zamana bağlı olarak veya talep üzerine yenilenir; Next.js dünyasında buna ISR da denir.
• Cache Components: cacheComponents ayarı açıldığında "use cache" direktifi ve cacheLife() ile bileşen ya da fonksiyon düzeyinde önbellekleme yapılır. Aynı sayfada statik bir kabuk hemen gönderilir, dinamik kısımlar hazır oldukça akış (streaming) ile eklenir.

Arama motorları açısından

Sunucuda üretilen HTML, içeriğin JavaScript çalıştırılmadan da okunabilmesini sağlar; bu, yalnızca tarayıcıda render edilen tek sayfa uygulamalarına göre tarama tarafında belirgin bir rahatlık getirir. Başlık, açıklama ve Open Graph etiketleri metadata nesnesi ya da generateMetadata fonksiyonuyla Server Component'lerde tanımlanır. Yine de Next.js kullanmak kendi başına iyi SEO anlamına gelmez: yanlış canonical, eksik iç bağlantılar veya şişkin istemci paketleri framework'ten bağımsız sorunlardır.

Ne zaman gereğinden fazla?

Birkaç sayfalık, sık değişmeyen bir tanıtım sitesi için Next.js'in getirdiği esneklik ek bakım yükü anlamına gelebilir; sürümler arasında API'ler hızla değişir ve her büyük güncelleme bir geçiş planı ister. Dağıtım seçenekleri de değerlendirilmelidir: bütün özellikler bir Node.js sunucusunda veya Docker konteynerinde çalışır, output: 'export' ile alınan statik çıktıda ise sunucu gerektiren özellikler kullanılamaz.