Next.js'de Dinamik Rotalar Nasıl Oluşturulur

Dinamik yollar, bir URL'de özel parametreleri 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 göre 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şlev tanımlayarak dinamik rotalar oluşturabilirsiniz: getStaticProps ve getStaticPaths.

GÜNÜN YAPILAN VİDEOSU

Next.js'de Dinamik Rota Oluşturma

Next.js'de dinamik bir rota oluşturmak için bir 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-sonrakijs , sonuç URL'si https://example.com/dynamic-routes-nextjs olacaktır.

Sayfalar klasöründe, [slug].js adında yeni bir dosya oluşturun ve gönderi verilerini prop olarak alan Gönderi bileşenini oluşturun.

youtube kanalına sosyal medya linkleri nasıl eklenir

const Post = ({ postData }) => { 
  return <div>{/* content */}</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. Verileri derleme sırasında almak için getStaticProps()'u ve istek üzerine getirmek için getServerSideProps()'u kullanın.

Gönderi Verilerini Getirmek için getStaticProps'u Kullanma

Blog gönderileri sık sık değişmez ve bunları derleme zamanında almak yeterlidir. Bu nedenle, Post bileşenini getStaticProps() içerecek şekilde değiştirin.

import { getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{/* content */}</div>; 
}; 
  
export const getStaticProps = async ({ params }) => { 
    const post = await getSinglePost(params.slug); 
    return { 
      props: { ...post }, 
    }; 
  };

getStaticProps işlevi, sayfada işlenen gönderi verilerini oluşturur. getStaticPaths işlevi tarafından oluşturulan yollardaki bilgi parçasını 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 Gönderi bileşenini değiştirin:

çok oyunculu minecraft dünyası nasıl yapılır

export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
};

Bu getStaticPaths uygulaması, oluşturulması gereken tüm gönderileri getirir ve sümüklü böcekleri params olarak döndürür.

Toplamda, [slug].js şöyle görünecektir:

import { getAllPosts, getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{content}</div>; 
}; 
  
export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export const getStaticProps = async ({ params }) => { 
  const post = await getSinglePost(params.slug); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export default Post;

Dinamik bir rota oluşturmak için getStaticProps() ve getStaticPaths()'i birlikte kullanmanız gerekir. getStaticPaths() işlevi dinamik yolları oluştururken, getStaticProps() işlevi her bir rotada oluşturulan verileri getirir.

Next.js'de İç İçe Dinamik Rotalar Oluşturma

Next.js'de iç içe bir rota oluşturmak için, sayfalar klasörünün içinde yeni bir klasör oluşturmanız ve içindeki dinamik rotayı kaydetmeniz gerekir.

Örneğin, /pages/posts/dynamic-routes-nextjs oluşturmak için [slug].js dosyasını içine kaydedin /sayfalar/yazılar.

Dinamik Rotalardan URL Parametrelerine Erişme

Rotayı oluşturduktan sonra, URL parametresi userRouter() kullanarak dinamik rotadan Tepki kancası .

Sayfalar/[slug].js için slug'u şu şekilde alın:

iphone için en iyi müzik yapma uygulamaları

import { useRouter } from 'next/router' 
  
const Post = () => { 
  const router = useRouter() 
  const { slug } = router.query 
  return <p>Post: {slug}</p> 
} 
  
export default Post

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 listesinden 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ğuna dikkat edin; sadece düzenli olarak değişen verileri tüketirken kullanmalısınız.