Geliştiriciler için Next.js ve React'i Tanımak

React, kullanıcı arabirimleri oluşturmak için en popüler kitaplıklardan biridir ve Next.js, kullanıcı arabirimleri oluşturmak için en popüler çerçevelerden biridir.

Next.js, React kullanılarak oluşturulmuştur. Dolayısıyla aralarında pek çok benzerlik var. Bu ikisi arasında kafa karıştırılacağı aşikar.

Şimdi bu ikisine derinlemesine dalalım ve kafa karışıklığını açıklığa kavuşturmada nasıl farklılık gösterdiklerini görelim. React ile başlayalım.

Tepki: Başlarken

React, JavaScript kullanarak kullanıcı arabirimleri oluşturmaya yönelik açık kaynaklı bir kitaplıktır. React, tek sayfalık web uygulamaları oluşturmak için kullanılır. Tek sayfalık uygulamalar derken neyi kastediyorum? Uygulama, tek bir HTML belgesine sahip olacak ve onu gerektiği gibi güncelleyecektir.

Tek sayfalık web uygulamaları oluşturmak şu anda en yüksek noktasında. Ve React'in şu anda bu alandaki en popüler kitaplık olduğunu söyleyebiliriz. Bu bir abartı değil.

Geliştiricilerin hayatını kolaylaştıran birçok React paketi mevcuttur. Web uygulamaları oluşturmaya gelince, React ile her türlü web uygulamasını oluşturabiliriz.

React, Facebook tarafından geliştirilmiştir. Artık herkes katkıda bulunabilir. Ve Facebook tarafından korunur.

React'in bazı özelliklerini kontrol edelim.

Sanal DOM

Web uygulamaları, veri alırken bir yükleyici göstermek ve web uygulamasının bu bölümünü getirilen verilerle güncellemek gibi, artık diğer bölümleri etkilemeden belirli bölümlerini güncelleyecektir. Daha teknik olarak konuşursak, tarayıcıdaki DOM'u güncelliyor.

React gibi kitaplıklar olmasaydı, DOM işlemleri çok maliyetli olduğu için verimsiz olan vanilya JavaScript kullanarak yapardık. React, bu sorunla başa çıkmak için sanal DOM kavramını sunar.

Sanal DOM, gerçek DOM'un bir kopyasıdır. Herhangi bir güncelleme olduğunda, React bunları önce sanal DOM'da günceller ve gerçek DOM ile karşılaştırır. Ve React, gerçek DOM'u yalnızca herhangi bir değişiklik varsa ve yalnızca değiştirilen parçalar varsa güncelleyecektir. Böylece, gerçek DOM üzerinde daha az işlem yaparak güncelleme süresini önemli ölçüde azaltır.

React gibi kütüphaneler olmasaydı web çok yavaş olurdu.

Bileşenler

Bileşenler, React'teki kullanıcı arayüzünün yapı taşlarıdır. React'te her şeyin bir bileşen olduğunu söyleyebiliriz. Bu bileşenler, React uygulamasında yeniden kullanılabilir.

Diyelim ki bazı stilleri olan bir düğmemiz var. React'te, ona ilettiğimiz özelliklere dayalı olarak stiller içeren bir düğme oluşturmaktan sorumlu bir bileşen oluşturabiliriz. Bu düğme bileşenini, aksesuarları kullanarak istediğimiz gibi özelleştirebiliriz. Bileşenleri React uygulamasında bu şekilde yeniden kullanabiliriz.

Bileşenler, uygulamamızı küçük UI blokları halinde düzenlememize yardımcı olabilir. Onları istediğiniz gibi düzenleyebiliriz.

JSX

JSX adlı JS'de HTML yazabiliriz. HTML'ye benziyor ama JSX. JavaScript'i JSX ile kullanabilir ve onunla birlikte tüm HTML özelliklerine erişebiliriz.

JSX, kullanıcı arayüzünün yapısını tanımlamak için kullanılır. Her bileşen, DOM'da işlenecek olan JSX'i döndürür.

Tek Yönlü Veri Akışı

