Next.js, React tabanlı bir framework olarak, dosya tabanlı yönlendirme sistemi sunar. Dinamik route sayesinde URL yapınızı esnek hale getirebilir ve URL parametreleri aracılığıyla farklı içerikler gösterebilirsiniz.

1. Dinamik Route Dosyası Oluşturma

Dinamik route dosyaları köşeli parantez "[param]" kullanılarak oluşturulur. Örneğin, kullanıcı profilleri için pages/users/[id].js dosyası oluşturabilirsiniz.

pages/users/[id].js

import { useRouter } from 'next/router';

export default function UserProfile() {
  const router = useRouter();
  const { id } = router.query;

  return (
    

      
Kullanıcı Profili
      
Kullanıcı ID: {id}
    
  );
}

2. Dinamik Parametreyi Kullanmak

useRouter hook'u ile URL'deki dinamik parametreye (bu örnekte id) ulaşılır ve sayfa içerisindeki render işlemlerine entegre edilir.

3. Çalıştırma ve Test

• Uygulamanızı başlatın: npm run dev veya yarn dev
• Tarayıcıda http://localhost:3000/users/123 adresine gidin.
• Sayfada "Kullanıcı ID: 123" yazısını göreceksiniz.

4. getStaticPaths ve getStaticProps ile Statik Dinamik Route

Eğer önceden belirli ID'lere ait sayfalar oluşturmak istiyorsanız, getStaticPaths ve getStaticProps kullanabilirsiniz.

export async function getStaticPaths() {
  // Örnek id listesi
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
  ];

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { id } = params;

  // Burada API'den veri çekilebilir
  return {
    props: { id },
  };
}

export default function UserProfile({ id }) {
  return (
    

      
Kullanıcı Profili
      
Kullanıcı ID (Statik): {id}
    
  );
}

Bu yapıyla Next.js build sırasında belirtilen ID'ler için statik sayfalar oluşturur.

Sonuç

Next.js'de dinamik route oluşturmak oldukça basittir. Dosya isimlendirmesiyle URL parametrelerini yakalayabilir ve sayfa içeriğinizi parametrelere bağlı olarak değiştirebilirsiniz. Gelişmiş kullanım için getStaticPaths ve getStaticProps fonksiyonları ile statik sayfa üretimi yapabilirsiniz.