Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Next.js 13, uygulama dizinini kullanan yeni bir yönlendirme sistemini kullanıma sundu. Next.js 12, dosya tabanlı rotalar aracılığıyla yolları işlemenin kolay bir yolunu zaten sağlıyordu. Sayfalar klasörüne bir bileşen eklemek, onu otomatik olarak bir rota haline getirir. Bu yeni sürümde, dosya sistemi tabanlı yönlendirici, düzenler için yerleşik bir kurulum, iç içe yönlendirme şablonları, yükleme kullanıcı arabirimi, hata işleme ve sunucu bileşenleri ve akış desteği ile birlikte gelir.

Bu makalede, bu yeni özellikler ve bunların neden önemli olduğu açıklanmaktadır.

Next.js'ye Başlarken 13

Terminalde aşağıdaki komutu çalıştırarak kendi Next.js 13 projenizi oluşturun.

npx yaratmak-Sonraki-app@son sonraki13 --deneysel-uygulama

Bu, yeni uygulama dizini ile next13 adlı yeni bir klasör oluşturmalıdır.

Yeni Uygulama Dizinini Anlamak

instagram viewer

Next.js 12, sayfalar yönlendirme için dizin, ancak bununla değiştirilir uygulama/ Next.js'deki dizin 13. bu sayfalar/ dizini, artımlı benimsemeye izin vermek için Sonraki 13'te çalışmaya devam eder. Hata alacağınız için yalnızca aynı rota için iki dizinde dosya oluşturmadığınızdan emin olmanız gerekir.

İşte uygulama dizininin mevcut yapısı.

Uygulama dizininde, rotaları tanımlamak için klasörleri kullanırsınız ve bu klasörlerin içindeki dosyalar kullanıcı arayüzünü tanımlamak için kullanılır. Ayrıca aşağıdakiler gibi özel dosyalar da vardır:

  • sayfa.tsx - Belirli bir rota için kullanıcı arayüzünü oluşturmak için kullanılan dosya.
  • düzen.tsx - Rotanın düzen tanımını içerir ve birden çok sayfada paylaşılabilir. Gezinme menüleri ve kenar çubukları için mükemmeldirler. Gezinme sırasında düzenler durumu korur ve yeniden oluşturulmaz. Bu, bir düzeni paylaşan sayfalar arasında gezindiğinizde durumun aynı kalacağı anlamına gelir. Unutulmaması gereken bir nokta, uygulamanın tamamında paylaşılan tüm HTML ve gövde etiketlerini içeren en üstteki düzenin (kök düzen) olması gerektiğidir.
  • şablon.tsx - Şablonlar düzenler gibidir, ancak durumu korumazlar ve bir sayfa oluşturmak için her kullanıldıklarında yeniden oluşturulurlar. Şablonlar, bileşen her takıldığında çalıştırmak için belirli bir kodun gerekli olduğu durumlar için mükemmeldir, örneğin, giriş ve çıkış animasyonları.
  • hata.tsx - Bu dosya, uygulamadaki hataları işlemek için kullanılır. Bir rotayı React error border sınıfıyla sarar, öyle ki bu rotada veya alt öğelerinde bir hata oluştuğunda, kullanıcı dostu bir hata sayfası oluşturarak bu rotadan kurtulmaya çalışır.
  • yükleniyor.tsx - Rota kullanıcı arabirimi arka planda yüklenirken yükleme kullanıcı arabirimi sunucudan anında yüklenir. Yükleme kullanıcı arabirimi, bir döndürücü veya bir iskelet ekran olabilir. Rota içeriği yüklendikten sonra, yükleme kullanıcı arayüzünün yerini alır.
  • bulunamadı.tsx - Bulunamayan dosya, Next.js bir dosyayla karşılaştığında işlenir. Bu sayfa için 404 hatası. Next.js 12'de, manuel olarak bir 404 sayfası oluşturmanız ve ayarlamanız gerekir.
  • kafa.tsx - Bu dosya, tanımlandığı rota segmenti için head etiketini belirtir.

Next.js 13'te Rota Oluşturma

Daha önce bahsedildiği gibi rotalar klasörler kullanılarak oluşturulur. uygulama/ dizin. Bu klasörün içinde, adlı bir dosya oluşturmalısınız. sayfa.tsx bu, söz konusu rotanın kullanıcı arayüzünü tanımlar.

Örneğin, yolla bir rota oluşturmak için /products, oluşturmanız gerekecek uygulama/ürünler/sayfa.tsx dosya.

