Next/Router Türkçe kılavuz.

Öncelikler herkese merhaba. Elimden geldiğince Next Js’nin en önemli konularından olan Router hook kavramını dilim döndüğünce açıklamaya çalışacağım.

Client side rendering
Normal şartlarda React ile geliştirilen projeler siteye giriş yapıldığında tarayıcı bir adet HTML dosyası indirir. İndirilen bu HTML dosyası genelde ilk olarak beyaz bir sayfadır içerik daha sonradan entegre edilir (bu geliştirilen sistem ile ilgilidir. Eski teknolojiler kullanılarak geliştirilen siteler otomatik olarak html dosyasını indirebilir. ) JavaScript çalıştıktan sonra uygulamamız kullanıma hazır hale gelir ve kullanıcılar geliştirdiğiniz sistemde içeriği görebilir.

Server side rendering,
Server side render işleminde ise çok basit bir şekilde içerik sunucuda oluşturulur ve böylece tarayıcımız hali hazırda oluşturulmuş HTML içeriği olan bir sayfayı indirir bu sayede kullanıcılar sayfaya giriş yaptığı zaman beyaz ekran görmezler otomatik olarak oluşturulmuş HTML içeriğini görürler. Geliştiriciler eğer daha kompleks sistemler geliştirilmek isterse bu oluşturulan HTML içerikleri cash yöntemi ile sunucu içinde tutulup saniyede 1 render alacak şekilde ayarlamalar yapılabilir. Bu sayede o an uygulamaya giren ve aynı path bilgisi içinde sitede dolaşan kullanıcılara bu oluşturulan index iletilerek aynı içerikleri görmeleri sağlanabilir. Dediğim gibi çok kompleks bir yapı olduğu için bu konu hakkında pek kafa karışıklığına rol açmak istemiyorum.

HAZIRSANIZ BAŞLAYALIM

Öncelikle bilmemiz gereken bir şey var .

useRouter bir hook olduğundan dolayı classlar ile kullanılamaz !

En basit proje yapısı yukarıda gördüğünüz gibi .next,pages,public,styles gibi gibi klasörlerden oluşur (klasör sayısı daha fazla yada daha az olabilir bu tamamen oluşturduğunuz projeye göre değişir )bizim için şuan görselde görülen klasörler arasında en önemli olan klasör pages klasörü biz burada dinamik veya statik olarak sayfalama işlemlerimizi gerçekleştireceğiz.

Client-side route

Next.js yönlendiricisi, tek sayfalık bir uygulamaya benzer şekilde, sayfalar arasında istemci tarafı rota geçişleri yapmanıza olanak tanır. Yani burada normal bir link ile yönlendirme yapıyormuşuz gibi düşünebiliriz.

Öncelikler React tarafından geliştirilen ve basit bir import ile tüm bu işlemleri yapmamızı sağlayan Link componentetimizi import etmemiz gerekiyor. .Bunun için fonksiyonumuzu yazdım olduğumuz .js uzantılı dosyamızın üst kısmına ekte görünen satırı yazmamız yeterli.

Örnek olarak hazırladığım projeyi oluştururken bir altta kısma eklediğim npx komutu kullandım eğer daha önce bilginiz var ise projeyi bu sayede kendiniz oluşturabilirsiniz eğer proje oluşturmadan hazır olan bir proje üzerinden çalışmak isterseniz anlatımda kullandığım projeyi Buraya Tıklayarak indirip kullanabilirsiniz.

npx create-next-app@latest

Hepmizin bildiği gibi Next.js kendine has bir index tasarımı ile ilk çalışmada basit bit proje oluşturuluyor. Ben bu index sayfamızda biraz değişiklik uyguladım.
Proje ilk açıldığında karşımıza bu şekilde bir sayfa çıkacak.

Şimdi kurmak istediğimiz yapı şu şekilde olsun. Web sitemize girmek isteyen bir kullanıcıya söz ve resimler göstermek istediğimizi düşünelim.

Resim göstermek için ; http://localhost:3000/pictures
Text göstermek için ; http://localhost:3000/texts

Kullanıcıların bu url adreslerine ulaşması gerekiyor.
Şuan biz client-side route öğrendiğimiz için burada sadece Link yöntemini kullanacağız .

