Next.js ile varsayılan performans

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

Houssein Djirdeh

Next.js, çeşitli performans optimizasyonunun eklendiği, üzerine düşünülmüş bir React çerçevesidir. Çerçevenin ardında yatan ana fikir, uygulamaların bu özelliklerin varsayılan olarak dahil edilmesiyle 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 üst düzeyde sağlanan birçok özelliğe kısaca değineceğiz. Bu koleksiyondaki diğer kılavuzlarda, özellikler daha ayrıntılı olarak incelenecektir.

Neler öğreneceksiniz?

Next.js, varsayılan olarak çeşitli performans optimizasyonu sunsa da bu kılavuzların amacı, bunları daha ayrıntılı olarak açıklamak ve hızlı ve yüksek performanslı bir deneyim oluşturmak için bunları nasıl kullanabileceğinizi göstermektir.

Genel olarak React sitelerine eklenebilecek birçok optimizasyon vardır. Bunlar, Next.js ile oluşturulan uygulamalarda da işe yarar. Next.js'nin özellikle sağladığına odaklanacağından bunlar ele alınmayacaktır. Genel React optimizasyonları hakkında daha fazla bilgi için Tepki koleksiyonumuza göz atın.

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

React, bileşen tabanlı bir yaklaşım kullanarak kullanıcı arayüzü oluşturmayı kolaylaştıran bir kitaplıktır. React, güçlü olsa da özel olarak 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 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'i (CRA) kullanma yaklaşımını benimsedik. CRA, tek bir komutla eksiksiz bir derleme araç zinciri sağlayarak React uygulaması ayarlama zahmetini ortadan kaldırır.

CRA'da birkaç varsayılan optimizasyon olsa da araç, basit ve anlaşılır bir kurulum sunmayı amaçlar. Yapılandırmaları çıkarma ve değiştirme konusunda karar vermeleri için geliştiricilere verilir.

Yeni bir React uygulaması oluşturmak için de kullanılabilen Next.js, farklı bir yaklaşım uygular. Hemen birçok geliştiricinin sahip olmasını istediği ancak ayarlanması zor olduğu bir dizi yaygın optimizasyon sağlar. Örneğin:

  • 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ştirme işlemi, yeni bir Next.js uygulamasının dizin yapısını göstermektedir.

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

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

Bileşenler ayrıca diğer React uygulamaları gibi oluşturulup kullanılabilir. index.js hizmetine zaten aktarılmış olan nav.js adlı tek bileşenle bir components/ dizini zaten oluşturuldu. Varsayılan olarak, Next.js'de kullanılan her içe aktarma işlemi yalnızca söz konusu sayfa yüklendiğinde getirilerek otomatik kod bölme avantajı sağlar.

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 belgeyle ilgili 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.
Network (Ağ) panelinin Önizleme sekmesi, bir sayfa istendiğinde Next.js'nin görsel olarak tamamlanmış HTML'yi döndürdüğünü gösterir.

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

Sonraki adım

Pun hedeflendi 😛

Bu koleksiyondaki diğer tüm rehberler belirli bir Next.js özelliğini ayrıntılı olarak ele alır: