Metadata

Question

I have been trying to figure out how to set metadata, for me it's not static.

I have a [slug] that calls a get request on a api url, that pulls from Vercel Postgres Database, this contains the metadata title and description, to be able to set it I need the data first, everything I have tried it either doesn't work whatsoever, or returns the "loading" data.

Boston Terrier · Answer

import { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data from API or DB
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

Metadata

2 Replies