Yukarıda görmüş olduğunuz …için tıklayınız. Kısımlarını oluşturalım buraya tıklandığı zaman istenen linke kullanıcıyı ulaştırmamız gerekiyor.

Görselde gördüğünüz gibi daha önce import Ettiğimiz Link bileşenini kullandık ve gitmek istediğimiz path’in bilgilerini verdik. Aslında basitçe hmtl etiketi olan <a> <a/> etiketi gibi.

hrefHer biri bilinen bir sayfaya bir yol (rota ) eşler :
Mesela Texts kısmına gitmek isteyelim ana sayfamızda bulunan Textler için tıklayınız kısmına tıklayalım karşımızda şu şekil bir sayfa getirecek nexttjs.
Aynı şekilde Resimler için tıklayınız kısmına tıklayınca aşağıda bulunan ikinci sayfa yapısına ulaşacağız. Konumuz css olmadığı için içeriklerin design kısmına hiç girmeden lütfen bu durumu görmezden gelin :)

İstemci tarafında gezinme, sayfa geçişinin , tarayıcı tarafından yapılan varsayılan gezinmeden daha hızlı olan JavaScript kullanılarak gerçekleştiği anlamına gelir. Şimdi beraber javascript kullanarak bu route işlemin nasıl çalıştığını kanıtlayalım.

Şimdi Ana sayfamızda geliştirici konsolumuzu açalım daha sonra ,
Elements kısmında <html></html> etiketini seçerek styles kısmına arka plan rengi ayarlayalım .
backgraund-color:yellow;

Gördüğünüz gibi tasarımımızın arka planı tamamen sarı renk oldu. Şimdi ana sayfamızda bulunan resimler için tıklayınız yada Textler için tıklayınız kısmına tıklayarak nasıl bir sonuç elde edeceğimizi görelim.

Gördüğünüz gibi içerik değişti fakat arka plan rengi değişmedi.Bunun sebebi Nextjs ‘nin tarayıcıya tam sayfa yükleme yapılmamasıdır.
Eğer;
<Link href="…"> yerine <a href="…"> kullansaydık burada tam bir yükleme yapılırdı yani AnaSayfa’dan Text kısmına geçmek isteseydik burada arka planımız sarı kalmazdı. İçerik baştan aşağı yenileneceği için arka plan rengi beyaz olurdu yani bizim uyguladığımız backgraund-color:yellow; css komutu kaybolacaktı.

Next.js otomatik olarak kod bölme yapar, böylece her sayfa yalnızca o sayfa için gerekli olan içeriği yükler. Bu, ana sayfa oluşturulduğunda, diğer sayfaların kodunun başlangıçta sunulmadığı anlamına gelir. Yani yüzlerce sayfanız olsa bile ana sayfanın hızlı yüklenmesini sağlar.

Yalnızca istediğiniz sayfanın kodunu yüklemek, sayfaların izole olması anlamına da gelir uygulamada bulunan belirli bir sayfa hata verirse, uygulamanın geri kalanı çalışmaya devam eder.
Ek olarak Nextjs genel yapısı olarak Link bileşeni kullanıldığında browser’s viewport alanında bağlantılı sayfaların otomatik olarak içerikleri oluşturulur. Kullanıcılar bağlantıya tıkladığınız zaman, hedef sayfanın kodu zaten arka planda yüklenmiş olduğu için sayfa geçişi neredeyse anında gerçekleşecek!

Özet

Nextjs otomatik olarak, Client-Side Navigation olarak oluşturduğumuz uygulamayı optimize eder ve en performanslı hale dönüştürür.

Öncelikle yapılması gereken routes olarak oluşturulacak sayfalar nextjs klasör yapısı altında “pages” klasörü altında oluşturulur.

Yönlendirmeleri yaparken “Link” componentini kullanılmalıdır.

Not:

Eğer bir class atması yapılması gerekiyorsa bunu Link componentine bağlamak önerilmez bunun için Link compenentinin içine <a></a> etiketi kullanarak class ataması yapmak önerilir.

<Link href=”/”>
 <a className=”foo” target=”_blank” rel=”noopener noreferrer”> 
     Hello World 
 </a> 
