Son yıllarda web tarafında frontend alanı epey gelişti. Artık çok daha hızlı web sitelerini daha kolay ve daha kullanışlı şekilde yapabiliyoruz. Bunları React.js, Vue.js, Angular ve Svelte gibi frontend kütüphanesi ya da frameworkleri ile gerçekleştirebiliyoruz. Bu yazımızda ele aldığımız konu ise React.js üzerine inşa edilmiş Next.js framework’ü olacak.
Öne çıkan birkaç Next.js özelliği:
- Resim optimizasyonu
- Yerelleştirme
- SSG(Server Side Rendering) ve SSG(Server Side Generation)
- TypeScript desteği
- Hızlı yenileme
- Dosya adı ile route sistemi
- API routes
- Component(Bileşen) seviyesinde CSS yazımı
- Kod bölme ve paketleme
Şimdi bu özellikler ne işe yarar kısaca onlardan bahsedelim.
Resim Optimizasyonu
Next.js içerisinde yerleşik olarak bulunan Image componenti ile statik resim dosyalarını kolayca optimize edebilirsiniz. Resim boyutu çok yüksek olsa bile, örneğin 4K, bu resim dosyasını farklı çözünürlüklerde de üreterek ihtiyacınız olan boyuttakini gösterir. Buradan zaten bir optimizasyon yapılmış olur. Bunun haricinde resim dosyasını sıkıştırır ve bir optimizasyon daha yapar. İsterseniz resim kalitesini siz belirleyerek daha fazla optimizasyon yapabilirsiniz.
Yerelleştirme
Birden fazla dil seçeneğini mevcut olacaksa config dosyanıza ekleyeceğiniz birkaç satır kod ile sitenizi farklı dillerde yönetebilme imkanı tanır.
SSR ve SSG
Next.js, React.js üzerine inşa edilmiş demiştik. React.js ise client tarafında çalıştığından sayfaların kaynak kodlarında site içeriği bulunmaz. Siteye istek attığınız anda gerekli dosyalar çekilerek sayfa oluşturulur. Next.js bu sayfaların tamamını build zamanında önceden oluşturarak ziyaretçiye önceden oluşturulmuş sayfalar gönderir. Bu işlem SEO açısından çok önemlidir.
Yukarıda bu konu özelinde React.js ile Next.js arasındaki farktan bahsettik. Şimdi SSR ne işe yarar ona gelelim.
Yukarıdaki özellik ile birlikte dinamik sayfalar için de SSR yapabilmemizin yöntemleri mevcuttur. Bunun için Next.js’in getServerSideProps fonksiyonunu kullanarak sayfa açılmadan önce istediğimiz bir adrese istek atıp istediğimiz verileri çekip bunu sayfaya gönderip kaynak koduna ekleyebiliriz.
Kısaca bir de SSG’den bahsedelim: SSG, sunucu tarafında dinamik sayfalar oluşturmamızı sağlar. Diyelim ki bir blog siteniz var, hızlı olması açısından bu sayfaları statik olarak oluşturmak istiyoruz ancak dinamik olduğundan sunucudan aldığımız veriler sürekli olarak değişebiliyor. Bunun için belirlediğiniz saniye sonunda otomatik olarak gelen verileri build edildikten sonra doğrulayabilir ve tüm dinamik sitenizi aslında statik gibi yayınlamanızı sağlar. Bu da çok hızlı bir web sitesi demektir. Çünkü o sayfa önceden oluşturulduğu için açılırken sunucuya istek atıp onu bekleme süresi diye bir şey olmaz.
TypeScript Desteği
Büyük projelerde bence TypeScript olmazsa olmazdır. Hangi componentin hangi propları aldığını sürekli aklımızda tutmak yerine onun tipini tanımlayıp çok daha kolay ve güvenli kod yazabiliriz. Bu konuda Next.js TypeScript desteği de vermektedir.
Hızlı Yenileme
Bu özellik ile geliştirme süresi boyunca yaptığınız değişiklikler çok hızlı bir şekilde projeye yansıyacaktır. Bu da sizi zamandan büyük ölçüde tasarruf ettirecek bir şeydir.
Dosya Adı ile Routing Sistemi
Web projelerinde routing sistemi aslında başlı başına bir derttir ancak Next.js bu konuyu çok güzel çözmüş. Örnek olması açısından example.com adresi için index dosyamız çalışır, example.com/blog adresi için blog dosyamız çalışır. Peki example.com/blog/buraya-da-blog-basligi-gelecek adresine gitmek istersek nasıl olacak diye sorabilirsiniz. Bu durumlar için de blog diye bir klasör açıyoruz ve içindeki dosya adımızı köşeli parantezler([]) içerisinde yazdığımızda bu yol artık dinamik olmuş oluyor. Yani şöyle: pages/blog/[slug] dosyamızda çalışıyor aslında hepsi. Bu şekilde dinamik sayfaları da çok kolay oluşturabiliyoruz.
API
Next.js ile birlikte çok kolay bir şekilde ihtiyacınız olan basit API servisini yazabilirsiniz. Bunun için pages klasörü altında “api” adında bir klasör açıp “getPosts.js” adında bir dosya oluşturduğumuzu düşünelim. Bu da aslında example.com/api/getPosts adresine denk gelecektir. Bu dosyada istediğiniz yerden veri çekip, o veriyi işleyip sonucunda bir cevap(response) dönebilirsiniz.
Component Seviyesinde CSS Yazımı
CSS yazmak dışarıdan her ne kadar kolay gibi görünse de ciddi emek isteyen bir iş aslında. Bunun belli başlı sorunlarından biri de class ismi üretmektir. Temiz kod yazarak ilerlemek istiyorsak CSS yazarken uymamız gereken bazı metodolojiler vardır. Yoksa proje büyüdüğünde içinden çıkılmaz bir hal alabilir.
Next.js’in bunun için getirdiği çözüm ise “Built-in CSS!” Şimdi bu özelliği size şöyle anlatayım: Genelde ne yaparız, bir CSS dosyası açarız ve her şeyi yazmaya başlarız oraya, değil mi? Bu özellik ile proje boyunca oluşturduğumuz her component için ayrı bir CSS dosyası açmamız gerekecek. Örnek vermek gerekirse, bir tane Button componentimiz olsun, bir tane de Input componentimiz olsun. Bu durumda biz button.module.css ve input.module.css adından iki CSS dosyası oluşturduğumuzu varsayalım. Bunların her ikisinin içine de “background” adında bir class tanımlamış olalım. Button için bu class mavi rengini verirken Input için bu class açık gri rengini versin. Bu kodları biz component seviyesinde yazdığımız için class isimleri aynı olması rağmen aynı sayfada kullansak bile bu isimler çakışmayacaktır. Çünkü proje build edilirken bunlarında sonuna benzersiz karakterler eklenecektir. Button için background__2fXKN ve Input için de background__RWrgT gibi bir şey olabilir. Bu kısmını da Next.js yöneterek size bayağı kolaylık sağlamış olacaktır.
Kod Bölme ve Paketleme
Bu işlem aslında bir optimizasyon ve yönetim işlemidir. Hemen bir üst maddedeki örnekten gidelim ve size bu özelliği şöyle açıklayayım: 30 tane component olduğunu düşünelim. Bunların kodları ayrı dosya ve CSS kodları da ayrı bir dosya şeklinde olacak. Ben gidip Button componentine Input componentinin CSS dosyasını dahil etmediğim için o sayfada Button kullanırken Input kullanmadıysam eğer o sayfaya Input componentinin CSS kodları dahil edilmeyecektir. Bu özellik gereksiz CSS kodlarını sayfaya yüklemediği için site aslında optimize edilmiş olacaktır. O zaman şunu sorabilirsiniz: Peki 100 tane componentimiz olsa 100 tane CSS dosyasını ayrı ayrı mı çekecek site, bu yavaşlığa sebep olmaz mı? Güzel yakaladınız ancak hayır, öyle olamayacak. Bu özellik aynı zaman paketlemeye de müdahale ettiği için birkaç farklı şekilde CSS dosyaları olsun componentin kendi dosyaları olsun, bunları paketliyor. Kendi içerisinde kullandığı bir algoritmaya göre de size öyle sunuyor.
Next.js Nasıl Kullanılır?
Öncelikle bilgisayarında bir sunucu ortamı olması lazım. Sunucu ortamlarına örnek verirsek Linux, Windows, Apache, Node diyebiliriz. Gelgelelim bizim kullacağımız ise Node.js olacaktır. Node.js’i https://nodejs.org/ adresinden indirip yükleyebilirsiniz. Daha sonra https://nextjs.org/ adresinde güzel bir dökümanı mevcuttur. Basit bir kurulum için bir proje klasörü oluşturup bunu VSCode veya başka bir editör ya da IDE ile açıp terminale şu komutu yazabiliriz:
npx create-next-app@latest .
Yukarı kod parçasında “.” bulunduğumuz dizine kur demektir aslında. Kurulumu yaptıktan sonra “npm run dev” komutu ile çalıştırabilirsiniz.
Next.js önyüzde kullanıp backend için WordPress kurulumu bile yapabilirsiniz. Böylece bir yönetim paneliniz olur ve WordPress API kullanarak sitenizi çok kolay bir şekilde yönetebilirsiniz. WordPress nedir? Sorusunun yanıtını merak ediyorsanız ilgili yazımızı okuyabilirsiniz.
