Logto SDK Örneğinin Next.js 13 Uygulama Yönlendiricisine Göç Etme Yolculuğumuz

Giriş#

Logto'da, geleneksel "sayfalar" klasörünü kullanarak Logto'yu Next.js ile entegre etmeyi etkili bir şekilde gösteren bir örnek proje ile birlikte @logto/next adında bir Next.js SDK'si sunuyoruz. Bu proje, API rotaları, getServerSideProps, Client-side Fetching ve hatta edge runtime örneklerini sunar.

Next.js 13, bize çığır açan Uygulama Yönlendiricisi'ni (daha önce app directory olarak adlandırılmıştı) getirdi, yeni özellikler ve kurallar tanıtıldı ki bu hızlı bir şekilde geliştirici topluluğunda popüler hale geldi. Logto'nun Next.js SDK'si bu yeni özellikleri tam olarak desteklediği için, bu Uygulama Yönlendiricisini kullanarak yeni bir örnek proje oluşturmak için ilham aldık.

Bu gönderide, eski örnek projemizi Uygulama Yönlendiricisini kullanarak yeni birine taşımanın ayrıntılarını sizinle paylaşacağız. Proje, eski örnek projenin üzerine inşa edildi ve resmi göç rehberi'ni izledi. Süreç birkaç adımı içeriyordu: sayfalar ve düzenler oluşturma, API rotalarını taşıma ve sunucu ve istemci bileşenlerini kullanma.

Göç süreci#

Sayfa düzeni: Yeni bir yapı#

Orijinal ayarlarımızda, SWR alıcıyı kurmak için bir _app.tsx dosyası ve ana sayfa olarak hizmet veren bir index.tsx dosyası kullandık.

Uygulama Yönlendiricisi ile bunlar layout.tsx ve page.tsx olur. layout.tsx dosyası, çekirdek bilgileri içerirken, page.tsx eski index.tsx dosyasının işlevselliğini yansıtır.

İstemci bileşeni#

İlk adımda bir aksilik ortaya çıktı: buton için bir "onClick" işleyici ayarlamak başarısız oldu, bir hata mesajı, "Etkinlik işleyicileri İstemci Bileşeni özelliklerine geçirilemez. Etkileşim gerekiyorsa, bunun bir kısmını İstemci Bileşeni'ne dönüştürmeyi düşünün." dedi.

Bu sorunu çözmek için, sorunlu bölümü ayrı bir bileşene ayırdık ve dosyayı use client ile öne çıkardık:

API rotaları#

API rotalarını taşıma işlemi, /pages/api'den /app/api'ye birkaç düzeltmeyle önceki dosyaları aktarmak kadar basitti:

1. index.ts, route.ts olarak yeniden adlandırıldı.
2. Dışa aktarılan fonksiyon, GET veya başka bir uygun yöntem adına yeniden adlandırıldı.

Sunucu bileşeni#

api klasörü içinde, React Sunucu Bileşenlerinin veri almasına izin veren server-only fonksiyonlar ekleyebilme yeteneklerine sahibiz.

/app/api/logto/user dizininde bir get-user.tsx dosyası bulunmaktadır:

Bu fonksiyon daha sonra page.tsx'de çağrılabilir:

Sonuç#

Göçü tamamladıktan sonra, kodumuzun ve yapımızın önemli ölçüde daha düzgün ve sezgisel hale geldiğini gördük. Başlangıçta zor görünmesine rağmen, süreç hiç de ürkütücü değildi. Deneyimimizin, projelerinizi Uygulama Yönlendiricisine güvenle taşımanıza yardımcı olabilecek değerli bir rehber olarak hizmet edebileceğini umuyoruz.

Karşılaştırma için, göç öncesi ve sonrası projelerimize ait bağlantıları şu şekildedir:

Önce: https://github.com/logto-io/js/tree/master/packages/next-sample

Sonra: https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample

Bu projeleri inceleyerek, bu göç tarafından getirilen değişiklikler ve avantajları daha net bir şekilde anlayabilirsiniz.