jQuery'den Next.js'ye Nasıl Geçilir?

Yayınlanan: 2022-03-10
Kısa özet ↬ Bu makalede, jQuery çerçevesi kullanan bir web uygulamasını nasıl geçirebileceğimize ve piyasadaki en havalı React çerçevelerinden birini kullanmaya nasıl başlayacağımıza dair farklı yaklaşımlara ve stratejilere daha yakından bakıyoruz: Next.js.

jQuery 2006'da ortaya çıktığında, birçok geliştirici ve kuruluş, projeleri için onu benimsemeye başladı. Kitaplığın sunduğu DOM'yi genişletme ve değiştirme olasılığı harika ve ayrıca jQuery ana kitaplığı tarafından desteklenmeyen görevler yapmamız gerektiğinde sayfalarımıza davranış eklemek için birçok eklentimiz var. Geliştiriciler için birçok işi basitleştirdi ve o anda JavaScript'i web uygulamaları veya Tek Sayfa Uygulamaları oluşturmak için güçlü bir dil haline getirdi.

jQuery popülaritesinin sonucu bugün hala ölçülebilir: Dünyanın en popüler web sitelerinin neredeyse %80'i hala onu kullanıyor. jQuery'nin bu kadar popüler olmasının nedenlerinden bazıları şunlardır:

  • DOM manipülasyonunu destekler.
  • CSS manipülasyonu sağlar.
  • Tüm web tarayıcılarında aynı şekilde çalışır.
  • HTML olay yöntemlerini sarar.
  • AJAX çağrıları oluşturmak kolaydır.
  • Kullanımı kolay efektler ve animasyonlar.

Yıllar geçtikçe JavaScript çok değişti ve geçmişte sahip olmadığımız birkaç özellik ekledi. ECMAScript'in yeniden tanımlanması ve gelişmesiyle, jQuery'nin sağladığı bazı işlevler standart JavaScript özelliklerine eklendi ve tüm web tarayıcıları tarafından desteklendi. Bu gerçekleştiğinde, aynı şeyleri düz JavaScript ile yapabildiğimiz için jQuery'nin sunduğu bazı davranışlara artık ihtiyaç duyulmadı .

Öte yandan, yeni bir düşünme ve kullanıcı arayüzleri tasarlama yolu ortaya çıkmaya başladı. React, Angular veya Vue gibi çerçeveler, geliştiricilerin yeniden kullanılabilir işlevsel bileşenlere dayalı web uygulamaları oluşturmasına olanak tanır. React, yani bellekteki DOM temsili olan “sanal DOM” ile çalışır, jQuery ise daha az performansla doğrudan DOM ile etkileşime girer . Ayrıca React, durum yönetimi gibi belirli özelliklerin geliştirilmesini kolaylaştırmak için harika özellikler sunar. Bu yeni yaklaşım ve Single Page Applications'ın kazanmaya başladığı popülerlik ile birçok geliştirici web uygulama projeleri için React'i kullanmaya başladı.

Ve ön uç geliştirme, diğer çerçevelerin üzerine oluşturulan çerçevelerle daha da gelişti. Örneğin Next.js için durum budur. Muhtemelen bildiğiniz gibi, statik sayfalar oluşturmak, sunucu tarafında işlenmiş sayfalar oluşturmak ve her iki türü aynı uygulamada birleştirmek için özellikler sunan açık kaynaklı bir React çerçevesidir. Aynı uygulama içinde sunucusuz API'ler oluşturmaya da izin verir.

İlginç bir senaryo var: Bu ön uç çerçeveleri yıllar içinde giderek daha popüler olsa da, jQuery hala web sayfalarının büyük çoğunluğu tarafından benimseniyor. Bunun olmasının nedenlerinden biri, WordPress kullanan web sitelerinin yüzdesinin gerçekten yüksek olması ve jQuery'nin CMS'ye dahil edilmesidir . Diğer bir neden, Bootstrap gibi bazı kitaplıkların jQuery'ye bağımlı olması ve onu ve eklentilerini kullanan bazı kullanıma hazır şablonların olmasıdır.

