Statik ana sayfa
- React kursu
- İleri seviye
- Ders 14/56
- 5 dk
SSG ile ürünleri çeken bir ana sayfa yazarsın.
Dinamik ürün sayfası
Bu derste app/product/[id]/page.js dosyasını yazacağız. params.id URL'den gelir; products.find ile ilgili ürünü buluruz.
generateStaticParams ile build sırasında hangi id'lerin statik üretileceğini söyleyebiliriz. Bu, hem hızlı hem SEO dostu sayfalar verir.
Önceki dersin products dizisi burada da kullanılır; bu yüzden kod tekrarı olmaz. Her ürün kendi URL'sine sahip olur ve kullanıcılar doğrudan bağlantı verebilir.
generateStaticParams kullanımı
Mağazada her ürün için statik bir sayfa üretmek istiyoruz. generateStaticParams fonksiyonu, ürün id'lerini içeren bir liste döndürür; Next.js her biri için ayrı HTML üretir.
İlk istek anında hazır HTML gelir; sunucu ek iş yapmaz. Bu, e-ticaret için idealdir.
Liste products.map(p => ({ params: { id: String(p.id) } })) şeklinde üretilir.
Uygulama Ürün sayfası yaz
generateStaticParams fonksiyonu yaz: products.map(p => ({ params: { id: String(p.id) } })) döndürsün. Page bileşeni yaz: { params } destructure et, products.find(p => p.id === Number(params.id)) ile ürünü bul, <h1>{product.name}</h1> bas. export default Page. const products = [{ id: 1, name: "Kalem" }, { id: 2, name: "Defter" }] dizisini de tanımla.
Başlangıç kodu
// app/product/[id]/page.js
// products dizisi, generateStaticParams ve Page buraya yazÖrnek çözüm
// app/product/[id]/page.js
const products = [{ id: 1, name: "Kalem" }, { id: 2, name: "Defter" }];
export async function generateStaticParams() {
return products.map((p) => ({ params: { id: String(p.id) } }));
}
export default function Page({ params }) {
const product = products.find((p) => p.id === Number(params.id));
return <h1>{product.name}</h1>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 URL'den id'yi alan prop?
- route
- search
- query
- params Doğru cevap
Açıklama: params.id URL'den gelir.
2 find product
const product = products.find((p) => p.id === Number(____));const product = products.find((p) => p.id === Number(params.id));Açıklama: products.find params.id ile ürünü bulur.
3 Statik ana sayfa: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
[id] |
Dinamik parametre |
params.id |
URL değeri |
products.find |
Ürün bulma |
generateStaticParams |
Statik üretim |