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.

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

Ş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