Ancak bu kadar web sitesinin jQuery kullanmasının bir başka nedeni de eksiksiz bir web uygulamasını yeni bir çerçeveye geçirmenin maliyetidir. Kolay değil, ucuz değil ve zaman alıcı. Ancak nihayetinde yeni araçlar ve teknolojilerle çalışmak birçok fayda sağlar: daha geniş destek, topluluk yardımı, daha iyi geliştirici deneyimi ve insanları proje üzerinde çalıştırma kolaylığı.

React veya Next.js gibi çerçevelerin bize dayattığı mimariyi takip etmemizin gerekmediği (veya istemediğimiz) birçok senaryo var ve bunda bir sorun yok. Ancak jQuery, artık ihtiyaç duyulmayan birçok kod ve özelliği barındıran bir kütüphanedir. jQuery'nin sunduğu özelliklerin çoğu, modern JavaScript yerel işlevleri kullanılarak ve muhtemelen daha performanslı bir şekilde gerçekleştirilebilir.

Şimdi jQuery kullanmayı nasıl bırakabileceğimizi ve web sitemizi bir React veya Next.js web uygulamasına nasıl taşıyabileceğimizi tartışalım.

Taşıma Stratejisini Tanımlayın

Kütüphaneye İhtiyacımız Var mı?

Web uygulamamızın özelliklerine bağlı olarak, bir çerçevenin gerçekten gerekli olmadığı durumlarda bile olabilir. Daha önce de belirtildiği gibi, en son web standardı sürümlerine birkaç jQuery özelliği dahil edildi (veya en azından çok benzer bir özellik). Yani, bunu göz önünde bulundurarak:

  • jQuery'deki $(selector) kalıbı, querySelectorAll() ile değiştirilebilir.

Yapmak yerine:

 $("#someId");

Biz yapabiliriz:

 document.querySelectorAll("#someId");
  • CSS sınıflarını değiştirmek istiyorsak, artık Element.classList özelliğine sahibiz.

Yapmak yerine:

 $(selector).addClass(className);

Biz yapabiliriz:

 element.classList.add(className);
  • Birçok animasyon, JavaScript uygulamak yerine doğrudan CSS kullanılarak yapılabilir.

Yapmak yerine:

 $(selector).fadeIn();

Biz yapabiliriz:

 element.classList.add('show'); element.classList.remove('hide');

Ve biraz CSS stili uygulayın:

 .show { transition: opacity 400ms; } .hide { opacity: 0; }
  • Olayları işlemek istiyorsak, artık addEventListener işlevimiz var.

Yapmak yerine:

 $(selector).on(eventName, eventHandler);

Biz yapabiliriz:

 element.addEventListener(eventName, eventHandler);
  • jQuery Ajax kullanmak yerine XMLHttpRequest kullanabiliriz.

Yapmak yerine:

 $.ajax({ type: 'POST', url: '/the-url', data: data });