</Link>

Dynamic Links

Şimdi dinamik sayfalama işlemlerine hafiften bir giriş yapalım. Öncelikle page klasörümüzün içine
[name] — -> isminde bir klasör oluşturalım.
daha sonra bu klasör içine [slug].js adında bir sayfa oluşturalım.

Şimdi görselde gördüğünüz gibi [] köşeli parantezler arasında name olarak bir klasör oluşturduk. Bu isim istediğiniz herhangi bir isme sahip olabilir ben name olarak oluşturdum. Daha sonra oluşturduğumuz klasör yada sayfanın çalışma mantığını öğrenmek için söyle bir yöntem izleyelim.

http://localhost:3000
Linkine giriş yapmış olalım. Şimdi örnek olarak Medium profilimizi ele alalım. Medium profilleri her bir hesap için tek bir tasarıma sahip sadece içerik değişiyor yani kullanıcı adı ,yazmış olduğu yazılar gibi gibi… ama tasarım tamamen sabit.
http://localhost:3001/abc/a-comment linkine gidelim. Karşımıza gelen tasarım görselde görüldüğü gibi olacaktır. Aynı şekilde başka bir linke gitmek isteyelim.
http://localhost:3001/abc/a-comment
http://localhost:3001/abcd/b-comment
http://localhost:3001/abcde/test

Gördüğünüz gibi bütün tasarımlar tamamen aynı sadece aktif olan path kısmı değişiyor yani içerik değişiyor. Bu şekilde sayfalarımızı öğrendiğimiz gibi dinamik olarak geliştirebiliriz.

Dynamic Routes

Şimdi gelelim en önemli konumuza. Çok büyük ve kompleks uygulamalarda genelde bu yöntem kullanılır örnek olarak bir E-Ticaret sitesi yapmaya başladığımızı düşünelim. Elimizde binlerce hatta milyonlarca ürün olacak bu ürünler için tek tek sayfalar oluşturmak oldukça saçma ve yorucu olacaktır. Bir üst konuda anlattığım gibi tek bir ürün görüntüleme sayfasına sahip olup ürün gösterme işlemlerini dinamik olarak yapmak daha kolay olacaktır değil mi?

Şimdi konuyu anlatmaya başlamadan önce bahsetmem gereken önemli bir konu var data fetch etme data çekme artık nasıl isimlendirirseniz :) Bu konuları bu sırayla anlatmanın daha kolay ve anlaşılır olacağını düşündüğüm için böyle bir sıralama seçtim. Hemen başlayalım.

İlk olarak bilmemiz gereken Pre-rendering (Ön İşleme) kavramı ,varsayılan olarak, Next.js her sayfayı önceden işler. Bu, Next.js’nin her şeyi client-side JavaScript ile yapmak yerine her sayfa için önceden HTML oluşturduğu anlamına gelir bunun sonucu olarak daha iyi performans ve SEO ile sonuçlar vaat eder

. Oluşturulan her HTML, o sayfa için gerekli olan minimum JavaScript koduyla oluşturulur . Bir sayfa tarayıcı tarafından yüklendiğinde, JavaScript kodu çalışır ve sayfayı tamamen etkileşimli hale getirir. (Bu işleme hidrasyon denir.)

Next.js’nin iki ön işleme biçimi vardır:

Static Generation Önceden oluşturulmuş HTML daha sonra her istekte yeniden kullanılır ..
Server-side Rendering her istekte HTML oluşturan ön işleme yöntemidir.

Oluşturduğumuz sistemler sadece Static Generation yada Server-side Rendering olarak çalışmaz bu işlemleri bir arada kullanabiliriz. Daha da önemlisi, Next.js, her sayfa için hangi ön işleme formunun kullanılacağını seçmenize izin verir. Çoğu sayfa için Statik Oluşturma’yı ve diğerleri için Sunucu Tarafı İşleme’yi kullanarak bir “karma” Next.js uygulaması oluşturabilirsiniz.

Static Generation veya Server-side Rendering ne zaman kullanılır ?

Static Generation kullanılan örnek sayfalar.

• Blog gönderileri
• E-ticaret ürün listelemeleri
• Yardım ve iletişim gibi bilgileri içeren sayfalar.

