İçeriğe geç
parazade
Yazılım & No-Code

Next.js Nedir?

Yayın: · Son güncelleme:

Next.js Nedir? Kısaca

Next.js, React üzerine kurulu, sunucu tarafı oluşturma (SSR), statik sayfa üretimi ve dosya tabanlı yönlendirme gibi özellikleri hazır sunan açık kaynaklı bir web çatısıdır. Vercel şirketi tarafından geliştirilir.

Next.js nedir?
İçindekiler
  1. Next.js nedir?
  2. Ne işe yarar?
  3. Nelere dikkat etmeli?

Next.js nedir?

Next.js, React ile web uygulaması geliştirmeyi kolaylaştıran açık kaynaklı bir çatıdır. React tek başına arayüz bileşenlerini üretir. Next.js ise yönlendirme, sayfaların sunucuda hazırlanması, görsel optimizasyonu ve API uç noktaları gibi eksik parçaları tamamlar.

Klasör yapısı yönlendirmeyi belirler. Örneğin app/blog/page.tsx dosyası oluşturduğunuzda site otomatik olarak /blog adresinde o sayfayı gösterir.

Ne işe yarar?

En büyük kazancı, sayfaların nasıl üretileceğini sayfa bazında seçebilmenizdir. Bir sayfa her istekte sunucuda oluşturulabilir (SSR), derleme sırasında bir kez statik olarak üretilebilir ya da tamamen tarayıcıda çizilebilir.

Bunun pratik etkisi hız ve arama motoru uyumudur. Örneğin 500 ürünlü bir e-ticaret sitesinde ürün sayfaları sunucuda hazır HTML olarak geldiği için hem ilk açılış hızlanır hem de arama motorları içeriği kolayca okur. Kullanıcı panelinde ise etkileşim ağırlıklı bölümler tarayıcıda çalışmaya devam eder.

Nelere dikkat etmeli?

Next.js'e geçmeden önce React'in bileşen, props ve hook kavramlarını oturtmuş olmak gerekir. Aksi hâlde hangi kodun sunucuda, hangisinin tarayıcıda çalıştığını ayırt etmek zorlaşır.

Sunucu bileşenleri ve istemci bileşenleri arasındaki ayrım, yeni başlayanların en sık takıldığı noktadır. Resmî "Learn Next.js" eğitimini adım adım tamamlamak ve küçük bir blog kurmak, bu ayrımı somut olarak görmenin iyi bir yoludur.

Sıkça Sorulan Sorular

Next.js ile React arasındaki fark nedir?

React arayüz bileşenleri üreten bir kütüphanedir. Next.js ise React'i kullanan, yönlendirme ve sunucu tarafı oluşturma gibi özellikleri ekleyen tam bir web çatısıdır.

Next.js SEO için neden tercih edilir?

Sayfaları sunucuda ya da derleme sırasında hazır HTML olarak üretebildiği için arama motorları içeriği JavaScript çalıştırmadan okuyabilir. Bu, tarama ve dizine eklemeyi kolaylaştırır.

İlgili terimler

React.jsReact.js, Meta (eski adıyla Facebook) tarafından geliştirilen, kullanıcı arayüzlerini yeniden kullanılabilir bileşenlerle kurmayı sağlayan açık kaynaklı bir JavaScript kütüphanesidir. Tek sayfa web uygulamalarında çok yaygındır.SSR(Server-Side Rendering)SSR (Server-Side Rendering), bir web sayfasının HTML içeriğinin her istekte sunucuda oluşturulup tarayıcıya hazır biçimde gönderilmesidir. Sayfanın ilk açılışını hızlandırır ve arama motorlarının içeriği kolayca okumasını sağlar.CSR(Client-Side Rendering)CSR (Client-Side Rendering), web sayfasının içeriğinin sunucu yerine kullanıcının tarayıcısında JavaScript ile oluşturulmasıdır. Tek sayfa uygulamalarında yaygındır ve sayfa geçişlerini hızlı hâle getirir.Statik Web Sitesi(Static Website)Statik web sitesi, sayfaları önceden hazırlanmış HTML, CSS ve JavaScript dosyalarından oluşan ve her ziyaretçiye aynı içeriği sunucuda yeniden üretmeden gönderen web sitesidir.Web Uygulaması(Web Application)Web uygulaması, kurulum gerektirmeden internet tarayıcısı üzerinden çalışan, kullanıcının veri girip işlem yapabildiği ve sunucu ile sürekli etkileşim kuran yazılımdır; online bankacılık ve e-posta servisleri bu türe örnektir.Arayüz(Interface)Arayüz (interface), nesne yönelimli programlamada bir sınıfın hangi metotları sağlaması gerektiğini tanımlayan, ancak bu metotların nasıl çalışacağını belirtmeyen sözleşmedir. Günlük dilde arayüz, kullanıcının yazılımla etkileşim kurduğu ekranı da ifade eder.Derleme(Compilation)Derleme (compilation), kaynak kodun bir derleyici tarafından makine koduna ya da ara koda çevrilerek çalıştırılabilir hâle getirilmesi işlemidir. Bu sırada sözdizimi ve tür hataları da denetlenir.