Next.js ile varsayılan performans

Next.js, React uygulamanızda birçok optimizasyon işlemlerini gerçekleştirir. Böylece,

Houssein Djirdeh

Next.js, bir dizi performans optimizasyonunun eklendiği ayrıntılı bir React çerçevesidir. Bu çerçevenin arkasındaki ana fikir, varsayılan olarak bu özellikleri ekleyerek uygulamaların başlamasını ve mümkün olduğunca yüksek performans göstermesini sağlamaktır.

Bu giriş bölümünde, çerçeve tarafından sağlanan birçok özellik kısaca ele alınacaktır. Bu koleksiyondaki diğer rehberler, özellikleri daha ayrıntılı bir şekilde inceleyecektir.

Neler öğreneceksiniz?

Next.js varsayılan olarak bir dizi performans optimizasyonu sağlar. Ancak bu kılavuzlar, bunları daha ayrıntılı olarak açıklamayı ve hızlı ve yüksek performanslı bir deneyim oluşturmak için bunları nasıl kullanabileceğinizi göstermeyi amaçlar.

Genel olarak React sitelerine eklenebilecek, Next.js ile oluşturulan uygulamalarda da işe yarayacak birçok optimizasyon vardır. Odak noktası Next.js'nin özel olarak sağladığı olduğundan bunlara değinilmeyecek. 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ü 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 (örneğin webpack) ve bir aktarıcı (örneğin Babel) gibi ek araçlar sunar.

React koleksiyonunda, React uygulamalarını hızlı bir şekilde kullanıma sunmak için Create React App (CRA) uygulamasını kullanma yaklaşımını benimsedik. CRA, tek bir komutla eksiksiz bir derleme araç zinciri sağlayarak React uygulamasını kurma işini kolaylaştırır.

CRA'da yer alan birkaç varsayılan optimizasyon mevcut olsa da aracın amacı, basit ve anlaşılır bir kurulum sunmaktır. Bu seçenek, yapılandırmaları çıkarıp değiştirmeyeceklerine ve bunları değiştirip değiştirmeyeceklerine karar vermeleri için geliştiricilere sunulur.

Yeni bir React uygulaması oluşturmak için de kullanılabilen Next.js farklı bir yaklaşım kullanır. Birçok geliştiricinin yapmak istediği ancak ayarlanmasında zorlandığı birtakım yaygın optimizasyonları hemen sağlar. Örneğin:

  • Sunucu tarafında oluşturma
  • Otomatik kod bölme
  • Rota önceden getirme
  • Dosya sistemini yönlendirme
  • JS içinde CSS 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ştirilmiş öğede, yeni bir Next.js uygulamasının dizin yapısı gösterilmektedir.

  • Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
  • Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran basın.

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

Bileşenler, diğer herhangi bir React uygulaması gibi oluşturulabilir ve kullanılabilir. index.js konumuna aktarılmış olan nav.js bileşeniyle zaten bir components/ dizini oluşturulmuş. Varsayılan olarak, Next.js'de kullanılan her içe aktarma yalnızca bu sayfa yüklendiğinde getirilir. Bu da otomatik kod bölmenin avantajlarından yararlanır.

Ayrıca, Next.js'deki her ilk sayfa yükleme işlemi sunucu tarafında oluşturulur. Geliştirici Araçları'nda Ağ panelini açarsanız belgeye ilişkin 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 tamamlanmış HTML kodunu döndürdüğünü gösterir.

Bunlar, Next.js tarafından otomatik olarak sağlanan birçok özellikten yalnızca birkaçıdır. Birçoğu özelleştirilebilir ve farklı kullanım alanlarına göre değiştirilebilir.

Sonraki adım

Pun vermeyi amaçladı 😛

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