Kendinize şunu sormalısınız: “Bu sayfayı bir kullanıcının isteğinden önce oluşturulmuş olması gerekiyor mu ? “ Cevabınız evet ise Static Generation seçmelisiniz .Öte yandan, kullanıcının isteğinden önce bir sayfayı önceden oluşturamıyorsanız Statik Oluşturma iyi bir fikir değildir . Belki sayfanız sık güncellenen verileri gösteriyor ve sayfa içeriği her istekte değişiyor.Bu durumda Server-side Rendering kullanabilirsiniz . Daha yavaş olacak, ancak önceden oluşturulmuş sayfa her zaman güncel olacaktır. Veya ön işlemeyi atlayabilir ve sık güncellenen verileri doldurmak için istemci tarafı JavaScript’i kullanabilirsiniz.

Static Generation data kullanarak yada data kullanmadan yapılabilir.
Şimdiye kadar oluşturduğumuz tüm sayfalar harici veri alınmasını gerektirmiyor. Uygulama üretim için oluşturulduğunda bu sayfalar otomatik olarak statik olarak oluşturulur.Ancak, bazı sayfalar için, önce bazı harici verileri getirmeden HTML’yi oluşturamayabilirsiniz. Belki dosya sistemine erişmeniz, harici API getirmeniz veya derleme zamanında veritabanınızı sorgulamanız gerekir.

Data kullanarak Static Generation oluşturma "getStaticProps"

getStaticProps’u ne zaman kullanmalıyım?

• Sayfayı oluşturmak için gereken veriler, bir kullanıcının isteğinden önce oluşturması gerekiyor ise
• Veriler headless CMS’den geliyorsa
• Veriler herkese açık olarak önbelleğe alınabilirse
• Sayfa önceden oluşturulmalı (SEO için) ve çok hızlı olmalıdır — her ikisi de performans için bir CDN tarafından önbelleğe alınabilen HTML and JSON dosyası oluşturur.

Incremental Static Regeneration ile birleştirildiğinde, eski sayfa yeniden doğrulanırken ve yeni sayfa tarayıcıya sunulurken getStaticProps arka planda çalışır. Bilmemiz gereken diğer bir durum ise getStaticProps derleme zamanında çalıştığından, statik HTML oluşturduğundan gelen isteğe (sorgu(query) parametreleri veya HTTP headers) erişimi yoktur.

Esasen, getStaticPropsNext.js'ye şunu söylemenizi sağlar: "Kardeş, bu sayfanın bazı veri bağımlılıkları var - bu yüzden bu sayfayı derleme zamanında önceden oluştururken bunları dikkate al"

Not : Geliştirme modunda yani build edilmemiş bir projede , getStaticProps her istekte çalışır.

Şimdi öncelikle pages klasörünü kullanarak nasıl bir routing yapacağımızı kararlaştıralım farz edelim ki elimizde basit bir blog sistemi var ve bu blog sistemi kullanıcıların yorumlarını da içeriyor.
Şimdi Elimizde birden fazla post olabilir yorumlar birden fazla olabilir. Bu gibi durumlarda bu yöntem tercih edilir.

Öncelikle şunu belirtmek isterim [….] yada […..].js gibi dosyalar routing işleminde dinamik yapıyı oluşturmak için kullanılır yani adres satırında ne yazarsa yazsın önemli değil nextjs bu dosyayı yada js dosyasını adres satırından gelen bilgilere göre render eder.

→İlk olarak pages klasörünün içine bir adet post adında bir klasör oluşturalım.
→ Daha sonra oluşturduğumuz bu post kalsörünün altına [id] adında başka bir klasör oluşturalım.
→[id] klasörünün hemen altına ise [comment].js adında başka bir js dosyası ve index.js adında başka bir js dosyası oluşturalım .

Proje yapımız şu şekilde olacak.

Github reposu için tıklayın.

Daha sonra projemizin içinde components adı verilen bir kalsör oluşturalım bu bizim içeriklerimizi(Menu,Slider,Navbar gibi ) component component oluşturduğumuz klasörümüz olsun örnek olarak bir header dosyamız olsun içinde.

Öncelikle header içeriğimizi oluşturalım. Sadece linkleme işlemlerimizi yapmamız gerekiyor.

