Blog – Next.js 10.2 | Next.js

0
43

Aşağıdakileri içeren Next.js 10.2’yi tanıtmaktan heyecan duyuyoruz:

Npm i next @ latest’ı çalıştırarak bugün güncelleyin.

Next.js 10.1 ile Hızlı Yenileme’yi geliştirdik ve kurulum sürelerini azalttık. Web paketi 5 aracılığıyla sağlanan ek performans iyileştirmelerini paylaşmaktan heyecan duyuyoruz.

Bugün, webpack 5’in sunumunu Next.js uygulamalarına genişletiyoruz. Next.js 10.2’den başlayarak, next.config.js’de özel bir web paketi yapılandırması kullanmayan tüm uygulamalar otomatik olarak web paketi 5’i kullanacaktır.

Web paketi 5 etkinleştirildiğinde, aşağıdakiler gibi yeni özellikleri ve iyileştirmeleri otomatik olarak alırsınız:

Geliştirilmiş Disk Önbelleğe Alma: Disk önbelleğe alma, derleyicinin sonraki derleme çalıştırmaları arasında çalışmayı sürdürmesine olanak tanır. Yalnızca değiştirilen dosyalar yeniden derlenecek ve bu da performansın artmasına neden olacaktır. Vercel müşteri Ölçeği, sonraki derlemelerde% 63’lük bir hızlanma gözlemledi.Geliştirilmiş Hızlı Yenileme: Next.js artık Hızlı Yenileme ile ilgili derlemeye öncelik veriyor ve her seferinde 100 ms ile 200 ms arasında daha hızlı yenileme sağlıyor. artık belirleyicidir ve üretimdeki JavaScript varlıklarının tarayıcı önbelleğe alınmasını iyileştirir. Bir sayfanın içeriği değişmediğinde karmalar aynı tutulur.Geliştirilmiş Ağaç Sallama: CommonJS modülleri artık kullanılmayan kodu otomatik olarak kaldırmak için ağaç sarsılabilir. Statik analiz, yan etkisiz modülleri belirlemek için kullanılır. dışa aktar * daha fazla bilgiyi izler ve artık varsayılan dışa aktarmayı kullanıldığı şekliyle işaretlemez. İç modül ağacını sallama özelliği de etkinleştirilerek, yalnızca kullanılmayan bir dışa aktarmada kullanılan ithalatların ağaç sarsılmasına izin verir.

Web paketi 4’ten 5’e sorunsuz bir geçiş sağlamak için çok çalıştık. 3.400’ün üzerinde entegrasyon testi içeren Next.js çekirdek test paketi, web paketi 5 desteği etkinken her çekme isteğinde çalışır.

Uygulamanızın özel bir web paketi yapılandırması varsa, webpack 5’i etkinleştirmek için belgeleri takip etmenizi öneririz. Next.js’de webpack 5’e yükselttikten sonra, lütfen herhangi bir geri bildiriminizi bizimle paylaşın.

Sonraki geliştirme için önyükleme süresini ilk çalıştırmadan sonra% 24’e kadar daha hızlı hale getiren Next.js CLI başlatmayı iyileştirdik. Örneğin, vercel.com için bir sonraki geliştirici 3,3 saniyeden 2,5 saniyeye çıktı.

Yerel geliştirme deneyiminizi gerçek zamanlı (20 kat daha hızlı) yapma görevindeyiz. Gelecek sürümlerde ek başlangıç ​​performansı iyileştirmeleri için bizi izlemeye devam edin.

Rota değişiklikleri artık varsayılan olarak ekran okuyuculara ve diğer yardımcı teknolojilere duyurulmaktadır.

Aşağıdaki örnek, istemci tarafında gezinmede macOS VoiceOver tarafından duyurulan “Gerçek Veri. Gerçek Performans” başlığını göstermektedir. Sayfa adı, önce bir arama yapılarak bulunur.

öğesi, document.title’a ve son olarak da yol adına döner.

Rota değişiklikleri artık otomatik olarak duyurulmaktadır.

Bu özelliği kazanmalarına yardımcı oldukları için Kyle Boss ve Kitty Giraudel’e teşekkür ederiz.

Next.js yeniden yazar, yönlendirmeler ve üstbilgiler artık gelen üstbilgiler, tanımlama bilgileri ve sorgu dizeleriyle eşleştirmenize olanak tanıyan yeni bir has özelliğini desteklemektedir.

