Next.js ile Dinamik Route ve getServerSideProps Kullanımı
Next.js, dinamik route\'lar sayesinde esnek URL yapıları oluşturmanıza olanak tanır. Bu, özellikle içerik yönetimi sistemlerinde veya e-ticaret uygulamalarında faydalıdır.Dinamik Route Oluşturma
Dinamik route oluşturmak için dosya adında köşeli parantezler kullanılır. Örneğin, ürün detay sayfası için: - pages/products/[id].js Bu sayfa, \"id\" parametresini dinamik olarak alır.getServerSideProps Kullanımı
Server-side datayı almak için `getServerSideProps` fonksiyonunu kullanabilirsiniz. Bu fonksiyon, sayfa her yüklendiğinde çalışır ve sunucu tarafında veri almanıza yardımcı olur.- Fonksiyonu sayfa bileşeninin dışında tanımlayın.
- Veri almak için API\'lerden veya veritabanlarından kullanılabilir.
- Alınan veriyi props olarak sayfa bileşenine geçirin.
Örnek Kod
Aşağıda basit bir örnek verilmiştir: ```javascript // pages/products/[id].js import React from \'react\'; const Product = ({ product }) => { return{product.name}
;
};
export async function getServerSideProps(context) {
const { id } = context.params;
const res = await fetch(`https://api.example.com/products/${id}`);
const product = await res.json();
return { props: { product } };
}
export default Product;
```
Bu örnekte, belirli bir ürünün bilgileri sunucu tarafında alınır ve sayfa bileşenine aktarılır. Böylece, kullanıcı sayfaya her gittiğinde güncel verilere ulaşır.