Dinamik Metadata
Dinamik Metadata Oluşturulması
Bu kısımda, dinamik olarak sayfalarınızın metadata etiketlerini nasıl oluşturabileceğinizi anlatacağım.
Sitenizin içerisinde bir blog altyapısı ya da bir e-ticaret altyapısı olabilir. Tabii ki bu tarz sistemler bir veritabanına bağlıdır ve bu sistemlere yeni ürün girip bazen ürünlerinizin bilgilerini değiştirebilirsiniz. Bu ürünleri sunmak için oluşturduğumuz dinamik sayfalarının metadata etiketlerini tabii ki tek tek elimizle oluşturmayacağız ya da düzenlemeyeceğiz.
Aşağıda, dummy-json veritabanında var olan ürünlerin verilerini kullanarak dinamik olarak metadata etiketleri nasıl oluşturabileceğimizi görebilirsiniz.
Generate Metadata
generateMetadata fonksiyonu, Next JS özelindedir ve bir ziyaretçi sayfaya girdiğinde tetiklenerek metadatayı oluşturur. Bu fonksiyon, sayfanın props değerlerine erişebilir. Next JS, dinamik sayfalara otomatik olarak pathname bilgisini props olarak gönderir.
Tabii ki, bu şekilde bir dinamik metadata kimsenin işine yaramaz. Bizim burada yapmamız gereken aslında veritabanımızla iletişime geçmektir. URLbilgisinden elde ettiğimiz id değeri ile veritabanımızla bağlantı kurarak, bulunduğumuz sayfanın metadata değerlerini veritabanımızdan çekebiliriz.
Bu bilgileri kullanarak, dummy-api ile iletişime geçerek metadata değerlerimizi nasıl üretebileceğimizi aşağıda görebilirsiniz.
Bilgi:
Prisma veya Drizzle gibi ORM paketlerini kullanıyorsanız, getProductData() fonksiyonunu tekrar tekrar çalıştırmamak için, react-cache fonksiyonunu kullanarak aşağıdaki gibi callback fonksiyonunu sarabilirsiniz.
Generate Static Pages
Sitenizi production aşamasına getirdiğinizde, bazı sayfalarınızın yüklenme süresini azaltmak için build aşamasında önemli olanları generate edebilirsiniz. Bu sayede, kullanıcılar sitenizin yüksek tıklanan sayfasına girdiğinde anında yüklendiğini göreceklerdir. Ancak, bütün dinamik sayfalarınızı önden generate ederseniz sunucunuz için ekstra yük olacaktır ve bu performans sorunlarına sebep olabilir. Aşağıdaki kodu kullanırken dikkatli olun.