Joyn’ın kullandığı Vercel müşterisi, içeriği hem keşfedilebilirlik hem de performans açısından optimize etmek zorundadır. Örneğin, eski tarayıcıları User-Agent’a göre yeniden yönlendirebilirsiniz:

module.exports = {eşzamansız yeniden yönlendirmeler () {dönüş [
{
source: ‘/:path*’,
has: [
{
type: ‘header’,
key: ‘User-Agent’,
value:
‘Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)’
}
], hedef: ‘/ eski tarayıcı’, kalıcı: yanlış}]}}

Başka bir örnek, kullanıcıları konumlarına göre yeniden yönlendirmek olabilir:

module.exports = {eşzamansız yeniden yönlendirmeler () {dönüş [
{
source: ‘/:path*’,
has: [
{
type: ‘header’,
key: ‘x-vercel-ip-country’,
value: ‘GB’
}
], hedef: ‘/: yol * / uk’, kalıcı: doğru}]}}

Son olarak, bir kullanıcı zaten oturum açmışsa yeniden yönlendirebilirsiniz:

module.exports = {eşzamansız yeniden yönlendirmeler () {dönüş [
{
source: ‘/:path*’,
has: [
{
type: ‘header’,
key: ‘x-authorized’,
value: ‘(?yes|true)’
}
], hedef: ‘/ dashboard? yetkili =: yetkili’, kalıcı: false}]}}

Daha fazla bilgi edinmek ve ek örnekleri keşfetmek için yeniden yönlendirme belgelerine bakın.

Masaüstü için web sayfalarının% 82’si web yazı tiplerini kullanır. Özel yazı tipleri, sitenizin marka bilinci oluşturma, tasarım ve çapraz tarayıcı / cihaz tutarlılığı açısından önemlidir. Ancak, bir web fontu kullanmak performans pahasına olmamalıdır.

Next.js artık web yazı tiplerini kullanırken Otomatik Web Yazı Tipi Optimizasyonunu destekliyor. Varsayılan olarak, Next.js, derleme sırasında yazı tipi CSS’sini otomatik olarak satır içi yaparak yazı tipi bildirimlerini almak için fazladan bir gidiş-dönüşü ortadan kaldırır. Bu, İlk Zengin İçerikli Boya (FCP) ve En Büyük İçerikli Boya (LCP) için iyileştirmelerle sonuçlanır. Örneğin:


Otomatik Web Yazı Tipi Optimizasyonu şu anda Google Yazı Tiplerini desteklemektedir ve desteği diğer yazı tipi sağlayıcılarına daha da genişletmek için çalışıyoruz. Ayrıca yükleme stratejileri ve yazı tipi görüntüleme değerleri üzerinde kontrol eklemeyi planlıyoruz. Yazı tiplerini varsayılan olarak optimize ederek, geliştiricilerin daha hızlı web siteleri göndermelerine ve herhangi bir ek çaba harcamadan Temel Web Vitalslerini iyileştirmelerine yardımcı olabiliriz.

Google’daki ortaklarımıza ve Janicklas Ralph’e bu özelliğin uygulanmasına yardımcı oldukları için teşekkür ederiz.

Webpack’in yazarı Tobias Koppers’ın Vercel’deki Next.js ekibine katıldığını duyurmaktan heyecan duyuyoruz.

Bu sürümün şekillenmesine yardımcı olan tüm dış geri bildirimler ve katkılar dahil olmak üzere topluluğumuza minnettarız.

Bu sürüm size @rpxs, @lemarier, @RayhanADev, @ janicklas-ralph, @devknoll, @felipeptcho, @rishabhpoddar, @sokra, @ m-leon, @turadg, @PierreBerger, @divmain katkılarıyla sağlanmıştır. , @dominikwilkowski, @ pranavp10, @ijjk, @santidalmasso, @HaNdTriX, @ jamesgeorge007, @garmeeh, @leerob, @shuding, @feute, @timneutkens, @alexvilchis, @Timer, @malixsys, @ sahilvangput03, @ steven-tey, @julienben, @umarsenpai, @Mzaien, @merceyz, @AntelaBrais, @SystemDisc, @ M1ck0, @jbmoelker, @jaisharx, @amannn, @ vkarpov15, @gaelhameon, @ 4ortytwo, @ Simply, @styxlab xCloudzx, @wodCZ, @emmanuelgautier, @leosuncin, @ludder, @geritol, @vassbence, @vvo, @portenez, @arshad, @tarunama, @flybayer, @Hanaffi, @SokratisVidros, @chibicode, @ kylemwallts18, ve @jarrod .

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz