Dinamik rotalar, bir URL'de özel parametreler kullanmanıza izin veren sayfalardır. Dinamik içerik için sayfalar oluştururken özellikle faydalıdırlar.
Bir blog için, blog gönderilerinin başlıklarına dayalı olarak URL'ler oluşturmak için dinamik bir yol kullanabilirsiniz. Bu yaklaşım, her gönderi için bir sayfa bileşeni oluşturmaktan daha iyidir.
Next.js'de iki işlevi tanımlayarak dinamik rotalar oluşturabilirsiniz: getStaticProps ve getStaticPaths.
Next.js'de Dinamik Rota Oluşturma
Next.js'de dinamik bir rota oluşturmak için sayfaya parantez ekleyin. Örneğin, [params].js, [slug].js veya [id].js.
Bir blog için, dinamik rota için bir bilgi kullanabilirsiniz. Yani, eğer bir gönderide sümüklü böcek varsa dinamik rotalar sonraki js, sonuç URL'si şöyle olur: https://example.com/dynamic-routes-nextjs.
Sayfalar klasöründe, [slug].js adlı yeni bir dosya oluşturun ve gönderi verilerini prop olarak alan Post bileşenini oluşturun.
sabit Gönderi = ({ postData }) => {
geri dönmek <div>{/* içerik */}</div>;
};
Gönderi verilerini Gönderiye aktarmanın farklı yolları vardır. Seçtiğiniz yöntem, sayfayı nasıl oluşturmak istediğinize bağlıdır. Oluşturma süresi boyunca verileri almak için getStaticProps()'u kullanın ve istek üzerine getirmek için getServerSideProps()'u kullanın.
Posta Verilerini Almak için getStaticProps'u Kullanma
Blog gönderileri eskisi kadar sık değişmez ve bunları derleme zamanında almak yeterlidir. Bu nedenle, Post bileşenini getStaticProps() öğesini içerecek şekilde değiştirin.
içe aktarmak { getSinglePost } itibaren "../../utils/yazılar";sabit Gönderi = ({ içerik }) => {
geri dönmek <div>{/* içerik */}</div>;
};
ihracatsabit getStaticProps = zaman uyumsuz ({ parametreler }) => {
sabit gönderi = beklemek getSinglePost (params.slug);
geri dönmek {
aksesuarlar: { ...yazı },
};
};
getStaticProps işlevi, sayfada işlenen gönderi verilerini oluşturur. GetStaticPaths işlevi tarafından oluşturulan yollardaki bilgileri kullanır.
Yolları Getirmek için getStaticPaths'i Kullanma
getStaticPaths() işlevi, önceden işlenmesi gereken sayfaların yollarını döndürür. Eklemek için Post bileşenini değiştirin:
ihracatsabit getStaticPaths = zaman uyumsuz () => {
sabit yollar = getAllPosts().map(({ slug }) => ({ parametreler: { sülük } }));
geri dönmek {
yollar,
geri çekilmek: YANLIŞ,
};
};
getStaticPaths'in bu uygulaması, oluşturulması gereken tüm gönderileri getirir ve bilgi notlarını param olarak döndürür.
Toplamda, [slug].js şöyle görünecektir:
içe aktarmak { getAllPosts, getSinglePost } itibaren "../../utils/yazılar";sabit Gönderi = ({ içerik }) => {
geri dönmek <div>{içerik}</div>;
};ihracatsabit getStaticPaths = zaman uyumsuz () => {
sabit yollar = getAllPosts().map(({ slug }) => ({ parametreler: { sülük } }));
geri dönmek {
yollar,
geri çekilmek: YANLIŞ,
};
};ihracatsabit getStaticProps = zaman uyumsuz ({ parametreler }) => {
sabit gönderi = beklemek getSinglePost (params.slug);geri dönmek {
aksesuarlar: { ...yazı },
};
};
ihracatvarsayılan Postalamak;
Dinamik bir rota oluşturmak için getStaticProps() ve getStaticPaths() öğelerini birlikte kullanmalısınız. getStaticPaths() işlevi dinamik yolları oluşturmalı, getStaticProps() ise her rotada işlenen verileri getirmelidir.
Next.js'de İç İçe Dinamik Rotalar Oluşturma
Next.js'de iç içe rota oluşturmak için, sayfalar klasörü içinde yeni bir klasör oluşturmanız ve dinamik rotayı bunun içine kaydetmeniz gerekir.
Örneğin, /pages/posts/dynamic-routes-nextjs oluşturmak için [slug].js dosyasını içine kaydedin. /pages/posts.
Dinamik Rotalardan URL Parametrelerine Erişme
Rotayı oluşturduktan sonra, URL parametresi useRouter() kullanarak dinamik rotadan Tepki kancası.
Pages/[slug].js için, şu şekilde bilgi alın:
içe aktarmak {Yönlendiriciyi kullan} itibaren "sonraki/yönlendirici"sabit Gönderi = () => {
sabit yönlendirici = useRouter()
sabit { bilgi } = yönlendirici.query
geri dönmek <P>Gönderi: {slug}</P>
}
ihracatvarsayılan Postalamak
Bu, gönderinin bilgisini gösterecektir.
getServerSideProps ile Dinamik Yönlendirme
Next.js'yi kullanarak derleme zamanında veri alabilir ve dinamik rotalar oluşturabilirsiniz. Bu bilgiyi, bir öğe listesindeki sayfaları önceden oluşturmak için kullanabilirsiniz.
Her istekte veri almak istiyorsanız, getStaticProps yerine getServerSideProps kullanın. Bu yaklaşımın daha yavaş olduğunu unutmayın; sadece düzenli olarak değişen verileri tüketirken kullanmalısınız.