generateMetadata

Export generateMetadata from any page.tsx or layout.tsx to set <head> tags at render time. The function runs on the server and receives route params and search params, so metadata can depend on fetched data.

Try It

Add ?name=YourName to the URL and inspect the page title and <meta> tags in DevTools. The title and description will reflect the query parameter.

Current URL examples:

/examples/generate-metadata
/examples/generate-metadata?name=Alice
/examples/generate-metadata?name=Bob

How It Works

Usage

import type { HeadConfig } from "catmint/head"

export async function generateMetadata({
  params,
  search,
}: {
  params: Record<string, string | string[]>
  search: Record<string, string>
}): Promise<HeadConfig> {
  // Fetch data, read params, etc.
  const post = await db.posts.findBySlug(params.slug)

  return {
    title: post.title,
    meta: [
      { name: "description", content: post.excerpt },
      { property: "og:title", content: post.title },
      { property: "og:image", content: post.coverUrl },
    ],
  }
}

export default function BlogPost() {
  return <article>...</article>
}

Runs on the server only — safe to call databases, internal APIs, or read secrets
Returns a HeadConfig with title, meta[], and link[]
Works in both page.tsx and layout.tsx — layout metadata merges with page metadata (page wins on conflicts)
Takes precedence over <Head> components for conflicting tags
For client-side dynamic updates, use useHead() instead