Altın Konu Next.js'de Dinamik Rotalar Nasıl Oluşturulur?

[ByMoDuS]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

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

Dinamik rotalar, bir URL'de özel parametreler kullanmanıza olanak tanıyan sayfalardır. Özellikle dinamik içerik için sayfalar oluştururken faydalıdırlar. Bir blog için, blog yazılarının başlıklarına göre URL'ler oluşturmak üzere dinamik bir rota kullanabilirsiniz. Bu yaklaşım, her yazı için bir sayfa bileşeni oluşturmaktan daha iyidir. Next.js'de iki fonksiyon tanımlayarak dinamik rotalar oluşturabilirsiniz: getStaticProps ve getStaticPaths.

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 slug kullanabilirsiniz. Yani, bir yazı dynamic-routes-nextjs slug'ına sahipse, ortaya çıkan URL https://turkmmo.com/dynamic-routes-nextjs olacaktır. pages klasöründe [slug].js adında yeni bir dosya oluşturun ve gönderi verilerini prop olarak alan Post bileşenini oluşturun.​

const Post = ({ postData }) => {
  return <div>{/* content */}</div>;
};

Gönderi verilerini Post'a aktarmanın farklı yolları vardır. Seçeceğiniz yöntem, sayfayı nasıl oluşturmak istediğinize bağlıdır. Verileri derleme sırasında almak için getStaticProps() ve istek üzerine almak için getServerSideProps() yöntemlerini kullanın. Blog gönderileri çok sık değişmez ve bunları derleme zamanında almak yeterlidir.
​

Bu nedenle, Post bileşenini getStaticProps() işlevini 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 fonksiyonu sayfada işlenen yazı verilerini oluşturur. getStaticPaths fonksiyonu tarafından oluşturulan yollardaki slug'ı kullanır. getStaticPaths() işlevi, önceden oluşturulması gereken sayfaların yollarını döndürür. ​

Bunu dahil etmek için Post bileşenini değiştirin:​

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

getStaticPaths'in bu uygulaması, işlenmesi gereken tüm gönderileri alır ve slug'ları params olarak döndürür.

Toplamda, [slug].js şu şekilde 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şlevlerini birlikte kullanmanız gerekir. getStaticPaths() fonksiyonu dinamik rotaları oluşturmalıdır. getStaticProps() ise her rotada işlenen verileri alır. Next.js'de iç içe bir rota oluşturmak için pages klasörünün 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ı /pages/posts dosyasının içine kaydedin. Rotayı oluşturduktan sonra, useRouter() React kancasını kullanarak dinamik rotadan URL parametresini alabilirsiniz. ​

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

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 slug'ını görüntüleyecektir.Next.js kullanarak derleme zamanında veri alabilir ve dinamik rotalar oluşturabilirsiniz. Bu bilgiyi, bir öğe listesinden sayfaları önceden işlemek için kullanabilirsiniz. Her istekte veri almak istiyorsanız getStaticProps yerine getServerSideProps kullanın. Bu yaklaşımın daha yavaş olduğunu unutmayın; bunu yalnızca düzenli olarak değişen verileri tüketirken kullanmalısınız.​

 

[EJDER]

Paylaşım için teşekkürler.

 

[NaimSazak]

Paylaşım için Teşekkürler

 

[Replicant]

Paylaşım için teşekkürler.

 

[ByMoDuS]

Değerli yorumlarınız için teşekkür ediyorum.