Next.js'in yeni özelliği olan Server Actions'ı kullanarak çerez tabanlı durumsuz bir oturum uygulaması yapma ve Server Actions'ın avantajlarını deneyimleme.
Büyük beğeni toplayan App Router sürümünün ardından Next.js, başka bir özellik olan Server Actions ile karşımıza çıkıyor. Bu yeni yenilik, sunucu tarafında veri manipülasyonlarını kolaylaştırıyor, istemci tarafı JavaScript'e olan bağımlılığı azaltıyor ve formları aşamalı olarak geliştiriyor. Tüm bunlar, geleneksel REST API'lerine ihtiyaç duymadan JavaScript ve React kullanarak sağlam web uygulamaları oluşturmanıza olanak tanıyor.
Bu makalede, bu yeniliğin sunduğu avantajlardan yararlanarak, Next.js için çerez tabanlı durumsuz oturum uygulayacağız. Bu yazı, App Router kullanarak bir demo projesi oluşturmanın her aşamasını adım adım anlatan bir rehber niteliğindedir.
Pratik gösterimimiz, Edge Runtime kullanarak Vercel'e kolayca dağıtılabilir. Tam kaynak kodunu GitHub üzerinden indirebilirsiniz.
Geleneksel olarak, eğer bir Next.js web uygulaması yapıp arka planda veritabanına sorgular göndermek istiyorsak, bazı REST API'ler oluşturup kimlik doğrulama durumunu doğrular ve veritabanını sorgularız, ardından ön uç React uygulaması bu API'leri çağırır. Ancak, eğer API'yi halka açma gereği yoksa ve bu React uygulaması tek istemci ise, API'leri sadece kendimiz çağıracağımızdan, REST API'leri kullanmak gereksiz görünebilir.
Server Actions ile birlikte, React bileşeni artık sunucu tarafı kod çalıştırabilir. Elle bir API uç noktası oluşturmak zorunda kalmadan, Server Actions, Next.js'in arka planda kullanması için otomatik olarak bir uç nokta oluşturur. Bir Server Action çağırıldığında, Next.js, üzerinde bulunduğunuz sayfaya çalıştırılacak olan eylemin meta verileriyle bir POST isteği gönderir.
Durumsuz uygulamalar oluşturmak için tercih edilen bir framework olan Next.js genellikle sunucusuzluğu ifade eder, bu durumda oturum verilerini depolamak için belleği kullanamayız. Geleneksel oturumlar, Redis veya bir veritabanı gibi harici bir depolama hizmetinin kullanılmasını gerektirir.
Ancak, oturum verileri yeterince küçük kaldığında, güvenli şifreleme yöntemleri ve istemci tarafında saklanan çerezleri kullanarak durumsuz bir oturum geliştirmek gibi alternatif bir yola sahibiz. Bu yöntem, harici depolama gereksinimini ortadan kaldırır ve oturum verilerini merkezi olmayan bir şekilde tutarak sunucu yükü ve genel uygulama performansı açısından önemli faydalar sağlar.
Hedefimiz, istemci tarafı saklama kapasitesinden yararlanırken iyi yürütülen bir şifreleme yoluyla güvenliği sağlayan, hafif ve etkili bir durumsuz oturum yaratmaktır.
İlk olarak, yeni bir proje başlatmamız gerekiyor:
Kurulum hakkında daha fazla ayrıntı için resmi kılavuza başvurabilirsiniz.
Server Actions'ın anlaşılmasını kolaylaştırmak için önce oturumun basit bir versiyonunu oluşturacağız. Bu versiyonda, oturum verilerini çerezlerde saklamak için JSON'u kullanacağız.
session/index.ts adında bir dosya oluşturun ve aşağıdaki kodu ekleyin:
İlk satırdaki "use server" bu dosyanın işlevlerini Server Actions olarak işaretler.
request ve response'a doğrudan erişemediğimiz için çerezleri okumak ve yazmak için next/headers kullanıyoruz. Bu yalnızca Server Actions'da kullanılabilir.
Oturum kütüphanesi hazır olduğuna göre, oturumun kullanılabilirliğini göstermek için bir oturum açma ve oturum kapatma özelliği uygulama zamanı.
user/index.ts dosyasına aşağıdaki kodu ekleyin:
Burada, sadece bir kullanıcı adının gerekli olduğu 'sahte' bir oturum açma süreci kullanıyoruz.
App Router'da sayfa genellikle asenkron bir bileşendir ve Server Actions bir bileşenden doğrudan çağrılamaz. `"use client"`` kullanarak bileşenler oluşturmamız gerekiyor:
components/sign-in.tsx
components/sign-out.tsx
Son olarak, app/page.tsx dosyamızı oluşturalım
Server Actions işini yaptı. Şimdi son kısım crypto ile gerçekleştirilebilecek şifreleme uygulamasını içeriyor.
Sonrasında, oturum kütüphanesini aşağıdaki şekilde değiştirmemiz gerekiyor:
Tebrikler! Next.js için durumsuz bir oturumu başarıyla uyguladınız. Bir Vercel üzerinde çevrimiçi önizleme burada ve tam kaynak kodunu indirmek için buraya tıklayabilirsiniz. Bu rehberin yeni Server Actions'ı anlamanıza yardımcı olduğunu umuyoruz.
Bir sonraki aşamada, Server Actions kullanarak Next.js için Logto'yu entegre etmeyi keşfedeceğiz. Takipte kalın!