Biz yapabiliriz:

 var request = new XMLHttpRequest(); request.open('POST', '/the-url', true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.send(data);

Daha fazla ayrıntı için bu Vanilla JavaScript Kod Parçacıklarına göz atabilirsiniz.

Bileşenleri Tanımlayın

Uygulamamızda jQuery kullanıyorsak, web sunucusunda oluşturulan bazı HTML içeriğine ve sayfaya etkileşim ekleyen JavaScript koduna sahip olmamız gerekir. Muhtemelen, olaylar gerçekleştiğinde DOM'yi manipüle edecek, muhtemelen CSS'yi veya öğelerin stilini güncelleyecek olan olay işleyicileri sayfa yüklemesine ekliyoruz . Ayrıca, sayfanın DOM'sini etkileyebilecek veya hatta yeniden yükleyebilecek eylemleri yürütmek için arka uç hizmetlerini de çağırıyor olabiliriz.

Buradaki fikir, sayfalarda yaşayan JavaScript kodunu yeniden düzenlemek ve React bileşenlerini oluşturmak olacaktır. Bu, ilgili kodu birleştirmemize ve daha büyük bir kompozisyonun parçası olacak öğeleri oluşturmamıza yardımcı olacaktır. Bunu yaparak, uygulamamızın durumunu daha iyi ele alabileceğiz. Uygulamamızın ön yüzünü analiz ederek, onu belirli bir göreve ayrılmış parçalara bölmeliyiz, böylece buna dayalı bileşenler oluşturabiliriz.

Bir düğmemiz varsa:

 <button>Click</button>

Aşağıdaki mantıkla:

 var $btnAction = $("#btn-action"); $btnAction.on("click", function() { alert("Button was clicked"); });

Bunu bir React Bileşenine taşıyabiliriz:

 import React from 'react'; function ButtonComponent() { let handleButtonClick = () => { alert('Button clicked!') } return <button onClick={handleButtonClick}>Click</button> }

Ancak uygulamamız çalıştığı ve kullanıldığı için geçiş sürecinin nasıl tamamlanacağını da değerlendirmeliyiz ve onu etkilemek (veya en azından mümkün olduğunca az etkilemek) istemiyoruz.

İyi Göç

İyi bir geçiş, uygulamanın tüm bölümlerinin tamamen yeni çerçeveye veya teknolojiye geçirildiği geçiştir. Bu, tüm parçaları senkronize tutacağımızdan ve birleşik bir araç ve benzersiz bir referans sürümü kullanacağımızdan, uygulamamız için ideal senaryo olacaktır.

İyi ve eksiksiz bir geçiş, genellikle uygulamamızın kodunun tamamen yeniden yazılmasını içerir ve bu mantıklıdır. Sıfırdan bir uygulama oluşturursak, yeni kodla hangi yöne gitmek istediğimize karar verme olanağına sahibiz. Mevcut sistemlerimiz ve iş akışımız üzerinde yeni bir bakış açısı kullanabilir ve şu anda sahip olduğumuz bilgiyle, web uygulamamızı ilk oluşturduğumuzda sahip olduğumuzdan daha eksiksiz, yepyeni bir uygulama oluşturabiliriz.

Ancak tam bir yeniden yazmanın bazı sorunları vardır. Her şeyden önce, çok zaman gerektirir. Uygulama ne kadar büyükse, onu yeniden yazmak için o kadar fazla zamana ihtiyacımız olacak. Diğer bir sorun, gereken iş miktarı ve geliştiricilerin miktarıdır. Ve aşamalı bir geçiş yapmazsak, uygulamamızın ne kadar süre kullanılamayacağını düşünmemiz gerekir.

Normalde, küçük projelerle, sık sık değişmeyen projelerle veya işimiz için çok kritik olmayan uygulamalarla eksiksiz bir yeniden yazma işlemi gerçekleştirilebilir.

Hızlı Göç

Diğer bir yaklaşım, uygulamayı parçalara veya parçalara bölmektir. Uygulamayı parça parça taşırız ve bu parçaları hazır olduklarında yayınlarız. Bu nedenle, uygulamamızın kullanıcılar için mevcut olan ve mevcut üretim uygulamamızla birlikte var olan kısımlarını taşıdık.

Bu kademeli geçiş ile, tüm uygulamanın yeniden yazılmasını beklemek zorunda olmadığımız için projemizin ayrılmış özelliklerini kullanıcılara daha hızlı bir şekilde sunuyoruz. Ayrıca, kullanıcılardan daha hızlı geri bildirim alıyoruz, bu da hataları veya sorunları daha erken tespit etmemizi sağlıyor.

Ancak kademeli bir geçiş, bizi farklı araçlara, kitaplıklara, bağımlılıklara ve çerçevelere sahip olmaya yönlendirir. Veya aynı araçtan farklı sürümleri desteklememiz bile gerekebilir. Bu genişletilmiş destek, uygulamamızda çakışmalara neden olabilir.

Hatta global kapsamda politikalar uyguluyorsak, taşınan parçaların her biri farklı şekilde çalışabileceğinden, ancak sistemimize global parametreleri ayarlayan koddan etkilenebileceğinden sorun yaşayabiliriz. Buna bir örnek, CSS stili için kademeli bir mantığın kullanılmasıdır.

Daha sonra oluşturulan modüllere daha yeni sürümlerden işlevler eklediğimiz için web uygulamamızda farklı jQuery sürümleriyle çalıştığımızı hayal edin. Tüm uygulamamızı jQuery'nin daha yeni bir sürümüne taşımak ne kadar karmaşık olurdu? Şimdi aynı senaryoyu, ancak Next.js gibi tamamen farklı bir çerçeveye geçiş yaptığınızı hayal edin. Bu karmaşık olabilir.

Frankenstein Göçü

Denys Mishunov, Smashing Magazine'de bu iki göç fikrine bir alternatif sunan ve önceki iki yaklaşımdan en iyi şekilde yararlanmaya çalışan bir makale yazdı: Frankenstein Migration. Geçiş sürecini iki ana bileşene dayandırır: Mikro Hizmetler ve Web Bileşenleri.

Geçiş süreci, izlenecek adımların bir listesinden oluşur:

1. Mikro Hizmetleri Tanımlayın

Uygulama kodumuza dayanarak, onu küçük bir işe ayrılmış bağımsız bölümlere ayırmalıyız. React veya Next.js kullanmayı düşünüyorsak, mikro hizmet kavramını sahip olduğumuz farklı bileşenlere bağlayabiliriz.

Örnek olarak bir bakkal listesi uygulamasını düşünelim. Satın alınacak şeylerin bir listesi ve listeye daha fazla şey eklemek için bir girdimiz var. Bu nedenle, uygulamamızı küçük parçalara bölmek istiyorsak, bir "öğe listesi" bileşeni ve bir "öğe ekle" hakkında düşünebiliriz. Bunu yaparak, bu parçaların her biriyle ilgili işlevselliği ve işaretlemeyi farklı React bileşenlerine ayırabiliriz.

Bileşenlerin bağımsız olduğunu doğrulamak için bunlardan birini uygulamadan kaldırabilmemiz ve diğerlerinin bundan etkilenmemesi gerekir. Bir hizmetten işaretlemeyi ve işlevselliği kaldırırken bir hata alırsak, bileşenleri doğru tanımlamıyoruz veya kodumuzun çalışma şeklini yeniden düzenlememiz gerekiyor.

2. Ana Bilgisayardan Uzaylıya Erişime İzin Ver

“Host” mevcut uygulamamızdır. “Alien”, yeni çerçeve ile yaratmaya başlayacağımızdır. Her ikisi de bağımsız olarak çalışmalıdır, ancak Host'tan Alien'a erişim sağlamalıyız. İki uygulamadan herhangi birini diğerini bozmadan konuşlandırabilmeli, ancak aralarındaki iletişimi sürdürebilmeliyiz.

3. Bir Uzaylı Bileşeni Yazın

Yeni çerçeveyi kullanarak Host uygulamamızdan Alien uygulamamıza bir hizmeti yeniden yazın. Bileşen, daha önce bahsettiğimiz aynı bağımsızlık ilkesini izlemelidir.

Bakkal listesi örneğine geri dönelim. Bir "öğe ekle" bileşeni belirledik. jQuery ile bileşenin işaretlemesi şuna benzer:

 <input class="new-item" />

Öğeleri listeye eklemek için JavaScript/jQuery kodu şöyle olacaktır:

 var ENTER_KEY = 13; $('.new-item').on('keyup', function (e) { var $input = $(e.target); var val = $input.val().trim(); if (e.which !== ENTER_KEY || !val) { return; } // code to add the item to the list $input.val(''); });

Bunun yerine bir AddItem React bileşeni oluşturabiliriz:

 import React from 'react' function AddItemInput({ defaultText }) { let [text, setText] = useState(defaultText) let handleSubmit = e => { e.preventDefault() if (e.which === 13) { setText(e.target.value.trim()) } } return <input type="text" value={text} onChange={(e) => setText(e.target.value)} onKeyDown={handleSubmit} /> }

4. Yabancı Hizmet Çevresine Web Bileşeni Sarıcı Yazın

Yeni oluşturulan Alien hizmetimizi içe aktaran ve işleyen bir sarmalayıcı bileşen oluşturun. Buradaki fikir, Host uygulaması ile Alien uygulaması arasında bir köprü oluşturmaktır. Yeni React bileşenlerimizi kopyalamamız ve çalışır hale getirmemiz gerekeceğinden, mevcut uygulamamızda çalışan JavaScript kodunu oluşturmak için bir paket paketleyiciye ihtiyacımız olabileceğini unutmayın.

Bakkal listesi örneğini takip ederek Host projesinde AddItem-wrapper.js dosyası oluşturabiliriz. Bu dosya, önceden oluşturulmuş AddItem bileşenimizi saran ve onunla özel bir öğe oluşturan kodu içerecektir:

 import React from "../alien/node_modules/react"; import ReactDOM from "../alien/node_modules/react-dom"; import AddItem from "../alien/src/components/AddItem"; class FrankensteinWrapper extends HTMLElement { connectedCallback() { const appWrapper = document.createElement("div"); appWrapper.classList.add("grocerylistapp"); ... ReactDOM.render( <HeaderApp />, appWrapper ); … } } customElements.define("frankenstein-add-item-wrapper", FrankensteinWrapper);

Bileşenin çalışması için içe aktarmamız gerektiğinden, gerekli düğüm modüllerini ve bileşenlerini Alien uygulama klasörlerinden getirmeliyiz.

5. Ana Bilgisayar Hizmetini Web Bileşeniyle Değiştirin

Bu sarmalayıcı bileşen, Host uygulamasındakinin yerini alacak ve onu kullanmaya başlayacağız. Bu nedenle, üretimdeki uygulama, Ana Bilgisayar bileşenlerinin ve Uzaylı paketli bileşenlerin bir karışımı olacaktır.

Örnek Host uygulamamızda şunu değiştirmeliyiz:

 <input class="new-item" />

İle birlikte

 <frankenstein-add-item-wrapper></frankenstein-add-item-wrapper> ... <script type="module" src="js/AddItem-wrapper.js"></script>

6. Durulayın ve Tekrarlayın

Tanımlanan mikro hizmetlerin her biri için 3., 4. ve 5. adımları izleyin.

7. Uzaylıya Geç

Ana bilgisayar artık Alien uygulamasında oluşturduğumuz tüm web bileşenlerini içeren bir sarmalayıcı bileşenleri topluluğudur. Tanımlanan tüm mikro servisleri dönüştürdüğümüz için Alien uygulamasının bittiğini ve tüm servislerin taşındığını söyleyebiliriz. Artık kullanıcılarımızı Alien uygulamasına yönlendirmemiz gerekiyor.

Frankenstein Migration yöntemi, hem İyi hem de Hızlı yaklaşımların bir kombinasyonu olarak çalışır. Tüm uygulamayı taşırız, ancak farklı bileşenleri bittiğinde serbest bırakırız. Böylece üretimde daha erken kullanılabilir ve kullanıcılar tarafından değerlendirilebilir.

Yine de, bu yaklaşımla biraz fazla iş yaptığımızı düşünmeliyiz. Alien uygulamamız için oluşturduğumuz bileşenleri kullanmak istiyorsak Host uygulamasına dahil etmek için bir sarmalayıcı bileşen oluşturmamız gerekiyor. Bu, bu sarmalayıcı öğelerin kodunu geliştirmek için zaman harcamamızı sağlar. Ayrıca bunları Host uygulamamızda kullanarak, kod ve bağımlılıkların eklenmesini çoğaltıyoruz ve uygulamamızın performansını etkileyecek kodlar ekliyoruz.

boğucu Başvurusu

Alabileceğimiz başka bir yaklaşım, Eski Uygulama Boğulma'dır. Mevcut web uygulamamızın kenarlarını belirliyoruz ve uygulamamıza işlevsellik eklememiz gerektiğinde, eski sistem “boğulmuş” olana kadar bunu daha yeni bir çerçeve kullanarak yapıyoruz. Bu yaklaşım, bir uygulamayı taşırken deneyebileceğimiz potansiyel riski azaltmamıza yardımcı olur.

Bu yaklaşımı takip etmek için Frankenstein Migration'da yaptığımız gibi farklı bileşenleri tanımlamamız gerekiyor. Uygulamamızı ilgili zorunlu kodun farklı parçalarına böldüğümüzde, bunları yeni React bileşenlerine sarıyoruz. Herhangi bir ek davranış eklemiyoruz, sadece mevcut içeriğimizi oluşturan React bileşenleri oluşturuyoruz.

Daha fazla açıklama için bir örnek görelim. Diyelim ki uygulamamızda bu HTML kodu var:

 <div class="accordion"> <div class="accordion-panel"> <h3 class="accordion-header">Item 1</h3> <div class="accordion-body">Text 1</div> </div> <div class="accordion-panel"> <h3 class="accordion-header">Item 2</h3> <div class="accordion-body">Text 2</div> </div> <div class="accordion-panel"> <h3 class="accordion-header">Item 3</h3> <div class="accordion-body">Text 3</div> </div>> </div>

Ve bu JavaScript kodu (jQuery işlevlerini zaten yeni JavaScript standart özellikleriyle değiştirdik).

 const accordions = document.querySelectorAll(".accordion"); for (const accordion of accordions) { const panels = accordion.querySelectorAll(".accordion-panel"); for (const panel of panels) { const head = panel.querySelector(".accordion-header"); head.addEventListener('click', () => { for (const otherPanel of panels) { if (otherPanel !== panel) { otherPanel.classList.remove('accordion-expanded'); } } panel.classList.toggle('accordion-expanded'); }); } }

Bu, JavaScript için bir accordion bileşeninin yaygın bir uygulamasıdır. Burada React'i tanıtmak istediğimiz için mevcut kodumuzu yeni bir React bileşeni ile sarmamız gerekiyor:

 function Accordions() { useEffect(() => { const accordions = document.querySelectorAll(".accordion") for (const accordion of accordions) { const panels = accordion.querySelectorAll(".accordion-panel") for (const panel of panels) { const head = panel.querySelector(".accordion-header") head.addEventListener("click", () => { for (const otherPanel of panels) { if (otherPanel !== panel) { otherPanel.classList.remove("accordion-expanded") } } panel.classList.toggle("accordion-expanded") }); } } }, []) return null } ReactDOM.render(<Accordions />, document.createElement("div"))

Bileşen, herhangi bir yeni davranış veya özellik eklemiyor. Bileşen belgeye monte edildiğinden useEffect kullanıyoruz. Bu nedenle, kancanın bir bileşen döndürmesi gerekmediğinden işlev null değerini döndürür.

Bu nedenle, mevcut uygulamamıza herhangi bir yeni işlev eklemedik, ancak davranışını değiştirmeden React'i tanıttık. Şu andan itibaren, kodumuza ne zaman yeni özellikler veya değişiklikler eklesek, bunu daha yeni seçilen çerçeveyi kullanarak yapacağız.

İstemci Tarafı Oluşturma, Sunucu Tarafı Oluşturma veya Statik Oluşturma?

Next.js bize web uygulamamızın her sayfasını nasıl oluşturmak istediğimizi seçme imkanı verir. İçeriği doğrudan kullanıcının tarayıcısında oluşturmak için React'in bize sunduğu istemci tarafı oluşturmayı kullanabiliriz. Veya sayfamızın içeriğini sunucu tarafı oluşturma kullanarak sunucuda oluşturabiliriz. Son olarak, statik oluşturma kullanarak derleme zamanında sayfamızın içeriğini oluşturabiliriz.

Uygulamamızda, herhangi bir JavaScript kitaplığı veya çerçevesi ile etkileşime geçmeden önce, sayfa yüklendiğinde kodu yüklemeli ve oluşturmalıyız. ASP.NET, PHP veya Node.js gibi bir sunucu tarafı işleme programlama dili veya teknolojisi kullanıyor olabiliriz. Next.js özelliklerinden faydalanabilir ve mevcut oluşturma yöntemimizi Next.js sunucu tarafı oluşturma yöntemiyle değiştirebiliriz. Bunu yaparken, seçilen çerçeve çatısı altında çalışan tüm davranışları aynı proje içinde tutuyoruz. Ayrıca ana sayfamızın mantığını ve React bileşenlerini, sayfamız için gerekli tüm içeriği oluşturan aynı kod içinde tutuyoruz.

Örnek olarak bir kontrol paneli sayfasını düşünelim. Kullanıcının web tarayıcısında React ile oluşturmak yerine, sayfanın tüm ilk işaretlemesini yükleme sırasında sunucuda oluşturabiliriz.

 const DashboardPage = ({ user }) => { return ( <div> <h2>{user.name}</h2> // User data </div> ) } export const getServerSideProps = async ({ req, res, params }) => { return { props: { user: getUser(), }, } }, }) export default DashboardPage

Sayfa yüklenirken oluşturduğumuz işaretleme tahmin edilebilirse ve derleme sırasında alabileceğimiz verilere dayanıyorsa, statik oluşturma iyi bir seçim olacaktır. Derleme zamanında statik varlıklar oluşturmak , uygulamamızı daha hızlı, daha güvenli, ölçeklenebilir ve bakımı daha kolay hale getirecektir. Ayrıca, uygulamamızın sayfalarında dinamik içerik oluşturmamız gerektiğinde, hizmetlerden veya veri kaynaklarından bilgi almak için React'in istemci tarafı oluşturmasını kullanabiliriz.

Birçok blog yazısı içeren bir blog sitemiz olduğunu hayal edin. Statik Üretim kullanırsak, Next.js uygulamamızda genel bir [blog-slug].js dosyası oluşturabiliriz ve aşağıdaki kodu ekleyerek blog yazılarımız için tüm statik sayfaları derleme zamanında oluştururuz.

 export const getStaticPaths = async () => { const blogPosts = await getBlogPosts() const paths = blogPosts.map(({ slug }) => ({ params: { slug, }, })) return { paths, fallback: false, } } export const getStaticProps = async ({ params }) => { const { slug } = params const blogPost = await getBlogPostBySlug(slug) return { props: { data: JSON.parse(JSON.stringify(blogPost)), }, } }

API Rotalarını Kullanarak Bir API Oluşturun

Next.js'nin sunduğu harika özelliklerden biri, API Rotaları oluşturma olanağıdır. Onlarla Node.js kullanarak kendi sunucusuz fonksiyonlarımızı oluşturabiliriz. İşlevselliği genişletmek için NPM paketleri de kurabiliriz. Bununla ilgili harika bir şey, API'mizin ön ucumuzla aynı projede/uygulamada kalmasıdır, bu nedenle herhangi bir CORS sorunu yaşamayız.

Web uygulamamızdan çağrılan bir API'yi jQuery AJAX işlevselliğini kullanırsak, API Routes kullanarak değiştirebiliriz. Bunu yaparak, uygulamamızın tüm kod tabanını aynı depoda tutacağız ve uygulamamızın dağıtımını daha basit hale getireceğiz. Bir üçüncü taraf hizmeti kullanıyorsak, harici URL'leri "maskelemek" için API Rotalarını kullanabiliriz.

Sayfamızda kullandığımız verileri döndüren bir API Rotamız /pages/api/get/[id].js olabilir.

 export default async (req, res) => { const { id } = req.query try { const data = getData(id) res.status(200).json(data) } catch (e) { res.status(500).json({ error: e.message }) } }

Ve sayfamızın kodundan arayın.

 const res = await fetch(`/api/get/${id}`, { method: 'GET', }) if (res.status === 200) { // Do something } else { console.error(await res.text()) }

Netlify'a dağıtın

Netlify, web uygulamalarını otomatikleştirmek, yönetmek, oluşturmak, test etmek, dağıtmak ve barındırmak için kullanılabilen eksiksiz bir platformdur. Modern web uygulaması geliştirmeyi daha kolay ve daha hızlı hale getiren birçok özelliğe sahiptir. Bazı Netlify vurguları şunlardır:

  • Küresel CDN barındırma platformu,
  • Sunucusuz işlev desteği,
  • Github Çekme İsteklerine dayalı önizlemeleri dağıtın,
  • Web kancaları,
  • Anında geri dönüşler,
  • Rol tabanlı erişim kontrolü.

Netlify, Next.js uygulamalarımızı yönetmek ve barındırmak için harika bir platformdur ve onunla bir web uygulamasını dağıtmak oldukça basittir.

Her şeyden önce, bir Git deposundaki Next.js uygulama kodumuzu takip etmemiz gerekiyor. Netlify, GitHub'a (veya tercih ettiğimiz Git platformuna) bağlanır ve bir şubede bir değişiklik yapıldığında (taahhüt veya Çekme İsteği), otomatik bir "oluştur ve dağıt" görevi tetiklenir.

Uygulamamızın kodunu içeren bir Git deposuna sahip olduğumuzda, bunun için bir “Netlify Sitesi” oluşturmamız gerekiyor. Bunu yapmak için iki seçeneğimiz var:

  1. Netlify CLI'yi kullanma
    CLI'yi ( npm install -g netlify-cli ) kurduktan ve Netlify hesabımıza ( ntl login ) giriş yaptıktan sonra uygulamamızın kök dizinine gidip ntl init çalıştırabilir ve adımları takip edebiliriz.
  2. Netlify web uygulamasını kullanma
    https://app.netlify.com/start adresine gitmeliyiz. Git sağlayıcımıza bağlanın, listeden uygulamamızın deposunu seçin, bazı oluşturma seçeneklerini yapılandırın ve dağıtın.

Her iki yöntem için de, derleme komutumuzun bir next build olacağını ve dağıtılacak dizinimizin out olduğunu düşünmeliyiz.

Son olarak, Essential Next.js eklentisi otomatik olarak yüklenir ve bu, API rotalarını, dinamik rotaları ve Önizleme Modu'nu dağıtmamıza ve kullanmamıza olanak tanır. İşte bu kadar, Next.js uygulamamız hızlı ve istikrarlı bir CDN barındırma hizmetinde çalışır durumda.

Çözüm

Bu yazımızda jQuery kütüphanesini kullanan web sitelerini değerlendirdik ve React ve Next.js gibi yeni frontend frameworkleri ile karşılaştırdık. Faydası olması durumunda daha yeni bir araca geçişi nasıl başlatabileceğimizi tanımladık. Farklı geçiş stratejilerini değerlendirdik ve Next.js web uygulama projelerine taşıyabileceğimiz bazı senaryo örnekleri gördük. Son olarak, Next.js uygulamamızı Netlify'a nasıl dağıtacağımızı ve onu nasıl çalıştıracağımızı gördük.

Daha Fazla Okuma ve Kaynaklar

  • Frankenstein Göçü: Çerçeve-Agnostik Yaklaşım
  • GitHub.com ön ucundan jQuery'yi kaldırma
  • Next.js'ye Başlarken
  • Netlify için Next.js Siteleri Nasıl Dağıtılır
  • Netlify Blog'daki Next.js makaleleri