Gibi iç içe rotalar için /products/sale, klasör yapısı şöyle görünecek şekilde klasörleri birbirinin içine yerleştirin uygulama/ürünler/satış/sayfa.tsx.

Yönlendirmenin yeni bir yolunun yanı sıra, uygulama dizininin desteklediği diğer ilginç özellikler sunucu bileşenleri ve akıştır.

Uygulama Dizininde Sunucu Bileşenlerini Kullanma

Uygulama dizini, varsayılan olarak sunucu bileşenlerini kullanır. Bu yaklaşım, bileşen sunucuda işlenirken tarayıcıya gönderilen JavaScript miktarını azaltır. Bu, performansı artırır.

Bu makaleye bakın Next.js'de farklı işleme yöntemleri daha derin bir açıklama için.

Bir sunucu bileşeni, ortam sırlarına istemci tarafında açığa çıkmadan güvenli bir şekilde erişebileceğiniz anlamına gelir. Örneğin, kullanabilirsiniz süreç.env.

Ayrıca arka uçla doğrudan etkileşim kurabilirsiniz. Kullanmaya gerek yok getServerSideProps veya getStaticProps veri almak için sunucu bileşeninde async/await kullanabileceğiniz gibi.

Bir API'den veri alan bu zaman uyumsuz işlevi göz önünde bulundurun.

zaman uyumsuzişlevveri almak() {
denemek{
sabit res = beklemek gidip getirmek(' https://api.example.com/...');
geri dönmek res.json();
 } yakalamak(hata) {
fırlatmakyeniHata("Veriler getirilemedi")
 }
}

Doğrudan bir sayfada aşağıdaki gibi arayabilirsiniz:

ihracatvarsayılanzaman uyumsuzişlevSayfa() {
sabit veri = beklemek getData();
geri dönmek<div>div>;
}

Sunucu bileşenleri, etkileşimli olmayan içeriği işlemek için harikadır. Eğer ihtiyacın olursa React kancalarını kullan, olay dinleyicileri veya yalnızca tarayıcı API'leri, herhangi bir içe aktarma işleminden önce bileşenin en üstüne "use client" yönergesini ekleyerek bir istemci bileşeni kullanır.

Bileşenleri Uygulama Dizininde Artımlı Akış

Akış, tüm bileşenler işlenene kadar kullanıcı arabiriminin bazı bölümlerini istemciye aşamalı olarak göndermeyi ifade eder. Bu, kullanıcının geri kalanı oluşturulurken içeriğin bir kısmını görüntülemesine olanak tanır. Kullanıcılara daha iyi bir deneyim sunmak için, sunucu içeriğin işlenmesini tamamlayana kadar bir yükleme bileşenini döndürücü gibi işleyin. Bunu kullanarak iki şekilde yaparsınız:

  • Yaratmak yükleniyor.tsx rota segmentinin tamamı için işlenecek dosya. 
ihracatvarsayılanişlevYükleniyor() {
geri dönmek<P>Yükleniyor...P>
}
  • Tek tek bileşenleri React Suspense sınırıyla sarmalama ve bir yedek kullanıcı arabirimi belirleme. 
içe aktarmak { Gerilim } itibaren"tepki";
içe aktarmak { Ürünler } itibaren"./Bileşenler";
ihracatvarsayılanişlevSatış() {
geri dönmek (
<bölüm>
Ürünler...
}>
<Ürünler />
Gerilim>
bölüm>
 );
}

Ürünler bileşeni işlenmeden önce, kullanıcı "Ürünler..."i görecektir. Bu, kullanıcı deneyimi açısından boş bir ekrandan daha iyidir.

Next.js'ye Yükseltme 13

Yeni uygulama dizini kesinlikle önceki sayfalar dizininden bir gelişmedir. Manuel bir kuruluma ihtiyaç duymadan bir rota oluştururken farklı durumları işleyen düzen, başlık, şablon, hata, bulunamadı ve yükleme gibi özel dosyalar içerir.

Ek olarak, uygulama dizini aynı zamanda akış ve sunucu bileşenlerini de destekleyerek performansı artırır. Bu özellikler hem kullanıcılar hem de geliştiriciler için harika olsa da çoğu şu anda beta aşamasındadır.

Ancak, sayfa dizini hala çalıştığı için Next.js 13'e yükseltebilir ve ardından uygulama dizinini kendi hızınızda kullanmaya başlayabilirsiniz.