KodDefteri
TREN
Tüm yazılar

Next.js'i neden seçtik?

1 dk okumanext.jsreacttemel

React bir kütüphane, Next.js ise bir çatı (framework). Bu ayrım kulağa ders kitabı gibi geliyor ama pratikte çok somut bir şey ifade ediyor.

React tek başına ne yapar, ne yapmaz

React'in tek işi var: veriyi alıp ekrana arayüz basmak ve veri değiştiğinde ekranı güncellemek. Bunu çok iyi yapar. Ama bir web sitesi kurmak için gereken şu sorulara cevap vermez:

  • /blog/merhaba adresine girildiğinde hangi bileşen çalışacak?
  • Sayfanın HTML'i kullanıcının tarayıcısında mı yoksa sunucuda mı hazırlanacak?
  • Görseller nasıl optimize edilecek, yazı tipleri nasıl yüklenecek?
  • Kod nasıl paketlenip yayına çıkacak?

Bu soruların her birini kendi başınıza çözebilirsiniz. Next.js bunları sizin yerinize, birbiriyle uyumlu şekilde çözülmüş olarak verir.

Dosya tabanlı yönlendirme

Next.js'te bir sayfa açmak için ayar dosyasına satır eklemezsiniz; klasör açarsınız.

src/app/[locale]/page.tsx          ->  /tr
src/app/[locale]/about/page.tsx    ->  /tr/about
src/app/[locale]/blog/[slug]/page.tsx  ->  /tr/blog/merhaba

Köşeli parantez "burası değişken" demek. [slug] yazdığımızda /blog/ altındaki her adres aynı bileşene düşer, hangi yazının istendiğini parametre olarak alırız.

Sunucu bileşenleri

App Router'da bileşenler varsayılan olarak sunucuda çalışır. Bu blogda yazıları okuyan kod şöyle:

const posts = getPosts(locale); // dosya sisteminden okur

Bu satır tarayıcıda çalışamazdı — tarayıcının diskinizdeki Markdown dosyalarına erişimi yok. Sunucuda çalıştığı için sorun olmuyor ve daha önemlisi, bu kodun kendisi tarayıcıya hiç gönderilmiyor. Kullanıcı sadece sonucu, yani hazır HTML'i alıyor.

Bir bileşenin tarayıcıda çalışması gerektiğinde (fare hareketi dinlemek, tıklama yakalamak gibi) dosyanın en üstüne "use client" yazarız. Bu blogda dil değiştirici ve animasyonlu bileşenler böyle işaretli.

Kural şu: varsayılan sunucu, etkileşim gerekiyorsa istemci. Ne kadar az "use client", o kadar az JavaScript, o kadar hızlı site.

Statik üretim

generateStaticParams fonksiyonu Next.js'e "şu adreslerin HTML'ini şimdiden hazırla" der. Derleme bittiğinde elimizde her yazı için hazır bir HTML dosyası olur. Ziyaretçi geldiğinde sunucu hesap yapmaz, dosyayı gönderir. Veritabanı olmadığı için her şey bu kadar basit kalabiliyor.