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 ; }; 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.