Next.js Sunucu Eylemlerini Kullanma

Next.js'nin 13.4 sürümü, kararlı bir Uygulama yönlendiricisi ve sunucu eylemleriyle veri mutasyonu yapma yeteneği ile birlikte geldi. Bu özellik, tamamen sunucu bileşenlerinden veri mutasyonları gerçekleştirmenize izin verdiği için oyunun kurallarını tamamen değiştirir. Bu, hız, güvenlik ve uygulamanın genel performansı gibi alanlarda bir dizi avantaj sağlar.

Sunucu eylemlerinin ne olduğunu ve bu yeni özelliği Next.js uygulamanızda nasıl kullanacağınızı öğrenin.

Sunucu İşlemleri Nelerdir?

Sunucu işlemleri, sunucu bileşenlerinizin hemen yanında bir defaya mahsus sunucu tarafı işlevleri yazmanıza olanak tanır. Bu çok büyük çünkü artık formları gönderirken veya aşağıdakiler de dahil olmak üzere başka herhangi bir veri mutasyonu yaparken API rotaları yazmanıza gerek yok: GraphQL veri mutasyonları.

Sunucunuzda çalışan işlevlere sahip olabilirsiniz ve bunları istemci veya sunucu bileşenlerinden çağırabilirsiniz. Bu, Next.js 13.4'teki bir alfa özelliğidir ve React Actions üzerine kurulmuştur. Sunucu eylemlerini kullanmak, istemci tarafı JavaScript'in azalmasına yol açar ve aşamalı olarak geliştirilmiş formlar oluşturmanıza yardımcı olabilir.

Sunucu İşlemleri Örneği

Sunucu eylemleri ile, sunucu üzerinde Next.js içinde mutasyonlar gerçekleştirebilirsiniz. Bir gönderi oluşturmanıza olanak tanıyan bir form oluşturan örnek bir Next.js sayfasıyla bu yeni özelliğe bir göz atın.

İşte ithalatlar:

içe aktarmak Bağlantı itibaren"sonraki/bağlantı"
içe aktarmak Gruptan itibaren"@/bileşenler/FormGroup"
içe aktarmak { yeniden doğrulamaTag } itibaren"sonraki/önbellek"
içe aktarmak { yönlendirme } itibaren"sonraki/navigasyon"

Şimdi kodu gönderi oluşturmak için. Bu işlev bir sunucu eylemidir; sunucuda çalışır ve gönderi başlığını ve gövdesini API'ye gönderir (gönderiyi veritabanında oluşturur):

zaman uyumsuzişlevgönderi oluştur(veri) {
"sunucu kullan"
sabit başlık = veri.get("başlık")
sabit gövde = veri.get("vücut")
beklemek gidip getirmek(" http://127.0.0.1/posts", {
 başlık: {"İçerik türü": "uygulama/json"},
 yöntem: POST,
 vücut: JSON.stringify({başlık, gövde})
 })
 etiketi yeniden doğrulama("gönderiler")
 yönlendirme("/")
}

Bu işlev, daha sonra gönderdiği gönderi başlığını ve gövdesini alır. /posts POST isteği aracılığıyla uç nokta. Ardından, önbelleği "posts" etiketiyle ilişkili içeriği yenilemeye zorlar ve ana sayfaya geri yönlendirir.

İşte yeni gönderi başlığını ve gövdesini toplamak için bir form:

