Next.js ile varsayılan performans

Next.js, React uygulamanızdaki birçok optimizasyonu sizin yerinize yapar.

Houssein Djirdeh

Next.js, yerleşik bir dizi performans optimizasyonuna sahip, belirli bir bakış açısına sahip bir React çerçevesidir. Çerçevenin temel fikri, bu özelliklerin varsayılan olarak dahil edilmesiyle uygulamaların mümkün olduğunca hızlı bir şekilde başlatılmasını ve performansını korumasını sağlamaktır.

Bu girişte, çerçevenin sunduğu birçok özellik yüksek düzeyde kısaca ele alınacaktır. Bu koleksiyondaki diğer kılavuzlarda bu özellikler daha ayrıntılı olarak ele alınmaktadır.

Neler öğreneceksiniz?

Next.js varsayılan olarak bir dizi performans optimizasyonu sağlasa da bu kılavuzların amacı, bu optimizasyonları daha ayrıntılı bir şekilde açıklamak ve hızlı ve performanslı bir deneyim oluşturmak için nasıl kullanabileceğinizi göstermektir.

Genel olarak React sitelerine eklenebilecek ve Next.js ile oluşturulan uygulamalarda da işe yarayacak birçok optimizasyon vardır. Odak noktası Next.js'in sunduğu özelliklere olduğundan bunlar ele alınmayacaktır. Genel React optimizasyonları hakkında daha fazla bilgi edinmek için React koleksiyonumuza göz atın.

Next.js'in 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. Güçlü olsa da React özellikle bir kullanıcı arayüzü kitaplığıdır. Birçok geliştirici, eksiksiz bir derleme araç zincirine sahip olmak için modül birleyici (ör. webpack) ve derleyici (ör. Babel) gibi ek araçlar ekler.

React koleksiyonunda, React uygulamalarını hızlı bir şekilde oluşturmak için Create React App (CRA) yaklaşımını benimsedik. CRA, tek bir komutla eksiksiz bir derleme araç zinciri sağlayarak React uygulaması oluşturma sürecinin zorluklarını ortadan kaldırır.

CRA'da birkaç varsayılan optimizasyon olsa da araç, basit ve anlaşılır bir kurulum sunmayı amaçlar. Geliştiriciler, yapılandırmaları çıkarma ve değiştirme konusunda kendi kararlarını verebilir.

Yeni bir React uygulaması oluşturmak için de kullanılabilen Next.js farklı bir yaklaşım benimser. Bu özellik, birçok geliştiricinin kullanmak istediği ancak ayarlaması zor olan bazı optimizasyonları hemen sağlar. Örneğin:

  • Sunucu tarafı oluşturma
  • Otomatik kod bölme
  • Rota ön getirme
  • Dosya sistemi yönlendirme
  • JS'de 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şimde, yeni bir Next.js uygulamasının dizin yapısı gösterilmektedir.

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
  • Siteyi önizlemek için Uygulamayı Görüntüle'ye, 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ını izler. Bu dizinde about.js gibi yeni bir dosya 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'ye zaten aktarılmış olan tek bir bileşen (nav.js) ile oluşturulmuştur. Next.js'de kullanılan her içe aktarma varsayılan olarak 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. DevTools'ta Ağ panelini açarsanız doküman 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'in görsel olarak eksiksiz HTML döndürdüğünü gösterir.
Ağ panelinin Önizleme sekmesi, bir sayfa istendiğinde Next.js'in görsel olarak eksiksiz HTML döndürdüğünü gösterir.

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

Sırada ne var?

Kelime oyunu amaçlanmıştır 😛

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