Next.Js Dynamic Routing
Merhabalar, İyi Hafta sonları,
Next JS ile ilgili bir sorum var fakat internette hep aynı örnekler ve
karşılığını bulamadığım bir yapı var.
Next Js 'i app directory olarak kullanıyorum.
Tek bir page.js dosyam var. link ne olursa olsun istek buraya düşsün istiyorum.
Örnek ;
1-) /
2-) /women
3-) /women/skirts
4-) /tr/kadin/ust-giyim
Amacım bunları tek bir page kısmına düşürmek.
** Ekstra bir middleware yazmadan yapmam gerekiyor.
Next.js'te sayfaların nasıl oluşturulacağı ve yönlendirileceği konusunda esnek bir yapı vardır. Eğer tek bir sayfa dosyasında tüm bu yolları yönetmek istiyorsanız, dinamik yolları kullanabilirsin
Öncelikle, pages dizininde [[...slug]].js adında bir dosya oluşturun. Bu dosyanın adında üç nokta içeren bir kısım, dinamik olarak gelen yolları temsil eder.
[[...slug]].js içeriği şu şekilde olabilir:
// pages/[[...slug]].js
import { useRouter } from 'next/router';
const DynamicPage = () => {
const router = useRouter();
const { slug } = router.query;
// slug parametresini kullanarak istediğiniz işlemleri yapabilirsiniz
// örneğin slug[0] ile ana kategori, slug[1] ile alt kategori alabilirsiniz
return (
<div>
<h1>Dynamic Page</h1>
<p>Slug: {slug}</p>
</div>
);
};
export default DynamicPage;
Bu sayfa, dinamik olarak gelen yolu alır ve bu yolu kullanarak istediğiniz işlemleri gerçekleştirebilirsiniz.
Örnek URL'ler:
//women/women/skirts/tr/kadin/ust-giyim
Bu URL'leri kullanarak sayfanıza ulaştığınızda, router.query.slug içinde ilgili yol bilgisini alabilir ve istediğiniz işlemleri gerçekleştirebilirsiniz.
Bu şekilde, tek bir sayfa dosyasında dinamik yolları yönetmiş olursunuz ve herhangi bir ekstra middleware kullanmanıza gerek kalmaz.