Parçacıklara Dön
Next.jsTypeScript

Next.js Dinamik Metadata

Sayfa parametreleri ve çekilen verilere dayalı dinamik SEO metadata oluşturma.

nextjsseometadatadynamic
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>
}

Nasıl Kullanılır

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.

İlgili Teknoloji

Next.js

Aklınızda Bir Proje mi Var?

Fikrinizi nasıl hayata geçirebileceğimizi konuşalım. İlk konseptten üretime hazır ürüne kadar — yanınızdayız.

veya ücretsiz görüşme ayarlayın