Bileşenler arasında akan veri, onları küçültmek için gereklidir. Bileşenler arasında veri akışımız yoksa, her şeyi tek bir bileşende barındırmamız gerekir.

React, ebeveynden çocuğa tek yönlü veri akışını takip eder. React'te ana bileşenlerden alt bileşenlere veri aktarabiliriz. Alt bileşen, durumu doğrudan üst bileşende değiştiremez. Geri aramaları geçerek yapılabilir.

Tek yönlü veri akışı, hata ayıklamayı kolaylaştırır. Tüm bileşenlerin durumu koruması gerekmediğinden bileşenler çok daha basit görünür.

JavaScript biliyorsanız React'i öğrenmek çok basittir. React belgeleri, onunla başlamak için yeterlidir.

Next.js: Başlarken

Next.js, web uygulamaları oluşturmak için bir tepki çerçevesidir. React'in üzerine inşa edilmiştir. Vercel tarafından yaratılmıştır. Yani, React'in tüm özellikleri içinde mevcut olacak. Next.js'nin özelliği nedir? Tepki bileşenleri dışında onu özel kılan bazı özellikleri görelim.

Ön Oluşturma

Next.js her sayfayı önceden oluşturur. Önceden oluşturulmuş olması, sayfayı tarayıcıda hızlı bir şekilde statik HTML ile yükleyecektir. Daha sonra o sayfa için gerekli JavaScript'i yükler. Sayfanın performansını ve SEO'sunu geliştirir.

İçinde iki tür ön işleme vardır. Biri Statik Site Oluşturma (SSG), diğeri ise Sunucu Tarafında İşleme (SSR). SSG, HTML'yi derleme zamanında oluşturur ve aynısını diğer isteklerde yeniden kullanır.

SSR, HTML'yi her istekte üreterek SSG'den biraz daha yavaş hale getirir. Next.js, SSR kullanmak zorunlu olana kadar SSG kullanılmasını önerir.

Next.js ayrıca mevcut görüntüleme sayfasında bağlantıları olan (Bağlantı bileşenli) sayfaları da önceden yükler. Bu harika özellik, hareket halindeyken sayfaların çok hızlı yüklenmesini sağlar.

Yönlendirme

Next.js yerleşik bir yönlendirme sistemi ile birlikte gelir. Dizin tabanlı bir yönlendirme sistemini destekler. Rotayı oluşturmak için belirli bir dizinde sayfalar oluşturmamız gerekiyor. Tepki olarak, bunu başarmak için bir paket kullanmalıyız.

API'ler

Next.js ile express benzeri API'ler oluşturabiliriz. Next.js ile tam yığın uygulamalar oluşturmak için yeni bir olasılık açar. Özel bir sunucu tarafı çerçevesi kadar verimli olmayabilir, ancak işi yapar.

Diğer Özellikler

Görüntü optimizasyonu, yerleşik CSS desteği, her sayfa için meta etiketler (daha iyi SEO için) vb. gibi başka özellikler de vardır; şimdiye kadar gördüğümüz tüm özellikler, React özelliklerinin yanı sıra Next.js'nin ek özellikleridir.

Next.js, piyasaya sunulduğundan beri çok fazla popülerlik kazandı. Next.js'yi öğrenmek, React'e aşina iseniz çok kolaydır. Ancak önce tepki vermeyi öğrenmek zorunlu değildir. İlk önce herhangi biriyle başlayabilirsiniz. JavaScript her ikisi için de zorunludur.

Şimdiye kadar React ve Next.js'nin farklı özelliklerini gördük. İkisini karşılaştıralım.

React ve Next.js karşılaştırması

React ve Next.js arasında pek çok benzerlik var. Aralarında pek çok benzerlik olmasının nedenini zaten biliyorsunuz. Bunların temel kavramları aynıdır. Bazı şeyleri yan yana karşılaştıralım.

kod

Basit bir Merhaba Dünya görelim! tepki ve next.js'deki bileşen.

Tepki

 function App() { return ( <div className="app"> Hello World! </div> ); } export default App;

Sonraki.js

 export default function Home() { return ( <div className="app"> Hello World! </div> ) }

