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 birlikte hayata geçirelim. 50+ teslim edilmiş projeyle sizi konseptten yayına hazır bir ürüne taşıyor; sabit fiyatlı tekliflerle özel yazılım geliştirme sunuyoruz. Hiçbir taahhüt olmadan ücretsiz danışmanlık alın.

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