ihracatvarsayılan NewPostForm() {
geri dönmek (





"başlık">Başlık</label>
"metin" isim="başlık" kimlik="başlık" />
 </FormGroup>
 </div>




"başlık">Gövde</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Kaydet <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Formun, gönderinin oluşturulmasıyla ilgili bir mantık içermediğini, yalnızca bir form eylemi içerdiğini görebilirsiniz: <strong>createPost()</strong> işlevi. createPost işlevinin, içindeki her şeyin olduğunu bildiren "use server" yönergesine sahip olduğunu hatırlayın. işlev sunucuda çalışmalıdır.</p> <p>Tüm kod sunucuda çalışıyor ve müşteriniz hiçbir şey bilmiyor bu konuda. Bunun nedeni, formun bir sunucu bileşeni olması ve dinamik olarak işlenen hiçbir şeyin olmamasıdır. client.</p> <p><strong>Kaydet</strong> düğmesini tıkladığınızda, Next.js <strong>createPost()</strong>'u çağırır. işlev. Bu, başlığı ve gövdeyi form verileri olarak gönderir ve bilgileri kaydetmek için yerel API'ye gönderilir.</p> <h2 id="revalidating-the-post"> Gönderiyi Yeniden Doğrulama </h2> <p><strong>createPost()</strong> işlevinin altında şu kod satırı bulunur:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /kod> </code></pre> <p>Bu işlevin ne yaptığını anlamak için bir gönderi sayfanız olduğunu hayal edin. Gönderiler bileşeninin içinde, veritabanınızdaki tüm gönderileri almak ve bunları kullanıcının görmesi için oluşturmak üzere <strong>getPosts()</strong> adlı bir işlevi çağırırsınız:</p> <pre> <code><span>dışa aktarma</span> <span>varsayılan</span> <span>async</span> <span><span>işlev</span> <span>Gönderiler</span>() yayılma>{<br> <span>const</span> gönderiler = <span>bekliyor</span> getPosts()</span></code><p><code> <span>geri dön</span> (<br> <div>
<br> {posts.map(<span><span>post</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p><strong>getPosts()</strong> işlevi şöyle görünür:</p> <pre> <code><span>async</span> <span><span>işlev</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>bekliyor</span> getir(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> next: {<span>tags</span>: [<span>"posts"</span>], <span>revalidate</span>: <span>3600</span> }<br> })</code><p><code> <span>dönüş</span> res.json()<br>}<br></code> </p></pre> <p>Bu işlev, <strong>sonraki</strong> seçeneğini getirme işlemine geçirerek bir yeniden doğrulama dönemi belirlemenize olanak tanır. Varsayılan olarak, sunucu bileşeni içinde yaptığınız her getirme isteği sonsuza kadar önbelleğe alınır. Önbelleği takip etmek ve gerektiğinde yenilemek <span>içinde veri almanın önemli bir parçasıdır. Next.js</span>.</p> <p>Yukarıdaki kod, Next.js'e <strong>yayınları</strong> verileri bir saate kadar önbelleğe almasını söyler. (3.600 saniye). Bir saat sonra veriler eskir ve Next.js veritabanından en son verileri almak için verileri yeniler.</p> <p>Unutmayın <strong>createPost()</strong> işlevi, işinin geri kalanını bitirdiğinde <strong>revalidateTag("posts")</strong>'ı çağırır. Bu, Next.js'yi, uygulamanın az önce oluşturduğu yeni gönderiyi içermesi gereken verileri yeniden getirmeye zorlar.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Kodunuzun Sunucuda Çalıştığının Kanıtı </h2> <p>Kodun tamamının sunucuda çalıştığından emin olmak için, aşağıdaki konsol günlük deyimini <strong>createPost()</strong> işlevi:</p> <pre> <code><span>console</span>.log(<span>"Sunucuda çalışıyor"</span>)</code> </pre> <p>Ardından, gönder düğmesini tıklayarak yeni bir gönderi oluşturmayı deneyin. Kodunuz sunucuda çalışıyorsa, bu günlük mesajı terminalinizde görünecektir. Ancak istemcide çalışıyorsa, günlük tarayıcı konsolunda görünecektir.</p> <p>Bu, hassas verileri kaydetmeyi güvenli hale getirir. çevresel değişkenler, veri tabanı bağlantıları ve sunucudaki parolalar gibi bilgilerin açığa çıkmasından korkmadan müşteri. Daha sonra Next.js uygulamanızda <span>.env dosyanızdaki dizeleri okuyabilirsiniz</span>.</p> <p> özellikle 13.4'ten sonraki Next.js sürümleri için sunucu eylemlerinin kullanımını ayırmak istiyorsanız üretme. Ancak, sunucuya giderek daha fazla şey taşıyarak yapabileceklerinizi sürekli zorladığı için, bu özelliğin nereye gittiğini görmek hala gerçekten heyecan verici. İstemci uygulamalarınızın yazılmasını kolaylaştırmalı ve geliştirme sürecini çok daha eğlenceli hale getirmelidir.</p> <h2 id="learn-more-about-migrating-to-next-js"> Next'e Geçiş Hakkında Daha Fazla Bilgi Edinin .js </h2> <p>Birçok ön uç geliştirici, kullanıcı arabirimi geliştirme için React'i kullanır. Ancak sunucu tarafında işleme ve statik site oluşturma gibi özellikler sayesinde, bu geliştiricilerin çoğu uygulamalarını Next.js'yi kullanacak şekilde taşıyor. React, sözdizimi açısından Next.js'ye oldukça benzer olduğu için bu geçiş çok basittir.</p> <p>Ek performans ve güvenlik artışı, taşımayı daha da fazla gerektirir. Az önce ele aldığımız yeni sunucu eylemleriyle birleştiğinde sunucu tarafı bileşenlere sahip olma yeteneği, Next.js'yi basit React'e kıyasla daha güvenli ve performanslı bir seçenek haline getiriyor. Bir React geliştiricisi olarak, uygulamanızı Next.js'ye nasıl taşıyacağınızı öğrenmelisiniz.</p> </div></code></p></pre></button>
</div></code></p></span>