Next.js, sunucu tarafı oluşturma için bir React çerçevesidir, yaratıcılarının React uygulamaları için sıfır konfigürasyonlu tek komutlu bir araç zinciri olarak sunduğu.
Bu çerçeve kolayca bir React ön uç uygulaması oluşturmanıza olanak tanıyan ortak bir yapı sağlar ve sunucu tarafı oluşturmayı şeffaf bir şekilde yönetir. Next.js sürüm 9.3, yeni özellikler ve ana yenilik olarak statik siteler oluşturma yeteneğini bulabileceğimiz bazı iyileştirmelerle Pazartesi günü piyasaya sürüldü.
Next.js 9.3'teki yenilikler nelerdir?
Next.js 9.0 sürümüyle birlikte, çerçeve, statik otomatik optimizasyon kavramını tanıttı. Ne zaman bir sayfanın engelleme gereksinimleri yok getInitialProps gibi veri kurtarma, otomatik olarak HTML'de işlenecek bir kez inşa edildi.
Veri çıkarma gereksinimlerini engellemiş olsa bile, derleme sırasında statik HTML'de bir sayfa yapmak isteyebileceğiniz başka durumlar da vardır. Bu, örneğin pazarlama sayfalarının durumudur bir içerik yönetim sistemi (CMS) tarafından desteklenmektedir.
Next.js 9.3, iki yeni veri kurtarma yöntemi sunar: getStaticProps ve getServerSideProps.
Bu yeni yöntemler getInitialProps modeline göre birçok avantajları varSSG (Static Side Generation) ve SSR (Server Side Rendering) arasında net bir ayrım olduğu için. API eklemeleridir.
Tüm yeni özellikler geriye dönük uyumludur ve kademeli olarak benimsenebilir. Amortisman yoktur ve getInitialProps normal şekilde çalışmaya devam eder. Dinamik yönlendirme elde etmek için bir getStaticPaths parametresi eklendi.
- getStaticProps: inşaat sırasında veri elde edilmesini sağlar;
- getStaticPaths - Veriye dayalı dinamik yönlendirmeyi belirtin;
- getServerSideProps: her istek için veri almanızı sağlar.
Bu yeni sürümden öne çıkan bir diğer değişiklik, önizleme modu desteğidir. GetStaticProps ile tanışın Next.js'de yeni olasılıklar açar, Next.js oluşturma yeteneklerini belirli koşullar altında isteğe bağlı olarak kullanmak gibi.
Örnek bir taslağı önizlerken Bir CMS'de, statik oluşturmayı atlamak isteyeceksiniz ve taslak içerikle istek üzerine sayfa oluşturma yayınlanan içerik yerine. Next.js'nin yalnızca bu özel durumda statik derlemeyi atlamasını istiyorsunuz. Next.js ekibine göre, önizleme modu bunu yapmanıza izin veriyor.
Modu önizleme, kullanıcıların oluşturulan sayfayı atlamasına olanak tanır Statik olarak istek üzerine (SSR) bir taslak sayfa, örneğin bir CMS'den döndürmek için. Ancak, belirli CMS sistemleriyle sınırlı değildir. Önizleme modu, doğrudan getStaticProps ve getServerSideProps ile bütünleşir, böylece her tür veri kurtarma çözümü ile kullanılabilir.
Next.js 9.2, yerleşik CSS için destek ekledi, ancak Next.js 9.3, Sass için destek ekledi. Global stil sayfaları ve CSS modülleri ile gömülü CSS desteklenir. Next.js artık Sass dosyalarıyla CSS modüllerini destekliyor [ad] .module.scss dosya adlandırma kuralını kullanarak. Next.js 5+ ile next-sass'ta daha önce mevcut olan desteğin aksine, global Sass ve CSS modülleri artık bir arada var olabilir.
Modüller CSS, otomatik olarak benzersiz sınıf adları oluşturarak Sass'ı yerel olarak yönetmenize olanak tanır.
9.0 sürümüyle Next.js'den, HTML'de otomatik olarak oluşturulmayan bir sayfa vardı statik: 404 sayfası.
Bunun arkasındaki ana neden, 404'ü besleyen hata sayfasının 404'ten daha fazla işlenmiş olmasıdır. Örneğin, aynı zamanda hataları da ele almıştır. Varolmayan yollar için 404 sayfa oluşturulduğundan, Sayfayı isteğe bağlı olarak oluşturmak, daha yüksek maliyetlere ve daha fazla yüke neden olabilir sunucusu. Framework sürüm 9.3, işleri iyileştirir ve otomatik statik optimizasyon sunar 404 sayfa için.
Artık isteğiniz bir error.js özel sayfası içermediğinde, dosya Next.js otomatik olarak 404 sayfasını statik olarak oluşturur ve bir 404 sunulması gerektiğinde kullanır. Bu otomatik olarak gerçekleşir ve hiçbir değişiklik gerekmez.
Bu sayfayı da özelleştirebilirsiniz. Varsayılan 404 sayfasını değiştirmek için bir 404.js dosyası oluşturabilirsiniz.
Daha fazlasını öğrenmek istiyorsanız, danışabilirsiniz. aşağıdaki bağlantı.