Şimdi nasıl bir yapı izleyeceğimizi yukarıda bulunan kod görselini inleyerek beraber daha iyi kavrayalım.

İlk Paylaşıma Tıkladığımız zaman bizi →post/first
İkinci Paylaşıma tıkladığımız zaman bizi →post/second
Adreslerine yönlendiriyor. Dikkat ederseniz bizim post klasörümüz altında bulunan [id] isminde bulunan bir klasörümüz vardı . işte biz burada post/….
Burada bulunan …. yerine ne yazarsak yazalım otomatik olarak o klasör altında bulunan index.js dosyasını render edecek ve kullanıcıya ulaştıracak.

Ana sayfamızda ufak bir düzenleme yaptım (sadece bir Link compenenti ekleyip href olarak “/post” adresini verdim.) Aktif Pat Adresimize dikkat edin.
localhost:3000

Şimdi ROUTER İŞLEMLERİ İÇİN TIKLAYIN linkine tıklayalım.

localhost:3000/post url’sine eriştik şimdi. localhost:3000/post/….
… kısmına ne yazarsak yazalım alacağımız çıktı için javascript dosyası düzenlemesi yapalım. bunun için [id] klasörünün içined bulunan index.js dosyasını düzenlememiz yeterli olacaktır.

Daha öncede anlattığım gibi post/[id] olarak ayarladığımız router yapımızda id yerine ne gelirse gelsin bu sayfa gözükecek. biz gelen id değerini ekrana yazdırmak isteyelim. Bunun için Router hookunu kullanmamız yeterli olacaktır. Elimden geldiğince genel olarak bahsedeceğim ama mutlaka dökümantasyonu incelemeniz gerekiyor. Döküman için tıklayın.

router.query → teknik olarak açıklamaktansa örnek olarak açıklamak daha mantıklı geliyor bana şimdi bizim router yapımız nasıldı onu hatırlayalım post/[id] burada id ismi önemli bunu aklımızda tutualım. Öncelikle bu yapının bize ne döndürdüğünü ele alalım çok basit bir şekilde console.log() yaparak bize ne döndürdüğüne bakalım.

Şimdi tarayıcımıza localhost:3000/post/first yazalım ve console’dan gelen çıktıyı inceleyim. Gördüğünüz gibi id adında bir değişkenimiz var ve bu bizim için first yazısını tutuyor.

Başka bir sekmeye ise localhost:3000/post/test_ediyorum yazalım ve console’dan gelen çıktıyı tekrar inceleyim.

Gördüğünüz gibi adres satırında post’dan sonra ne gelirse gelsin o değeri döndürüyor bize.

Şimdi burada id değerini tutan bir değişken oluşturduk. Bunu tasarımımızda istediğimiz yere yazabiliriz. Kodumun şu şekilde olsun. Biz sayfamızın orta kısmında bir başlık gibi yazmak isteyelim .

Url kısmına localost:3000/post/first yazarak arama yapalım .

Url kısmına localost:3000/post/test_ediyoruz yazarak arama yapalım .

Sadece string olmak zorunda değil istediğiniz her şeyi yazabilirsiniz.

Alacağımız id ‘den comment sayfasına ulaşmak istiyorum ve ekranda gelen comment neyse ona göre çıktı vermek istiyoruz. Kodumuz şu şekil olacak.

Url kısmına localost:3000/post/213123412412/first-comment yazarak arama yapalım .

Şimdi oluşturduğumuz bu veriye tekrar dinamik olarak yorum ekleyelim. İstediğimiz şey tekrar dinamik olarak sayfalandırma yapmak [comment].js adında bir dosya oluşturmuştuk hatırladığınız üzere. Şimdi burada söyle bir yöntem izleyeceğiz.

Ek olarak şundan da bahsetmek istiyorum, ürünleri listelenmesi kısımında filtreleme işlemleri kullanıyor bir çok web sitesi . Bu filtreler genelde url üzerinde değişiklikler yapılarak fetch etme gibi işlemlerden geçtikten sonra ekrana yansıtıyor. Bu gibi işlemler için en çok tercih edilen yöntem budur .Bir sonraki yazımda bundan bahsedeceğim.