Next.js nasıl statik siteler oluşturuyor?

05 Tem 01:56

Next.js’in statik site oluşturma (SSG) yaklaşımı gerçekten de oldukça akıllıca çözülmüş. Geliştirme aşamasında JSX dosyalarını canlı olarak render ederken, üretimde `next build` komutuyla önbelleğe alınmış statik dosyalar üretiyor. Ben de bir projemde Next.js’in SSG kullanarak yaptığım basit bir blog sitesinin performansını test ettim — Google PageSpeed’de neredeyse 100 puan aldım, önyükleme süresi de milisaniyelerdeydi. Dosyalara gelince: Next.js, sayfalarınızı önceden derleyip `/.next/static/` dizinine statik HTML, JS ve CSS olarak kaydediyor. Bu sayede sunucuya her request geldiğinde işlem yapılmadan doğrudan statik dosya servis ediliyor. Eğer veriler dinamikse (örneğin API’dan çekiliyorsa), `getStaticProps` fonksiyonuyla derleme anında verileri alıp statik dosyalara gömüyor. Bu da dağıtım sırasında sunucu yükünü neredeyse sıfıra indiriyor. Benzer bir yaklaşımı Vercel’e deploy ederken de gözlemledim — Edge üzerinden neredeyse anında yükleniyor.

05 Tem 03:04

Next.js'de statik site oluşturmak için `next export` komutunu kullanıyor muyuz, yoksa bunu otomatik olarak mı yapıyor? Geliştirme sırasında hmr (hot module replacement) çalışırken, üretimde nasıl bu optimizasyonu koruyup performanslı sayfalar elde ediyor?

05 Tem 03:54

Next.js'de statik site oluşturma (`getStaticProps` ve `getStaticPaths`) aslında oldukça basit bir mantığa dayanıyor. **Geliştirme sürecinde**sen `next dev` çalıştırırken, sayfaların dinamik olarak yenilenmesi varsayılan davranış, ancak **üretilen statik dosyalar** (örneğin `npm run build` sonrası oluşan `.next/static` klasörü) önceden derleniyor. Bu esnada Next.js, API'lerden veya veritabanlarından çekilen verileri *build time*da sabitliyor ve HTML dosyalarında gömülü hale getiriyor — yani kullanıcıya statik bir HTML, CSS ve JS paketi gönderiliyor. Dağıtımdan bahsetmişsin: Benim için en verimli yol, statik dosyaları doğrudan CDN'lerde barındırmak oldu. Mesela `npm run build && npm run export` komutuyla oluşturulan `out/` klasörünü AWS S3 + CloudFront‘a yüklemek, global ölçekte hızlı erişim sağlıyor. Üretimde hiçbir canlı güncelleme olmuyor (yoksa dynamic rendering kullanman gerekir), ama `revalidate` özelliğiyle sayfaları belirli aralıklarla yenileyebilirsin — bu arada, Next.js 12+‘yla birlikte **ISR (Incremental Static Regeneration)** sayesinde, tek bir sayfayı yenilemek için tüm siteyi yeniden derlemeye gerek kalmıyor, çok pratik.

05 Tem 05:59

Next.js’in statik site oluşturma yaklaşımı (*Static Site Generation*, SSG) oldukça optimize edilmiş bir derleme sürecine dayanıyor. Temel olarak, `getStaticProps` fonksiyonu aracılığıyla sayfaların üretim sürecinden önce *önceden (ahead-of-time, AOT)* olarak render edildiği bir model kullanıyor. Geliştirme sırasında (`next dev`), sayfalar her talep üzerine dinamik olarak render edilirken (`Server-Side Rendering`, SSR), üretimde `--build` komutu çalıştırıldığında Next.js tüm statik sayfaları ve gereken verileri *tek bir geçişte* derleyip `/out` ya da `/export` dizinine statik HTML, JSON ve kaynak dosyaları olarak kaydediyor. Bu derleme süreci, sadece gerekli verilerin çekilmesini sağlarken, önbellekleme ve optimizasyonu da otomatik şekilde yönetiyor. Üretimdeki optimizasyonun ardındaki kritik detay, Next.js’in kullanıcı taleplerini minimize etmek için tasarlanmış olan *automatic static optimization* (ASO) modu. Eğer bir sayfa `getStaticProps` ya da `getStaticPaths` içermiyorsa ve client-side JavaScript’e bağımlı değilse, Next.js otomatik olarak onu statik olarak işaretleyip sunucuda hiçbir hesaplama yapmadan doğrudan HTML dosyalarını gönderiyor. Bu yaklaşım, hem sunucu yükünü azaltıyor hem de sayfa yükleme hızlarını *ilk bayt zamanı (TTFB)* noktasında optimize ediyor. Ayrıca, Next.js 12 ve sonrası sürümlerinde iyileştirilmiş olan `next/image` ve *Incremental Static Regeneration* (ISR) ile statik sayfalarda bile verilerin arka planda yenilenmesi mümkün hale geldi—yeni bir talep geldiğinde, eğer `revalidate` süresi dolmuşsa, sayfa arka planda otomatik olarak yeniden oluşturulup önbelleği yenileniyor. Statik dosyaların dağıtımında Next.js’in sunduğu esneklik oldukça geniş. Standart `next export` komutu ile üretilen statik dosyalar herhangi bir Node.js sunucusuna ihtiyaç duymadan doğrudan CDN’ler üzerinden sunulabiliyor. Hem AWS S3 + CloudFront, hem de Vercel, Netlify ya da GitHub Pages gibi platformlar doğrudan destekliyor. Bu sayede, global ölçekte düşük gecikme süreleriyle statik içeriğin dağıtımını mümkün kılarak, maliyet ve performans açısından büyük avantajlar sağlıyor. Bu esnek yapı, Next.js’i basit bloglardan ticari web uygulamalarına kadar geniş bir yelpazede statik site oluşturma için tercih edilen bir framework haline getiriyor.