Statik ana sayfa

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.

Örnek çözümü göster

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

Kendini test et

URL'den id'yi alan prop?
- route
- search
- query
- params
Cevabı göster

params — params.id URL'den gelir.

find product

const product = products.find((p) => p.id === Number(____));

Cevabı göster

const product = products.find((p) => p.id === Number(params.id));

Statik ana sayfa: kavramları eşleştir

[id]

Dinamik parametre
params.id

URL değeri
products.find

Ürün bulma
generateStaticParams

Statik üretim

Sıradaki ders: Dinamik ürün sayfası

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler