İçindekiler[Saklamak][Göstermek]
Bir yazılım kitaplığı veya çerçevesi seçerken genellikle geliştirici deneyimi dikkate alınır.
“Geliştirici deneyiminden” bahsettiğimde, geliştiricilerin işi gerçekte nasıl yaptıklarından bahsediyorum. Geliştiriciler, kullanımı zevkli kitaplıkları veya çerçeveleri seçer.
Bu, şu anda en popüler kütüphanelere ve çerçevelere sahip olmamızın başlıca nedenlerinden biridir. Geliştiriciler olarak, görevlerimizde bize yardımcı olmak için oluşturulmuş mevcut araçlar olduğunda sıfırdan başlamamız gerekmez.
Çerçeveler, geliştiriciler tarafından uygulamalar oluşturmak için oluşturulan ve kullanılan yazılım parçalarıdır ve NextJS bunlardan biridir.
Bu yazıda, Nextjs'i, temel özelliklerini ve bir uygulama oluşturmak için nasıl kullanabileceğimizi gözden geçireceğiz. Hemen atlayalım.
Next.js nedir?
Next.js statik web sayfalarını ve React tabanlı çevrimiçi uygulamaları hızlı ve kolay bir şekilde oluşturmak için bir JavaScript çerçevesidir. Windows, Linux ve Mac dahil olmak üzere çeşitli platformlar için harika Web uygulamaları tasarlamanıza olanak tanır.
Reaksiyona minimum düzeyde aşinaysanız ve reaksiyon ekosistemi hakkında daha fazla bilgi edinmek istiyorsanız Next.js çerçevesine aşina olmalısınız.
Next.js, başlamak için ihtiyacınız olan her şeyle birlikte gelse de, NPM ve Yarn, JavaScript ve TypeScript, CSS ve SCSS, statik dışa aktarma ve sunucusuz dağıtım arasında seçim yapabilirsiniz.
Özellikler
- Yönlendirme otomatik olarak yapılır – Herhangi bir URL dosya sistemine, sayfalar klasöründeki dosyalara eşlendiğinden hiçbir şey yapılandırmanız gerekmez (elbette özelleştirme seçenekleriniz vardır).
- Tek Dosyanın Bileşenleri – Tamamen entegre olan ve aynı ekip tarafından üretilen styled-jsx kullanarak bileşene kapsamlı stiller eklemek kolaydır.
- Hot Code'u Yeniden Yükleme – Next.js diske kaydedilmiş bir değişiklik algıladığında sayfayı yeniden yükler.
- Dinamik Bileşenler – JavaScript modüllerini ve React Bileşenlerini dinamik olarak yükleyebilirsiniz.
- Statik dışa aktarma – Next.js, sonraki dışa aktarma komutuyla uygulamanızdan tamamen statik bir siteyi dışa aktarmanıza olanak tanır.
- Ortamla Uyumluluk – Next.js, JavaScript, Node ve React ekosistemleriyle sorunsuz bir şekilde bütünleşir.
- Kodları Otomatik Olarak Bölme – Sayfaları oluşturmak için yalnızca gereken kitaplıklar ve JavaScript kullanılır. Next.js, uygulamanın tüm kodunu içeren tek bir JavaScript dosyası oluşturmak yerine, uygulamayı akıllıca birçok kaynağa böler.
next.js uygulaması nasıl oluşturulur?
Montaj
Bir Next.js projesi kurmak ve oluşturmak için node npx komutunu kullanabilirsiniz.
Bu, bir klasör ve bir Next.js projesini çalıştırmak için gereken tüm dosyalar, yapılandırmalar ve diğer öğeleri oluşturacaktır.
Uygulamayı oluşturulduktan sonra başlatabilirsiniz.
Sayfalar ve Yönlendirme
Next.js ile rotaları işlemek için bir yönlendirme çerçevesi kullanmamız gerekmez. Next.js ile yönlendirme kurmak çok kolay. Yeni bir Next.js uygulaması oluşturmak için create-next-app komutunu kullandığınızda, uygulama varsayılan olarak 'sayfalar' adlı bir klasör oluşturur.
Bu 'sayfalar' klasörü, rotalarınızı koruduğunuz yerdir. Sonuç olarak, alt dizindeki her bir reaksiyon bileşeni dosyası ayrı bir rota olarak ele alınacaktır.
Örneğin, klasör şu dosyaları içeriyorsa:
- index.js
- hakkında.js
- aricles.js
Bu dosya otomatik olarak üç şekilde dönüştürülecektir:
- Dizin sayfası localhost/index
- localhost/about hakkında sayfası
- Blog sayfası localhost/makaleler
Bir about.js sayfası örneği aşağıda gösterilmiştir. Gördüğünüz gibi sayfa hakkında hiçbir şey verilmedi. Bu sadece standart bir React fonksiyonel bileşenidir.
rotalar
Yuvalanmış rotalar oluşturmak için önce bir alt klasör oluşturmalısınız. Örneğin: sayfalar/makaleler. Bu klasörde 'contact.js' tepki bileşeninizi oluşturun ve bu, localhost/makaleler/contact sayfasını oluşturacaktır.
Bir dosyayı sayfalar/makaleler.js'ye ve diğerini sayfalar/makaleler/index.js'ye koyarsanız. Her ikisi de aynı yolu localhost/blog'u yansıtır. Bu durumda, Next.js sadece article.js dosyasını oluşturacaktır. Her blog gönderisinin kendi yoluna sahip olduğu dinamik rotalara ne dersiniz:
- localhost/blog/ilk makale
- localhost/blog/-ikinci makale
Parantez gösterimini kullanarak Next.js'de dinamik bir rota tanımlayabilirsiniz. Örneğin: sayfalar/makale/[slug].js
Bağlantı Yolları
Artık ilk rotanızı tamamladınız. Sanırım sayfaları bu rotalara nasıl bağlayacağınızı soruyorsunuz. Bunu yapmak için 'sonraki/bağlantı'ya ihtiyacınız olacak.
İşte Hakkında sayfasına bir bağlantı içeren bir ana sayfa örneği:
Bağlantıya stil vermek istiyorsanız, aşağıdaki sözdizimini kullanın:
Rotaları Yönlendir
Belirli bir sayfaya yönlendirmeyi zorlamanız gerekirse ne olur? Örneğin, bir düğmeye basıldığında? Bunu 'router.push' kullanarak gerçekleştirebilirsiniz:
SEO
Web uygulamalarındaki sayfalar, HTML gövdesi içindeki verilere ek olarak meta (başlık) öğeleri gerektirir. Bu, bir React Uygulamasında React Helmet adlı ekstra bir gereksinimin yüklenmesini gerektirecektir.
Arama sonuçlarında ve yerleştirmelerde görüntülenecek web sayfalarımıza kolayca meta veriler eklemek için Next'teki next/head'den Head bileşenini kullanabiliriz:
Bileşenler
Sık sık bileşenler veya bir düzen dosyası geliştirmeniz gerekir. Örneğin, gezinme çubuğunu oluşturan bir bileşen. Şimdiye kadar sadece sayfalar klasörünü kullandık. Bileşeniniz bir rota sayfası değilse ne olur?
Kullanıcının localhost/navbar gibi bir sayfaya gitmesini istemezsiniz. Navbar.js bileşenini sayfalar klasörüne yerleştirirseniz, olan budur. durumda ne yapmalısınız?
Tüm 'sayfa olmayan' bileşenlerinizi ayrı bir klasörde saklayın. Çoğu Next.js projesi "bileşenler" takma adını kullanır ve bu klasör projenizin kök klasöründe oluşturulur.
Baş bileşeni
İlk sayfa yüklemesi, sunucu tarafında Next.js tarafından işlenir. Bunu, sayfanızın HTML'sini değiştirerek yapar. Başlık bölümü dahildir.
Next.js Head bileşeni, başlık ve meta gibi başlık bölümü etiketleri vermek için kullanılır. Head bileşeni, bu Layout bileşeni örneğinde kullanılmıştır.
404 sayfası oluştur bulunamadı
Kendi 404 hata sayfanızı yapmak mümkündür. Mesajı özelleştirmek veya kendi sayfa tasarımınızı eklemek isteyebilirsiniz. Sayfalar klasöründe 404.js dosyasını oluşturun.
Bir 404 hatası oluştuğunda, Next.js otomatik olarak bu sayfaya yönlendirilecektir. Kişiselleştirilmiş bir 404 sayfası örneği:
Sunucu tarafından veri çekme
İstemci tarafında veri indirmek yerine, Next.js bir başlangıç veri popülasyonu gerçekleştirmenize izin verir; bu, sayfanın sunucudan önceden doldurulmuş verilerle birlikte gönderilmesi anlamına gelir.
Sunucu tarafı veri alımını uygulamak için iki seçeneğiniz vardır:
- Veriler her istekte getirilmelidir.
- İnşaat süreci boyunca yalnızca bir kez veri alın (statik site)
Her istekte veri getir
getServerSideProps yöntemi, her isteği sunucu tarafında işlemek için kullanılır. Bu işlev, bileşen dosyanızın sonuna eklenebilir. Next.js, bileşen dosyanızda bu işlev varsa, bileşen donanımlarınızı getServerSideProps nesnesiyle otomatik olarak doldurur.
Verileri derleme zamanında getir
getStaticProps yöntemi, derleme sırasında sunucu tarafını oluşturmak için kullanılır. Bu işlev, bileşen dosyanızın sonuna eklenebilir. Bu yöntem sunucu kodunu çalıştırır ve sunucuya bir GET isteği gönderir, ancak projemiz bittiğinde yalnızca bir kez.
Neden Next.js öğrenmelisiniz?
Bunun nedenlerinden biri, Next.js'nin aşağıdakiler için bir ön uç geliştirme araç seti olan React üzerine inşa edilmiş olmasıdır. kullanıcı arayüzleri oluşturma web uygulamaları tasarlamak için en sevdiğim seçimdir.
Ancak Next.js yaptığı işte iyi olmasaydı bu yeterli olmazdı… değil mi?
Peki, tam olarak ne yapıyor?
Bunu anlamak için önce birkaç kavramı tanımlamamız gerekir. Next.js, birçok web geliştiricisinin istemci tarafı web uygulamalarında (tarayıcıda) yaşadığı bir sorunu çözdüğü için popülerlik kazandı. Bu Tek Sayfa Uygulamaları (SPA), kullanıcının sayfayı yeniden yüklemesine ihtiyaç duymadığından ve daha fazla etkileşime izin verdiğinden daha iyi bir deneyime sahipti.
Ancak, bunun gibi bir uygulamadaki malzemenin büyük kısmı yalnızca tarayıcıda gerçekleştirildiğinde görünür hale geldiğinden, web tarayıcıları böyle bir uygulamanın metin içeriğini anlamakta güçlük çekerler.
Sonuç olarak, popülerliklerine rağmen, birçok SPA, Google gibi büyük arama motorlarına büyük ölçüde anonim kaldı. Next.js artık React bileşenlerinin sunucu tarafı oluşturma (SSR) için daha sağlam bir yerleşik mekanizma içeriyor.
Next.js, geliştiricilerin oluşturma işlemi sırasında sunucuda JavaScript kodu oluşturmasına ve kullanıcıya temel, dizine eklenebilir HTML sağlamasına olanak tanır.
Artılar
- Kullanıcı deneyimi için harika
- SEO için harika
- Dinamik gibi davranan süper hızlı statik bir web sitesi oluşturun
- UI ve UX oluşturmada esneklik.
- Birçok geliştirme avantajı
- Büyük topluluk desteği
Eksiler
- Web sitelerinin veya uygulamaların oluşturulması veya geliştirilmesi için belirli bir süre vardır.
- Belirli görevler için Next.js yetersizdir. Geliştiriciler, Node.js araçlarını kullanarak dinamik yollar oluşturabilmelidir.
Sonuç
Gördüğünüz gibi, Next.js, React uygulama geliştirmeyi basitleştirir ve en önemli olana, uygulama mantığınıza ve kullanıcı arayüzünüze odaklanmanıza olanak tanır. Çağdaş, ön uç açısından zengin ve API destekli uygulamalar oluşturmak için gereken her şeyi içerir.
Statik HTML sayfaları oluşturma yeteneği nedeniyle bloglar ve iş web siteleri gibi yalnızca içerik içeren projeler için de uygundur.
Mevcut sürümlerle Next.js, yalnızca yüksek düzeyde geliştirici deneyimi sağlamakla kalmaz, aynı zamanda görsel performansı ve kullanıcı deneyimini artırmak için araçlar sağlayarak bu çerçeve için parlak bir gelecek sağlar.
Yorum bırak