Sayfa parametreleri ve çekilen verilere dayalı dinamik SEO metadata oluşturma.
import type { Metadata } from class=class="text-emerald-400">"text-emerald-400">'next'
interface PageProps {
params: Promise<{ slug: string }>
}
async function getPost(slug: string) {
const res = await fetch(class="text-emerald-400">`https:class=class="text-emerald-400">"text-gray">//api.example.com/posts/${slug}`, {
next: { revalidate: 3600 },
})
if (!res.ok) return null
return res.json()
}
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
const { slug } = await params
const post = await getPost(slug)
if (!post) return { title: class=class="text-emerald-400">"text-emerald-400">'Not Found' }
return {
title: class="text-emerald-400">`${post.title} | My Blog`,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.coverImage],
},
}
}
export default async function PostPage({ params }: PageProps) {
const { slug } = await params
const post = await getPost(slug)
if (!post) return <div>Not found</div>
return <article><h1>{post.title}</h1><p>{post.content}</p></article>
}Dinamik başlıklar, açıklamalar ve Open Graph etiketleri ayarlamak için herhangi bir page.tsx'de generateMetadata kullanın. Next.js bu fonksiyonu statik sayfalar için derleme zamanında, dinamik sayfalar için istek zamanında çağırır.
Fikrinizi nasıl hayata geçirebileceğimizi konuşalım. İlk konseptten üretime hazır ürüne kadar — yanınızdayız.