Next.js ile varsayılan performans

Next.js, React uygulamanızda birçok optimizasyon gerçekleştirir. Böylece sizin yapmanıza gerek kalmaz.

Houssein Djirdeh
Houssein Djirdeh
X GitHub Ana sayfa

Next.js, çeşitli performans optimizasyonları içeren, kuralcı bir React çerçevesidir. Çerçevenin temel amacı, bu özellikleri varsayılan olarak dahil ederek uygulamaların mümkün olduğunca yüksek performansla başlamasını ve çalışmasını sağlamaktır.

Bu giriş bölümünde, çerçevenin sunduğu birçok özellik genel hatlarıyla kısaca ele alınacaktır. Bu koleksiyondaki diğer kılavuzlarda özellikler daha ayrıntılı olarak ele alınacaktır.

Neler öğreneceksiniz?

Next.js varsayılan olarak çeşitli performans optimizasyonları sunsa da bu kılavuzlarda, optimizasyonlar daha ayrıntılı bir şekilde açıklanmakta ve hızlı ve performanslı bir deneyim oluşturmak için bunları nasıl kullanabileceğiniz gösterilmektedir.

Genel olarak React sitelerine eklenebilecek ve Next.js ile oluşturulan uygulamalarda da işe yarayacak birçok optimizasyon vardır. Next.js'nin sunduğu özelliklere odaklandığımız için bunlara değinmeyeceğiz. Genel React optimizasyonları hakkında daha fazla bilgi edinmek için React koleksiyonumuza göz atın.

Next.js'nin React'ten farkı nedir?

React, bileşen tabanlı bir yaklaşım kullanarak kullanıcı arayüzleri oluşturmayı kolaylaştıran bir kitaplıktır. React güçlü bir araç olsa da özellikle bir kullanıcı arayüzü kitaplığıdır. Birçok geliştirici, eksiksiz bir derleme araç zincirine sahip olmak için modül paketleyici (ör. webpack) ve programlama dili çeviricisi (ör. Babel) gibi ek araçlar kullanır.

React koleksiyonunda, React uygulamalarını hızlıca oluşturmak için Create React App (CRA) yaklaşımını kullandık. CRA, tek bir komutla eksiksiz bir derleme araç zinciri sağlayarak React uygulaması oluşturma zahmetini ortadan kaldırır.

CRA'da birkaç varsayılan optimizasyon olsa da araç, basit ve kolay bir kurulum sağlamayı amaçlar. Geliştiriciler, yapılandırmaları kendileri çıkarıp değiştirmeye karar verebilir.

Yeni bir React uygulaması oluşturmak için de kullanılabilen Next.js, farklı bir yaklaşım benimser. Birçok geliştiricinin kullanmak istediği ancak ayarlamakta zorlandığı, aşağıdakiler gibi yaygın optimizasyonları hemen sağlar:

  • Sunucu tarafı oluşturma
  • Otomatik kod bölme
  • Rota önceden getirme
  • Dosya sistemi yönlendirmesi
  • CSS-in-JS stili (styled-jsx)

Ayarlama

Yeni bir Next.js uygulaması oluşturmak için aşağıdaki komutu çalıştırın:

npx create-next-app new-app

Ardından dizine gidin ve geliştirme sunucusunu başlatın:

cd new-app
npm run dev

Aşağıdaki yerleştirmede, yeni bir Next.js uygulamasının dizin yapısı gösterilmektedir.

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiksle'yi tıklayın.
  • Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından Tam Ekran'a tam ekran basın.

pages/ dizininin tek bir dosyayla (index.jsx) oluşturulduğuna dikkat edin. Next.js, bu dizindeki her sayfanın ayrı bir rota olarak sunulduğu bir dosya sistemi yönlendirme yaklaşımı izler. Bu dizinde yeni bir dosya (ör. about.js) oluşturduğunuzda otomatik olarak yeni bir rota (/about) oluşturulur.

Bileşenler, diğer React uygulamaları gibi oluşturulup kullanılabilir. components/ dizini, index.js dizinine zaten aktarılmış olan tek bir bileşenle (nav.js) oluşturulmuştur. Varsayılan olarak, Next.js'de kullanılan her içe aktarma işlemi yalnızca ilgili sayfa yüklendiğinde getirilir. Bu sayede otomatik kod bölme avantajlarından yararlanabilirsiniz.

Ayrıca, Next.js'deki her ilk sayfa yüklemesi sunucu tarafında oluşturulur. Geliştirici Araçları'nda Ağ panelini açarsanız belge için ilk isteğin tamamen sunucu tarafından oluşturulmuş bir sayfa döndürdüğünü görebilirsiniz.

Ağ panelinin Önizleme sekmesi, bir sayfa istendiğinde Next.js'nin görsel olarak eksiksiz HTML döndürdüğünü gösterir.
Ağ panelinin Önizleme sekmesi, bir sayfa istendiğinde Next.js'nin görsel olarak eksiksiz HTML döndürdüğünü gösterir.

Bunlar, Next.js'nin otomatik olarak sağladığı birçok özellikten yalnızca birkaçıdır. Birçoğu özelleştirilebilir ve farklı kullanım alanları için değiştirilebilir.

Sırada ne var?

Kelime oyunu yapılmıştır. 😛

Bu koleksiyondaki diğer tüm kılavuzlarda belirli bir Next.js özelliği ayrıntılı olarak incelenir: