BLOG
Next js routing
Next.js     26.08.2021 14:33:54

Next.js'de Routing nasıl işler

Next.js'de file based roting dediğimiz dosya yolları ile sayfalar arası geçiş mantığı kullanılır,

Bunun pek çok avantajı gibi dezavantajı'da vardır.


Basit bir örnek yapalım.

Öncelikle pages/index.js'e geliyoruz ve içindeki kodları temizliyoruz, sonrasında içine h1 etiketi ile herhangi bir yazı atarak çalışıp çalışmadığını test edelim.





Evet, şimdi ise file based routing ile ilgili bir örnek yapalım


Projemizdeki pages klasörüne about.js adında bir dosya oluşturalım



eğer visual studio code programınızda ES7 React/Redux/GraphQL/React-Native snippets adlı eklenti var ise about.js in içine girip 'rfce' kısayolu ile 'react function' iskeletinizi oluşturabilirsiniz

Sonrasında içine h1 etilketi ile bir yazı yazalım ve test edelim



Sonrasında localhost:3000/about yazarak about sayfasına gidelim ve çalışıyor mu bakalım



Şimdi ise Anasayfamızdan next.js'in kütüphanesindeki Link componentini kullanarak About sayfamıza yönlendirmeyi yapacağız.


index.js'e giderek Link componentini import edelim

import Link from 'next/link' yazarak import edelim



Daha sonra Link etiketini açalım ve onun içine a etiketi açarak işe başlayalım



Sonrasında Link etiketine href özelliği verelim.href="/about"



Bakalım tıkladığımızda About sayfasına gidecek mi...



about sayfasına git yazısına tıklıyoruz,



Bu yöntem ile routinglerinizi yapabilirsiniz.


Diğer blog yazılarımız :Blog


Diğer Next.js ile alakalı Blog yazılarımız :Next.js