Kodu görürseniz, aralarında hiçbir fark yoktur.

Klasör Yapısı

React, belirli bir klasör yapısına sahip olmayan bir kütüphanedir. Klasörleri ve dosyaları tercihimize ve kullanım durumumuza göre düzenleyebiliriz.

Next.js ayrıca uyulması gereken katı bir klasör yapısına sahip değildir. Ancak, sadece yönlendirme için pages klasörü içinde sayfalar oluşturmamız gerekiyor. next.js'de sahip olduğumuz tek kısıtlama bu. Reaksiyon gibi diğer tüm klasörleri ve dosyaları düzenleyebiliriz.

Verim

Next.js uygulamaları, React uygulamalarına kıyasla biraz daha hızlıdır. Next.js bunları oluşturmak için ön oluşturma tekniklerini kullanır. Ancak bu, React uygulamalarını hızlı yapamayacağımız anlamına gelmiyor. Aynı şeyi React ile de başarabiliriz. Bunun için ekstra çaba sarf etmemiz gerekiyor.

Yazı Tipi

TypeScript, büyük uygulamalarda önemli bir rol oynar. TypeScript olmadan, çoğu geliştirici uygulamalarda hata ayıklamaya kızacaktır. Endişelenmeyin, hem React hem de Next.js, TypeScript'i destekler.

Diğer Özellikler

Hem React hem de Next.js, içerik oluşturucular tarafından büyük ölçüde korunur. Topluluk, diğer ön uç kitaplıklara ve çerçevelere kıyasla her ikisi için de çok büyük. React ve Next.js ile uygulama geliştirirken bir yerde takılırsak çözümü internette bulma ihtimalimiz yüksek.

Bunların dokümantasyonu başlangıç ​​için çok iyidir. Biz ne bekliyoruz? Kullanmaya başlamak için React ve Next.js belgelerine gidin.

Özet

Hangisini Seçmeli?

Pekala, kimse bu soruya cevap veremez. Projenin türü, ne yaptığı, amacı vb. gibi farklı şeylere bağlıdır; tüm özelliklerini ve gereksinimlerini gözden geçirerek sonuca varabiliriz.

Hızlı bir şekilde sonuçlandırabileceğimiz temel şeylerden biri SEO'dur. Projenizin çok fazla SEO'ya ihtiyacı varsa, Next.js ile gitmek daha iyidir.

Bir sonuca varmak için tüm senaryolarda farklı faktörleri göz önünde bulundurduk. Bir sonuca varamazsak, React ile devam etmek daha iyidir. Kod geçişi fazla zaman almadığından, her zaman erken aşamada diğerine geçebiliriz. Fazla zaman almamasının nedenini biliyorsunuz.

Her ikisinin de iyi bir topluluğu var. React ve Next.js ile çalışırken karşılaştığınız hemen hemen her soruna çözüm buluyorsunuz, çünkü bunlar ön uç etki alanında yaygın olarak kullanılıyor. Web uygulamaları oluşturmak için birçok paket bulacaksınız. Aynı paketleri hem React'te hem de Next.js'de kullanabiliriz.

Karar vermek her zaman zordur. Ancak karar vermekten korkmayın.

Çözüm

Next.js'nin React'in bir üst kümesi olduğunu söyleyebiliriz. Next.js, onu kullanan React özelliklerinin yanı sıra daha fazla özellikle oluşturulur. Bu yüzden onları karşılaştırmak ideal değil. Yine de başardık. Her neyse, artık hem React hem de Next.js hakkında üst düzey bir fikriniz var.

Gördüğünüz gibi Next.js'nin ekstra özellikleri dışında aralarında çok fazla fark yok ki bu bariz. Bugünlük bu kadar. Bunu küçük bir öneriyle bitirelim.

Bir ön uç çerçevesi öğrenecekseniz, önce React ile başlamanızı öneririz. React kavramları, Next.js'nin öğrenmesini çok kolay hale getirecek.

ReactJS'yi öğrenmek için en iyi kaynakları da keşfedebilirsiniz.