Next.js’e Hızlı Giriş Rehberi— 1

Bir React çerçevesi(framework) olarak Next.js, React’ın eksik noktalarını tamamlamak ve React’ı daha da gelişmiş bir Web kütüphanesi haline getirmek için oldukça önemli katkılar sunuyor. Fayda sunduğu alanları aşağıdaki gibi sıralayabiliriz.

• Kodun paketlenmesi(‘Webpack’ bu işlevi sağlıyor) ve derlenmesi(‘Babel’ bu işlevi sağlıyor) işlemlerinin gerçekleştirilmesi.
• Yazılımın ürününün üretim optimizasyonun sağlanması. Kod bölümlenmesi (code-splitting) gibi işlemler bu anlamda oldukça önemli.

Kod bölümlenmesi (code-splitting), kodu çeşitli paketlere ya da bileşenlere ayırarak ihtiyaca göre ya da paralel olarak yükleme işlemine denir.

• Bazı Web sayfalarının performans ve SEO amaçlı statik olarak ön işlemeden(pre-render) geçirilmesi istenebilir.

Ön İşleme(pre-render), web sayfalarının önceden oluşturulmasını esas alan bir yaklaşım türüdür. Kullanıcının muhtemel ihtiyaçlarına göre ön işleme ile sayfa içeriklerinin hızlıca indirilmesi sağlanır.

• Elde edilebilecek faydaya göre kimi zaman sunucu tarafı işleme(server-side rendering) kimi zaman ise kullanıcı tarafı işleme(client-side rendering) uygulamak istenilebilir.

Kullanıcı Tarafı işleme (client-side rendering — CSR), sunucu(server) tarafından talep edilen içeriği oluşturulmamış(ya da yükleme ekranı bulunan) HTML dosyasının taracıyı(browser) tarafında, Javascript kodlarının derlenmesi ile içeriğinin oluşturulmasıdır.

Kaynak: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering

Sunucu Tarafı İşleme(Server-Side Rendering — SSR), sunucu tarafında içeriği oluşturulan HTML dosyalarının taracıya iletilerek doğrudan görüntülenmesi işlemine denir. Javascript kodları sayfa görüntülenmeye başlandıktan sonra derlenir.

Kaynak: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering

• Geliştirilen React uygulamasını veri tabanına bağlamak amacıyla sunucu tarafında kod yazmaya ihtiyaç duyulabilir.

Yukarıda sıralanan işlemleri ‘Geliştirici Deneyimi’ni de öncelleyerek ve optimum bir soyutlama sağlayarak çözmesi nedeniyle Next.js, React ekosisteminde dikkatleri üzerine çekmeyi başarıyor. Next.js’in sağladığı bazı özellikleri sıralayacak olursak.

**Sayfa bazlı rotalama sistemi ve dinamik rotalar.

Sayfalar(pages) klasörü altında oluşturulan dosya ya da klasör adlarına göre tarayıcıda indekslenmeye tabi tutulurlar. Dinamik olarak rota oluşturmak için “[parametre]” gösterimi ile dosyalar meydana getirilir.

pages/
│   index.js -> url: /    
│
└───posts/
     |  index.js  -> url: /posts
     |
     └─── [id]/
             index.js       -> url: /posts/[id]
             commentId.js   -> url: /posts/[id]/[commentId]

** Sayfa bazlı olarak ön işlemeyi (pre-rendering) Next.js iki şekilde gerçekleştirir. Bunlar; statik site oluşturucu(static site generator — SSG) ve sunucu tarafı işleme(SSR)’dir.

Statik site oluşturucuları(SSG), siteler için gerekli olan verileri,içerikleri ve şablonları toparlayarak çıktı olarak sayfaları ve varlıkları(assets) bir dosya olarak sunan yapılara denir.

Kaynak: https://www.netlify.com/blog/2020/04/14/what-is-a-static-site-generator-and-3-ways-to-find-the-best-one/

** Otomatize edilmiş kod bölümlemesi(code-splitting) ile yalnızca ihtiyaç duyulan sayfa,içerik ya da bileşenlerin performans odaklı oluşturulması.

** Optimize edilmiş ön işleme ile sunucu tarafı rotalama(client-side routing) işleminin sağlanması.

Sunucu tarafı rotalama(client-side routing), Web sayfasının URL’in değişmesine rağmen, kullanıcı uygulama içerisinde navigasyon sağladığında bile tam safya yüklemesi gerçekleşmez. Bunun yerine Javascript URL’i güncelleyip, içeriği toparlayıp gösterimi gerçekleştirir.

** Stilleme yönüyle; yerleşik CSS(Built-in CSS),Saas ve CSS-in-JS kütüphane desteği sağlar. Bu desteklere ek olarak modüler CSS yapıları ile stilleme noktasında da kod bölümlenmesi sağlanır. Ve ilgili sayfa yüklendiğinde yanlızca o sayfaya ait CSS kodları yüklenir.

# Style jsx ile sayfa ya da bileşen bazlı stilleme
<style jsx>{`
        p {
          color: blue;
`}</style>
# "[Component].module.css" yapısı ile sayfa ya da bileşen bazlı stilleme

** Hızlı Sayfa Yenileme(Fast Refresh) ile geliştirme ortamında sağlanan destek.

Hızlı Sayfa Yenileme(Fast Refresh), React bileşenlerinde yapılanan düzenlemelere anlık geri bildirimler sağlayarak, geliştiricilerin hata ayıklama ya da kodlama deneyimini iyileştirmeyi amaçlayan bir özelliktir.

** Sunucusuz fonksiyonlar(Serverless Functions) ile API(Application Programming Interface) rotaları oluştururak API uzantıları oluşturmayı sağlar. “api” klasörü altında oluşturulan dosyalar API uzantısı olarak işlem görür ve yalnızca sunucu tarafında işlem görerek kullanıcı tarafında paket boyutuna etki etmez.

pages/
│   index.js -> url: /    
│
└───api/
     |  index.js - API uzantısı
     |
     └─── [id].js - Dinamik API uzantısı

Sunucusuz fonksiyonlar(Serverless Functions), yazılım geliştiriciler tarafından oluşturulan programlanmış fonksiyonlardır. Sonrasında bulut işleme firmaları tarafından barındırılır(hosting) ve sürekliliği sağlanır. Aynı zamanda kod bakımları sağlanır ve yazılımın işlevselliğini yönüyle geliştiriciler yeni kodları daha kolay ve hızlı olarak işleme sokmuş olurlar.

SONUÇ :

Sağladığı faydalar ve topluluk nezdinde gördüğü ilgi nedeniyle Next.js’e hızlı bir giriş sağlamak için bir rehber oluşturmayı hedefliyorum. Aşağıda bağlantısını paylaştığım oldukça güzel hazırlanmış Next.js’in resmi sayfasından daha fazlasına erişebilirsiniz.

İlk yazımızda amacım neden Next.js’i tercih etmeliyim, hangi sorunları gideriyor ve fazladan neler sağlıyoru sorgulamaktı. Ayrıca bunun yanında daha iyi kavrayış adına bir kavram sözlüğü yaratmak ve daha iyi sorgulama açısından geliştiricilere anahtar sözcükler sunmak istedim.

Yorumlarak katkı sağlayabilir,beğenerek öğrenme motivasyonumu artırabilirsiniz. Serinin gelecek yazısında görüşmek dileğiyle.

Getting Started | Next.js