Next.js, React uygulamanızda birçok optimizasyon gerçekleştirir. Böylece sizin yerinize
Next.js, yerleşik bir dizi performans optimizasyonuna sahip, kendi görüşüne göre hareket eden 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ş 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 bu özellikler daha ayrıntılı olarak ele alınmaktadır.
Neler öğreneceksiniz?
Next.js varsayılan olarak çeşitli performans optimizasyonları sunsa 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 kullanılabilecek 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üzü 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 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ı 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. 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 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önlendirmesi
- 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'i tıklayın.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a
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 ayrıca diğer React uygulamaları gibi oluşturulup kullanılabilir. components/ dizini, index.js'ye zaten içe 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. 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.
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:
- Sayfa gezinmelerini hızlandırmak için rota ön yükleme
- Arama motorlarından daha hızlı yükleme için karma ve yalnızca AMP sayfaları yayınlama
- JavaScript ayak izlerini azaltmak için dinamik içe aktarmayla kod bölme bileşenleri