dynamic metadata

[dusty escarp]

Hi @untold wasp. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To pass the title argument from an exported function to the built-in metadata in Next.js, you can use the generateMetadata function. This function allows you to dynamically set metadata based on route parameters or other dynamic data.

Here's how you can achieve this:

1. Define the generateMetadata function: This function will take the title argument and return a metadata object with the title set dynamically.

2. Use the generateMetadata function in your component: You can then use this function in your component to set the metadata dynamically.

Here is an example based on the provided code:

import { Metadata } from 'next'

type Props = {
  params: { title: string }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  return {
    title: params.title,
  }
}

export default function HeadContent({ title }: { title: string }) {
  // Your component logic here
  return (
    <>
      <h1>{title}</h1>
    </>
  )
}

In this example:

• The generateMetadata function takes params as an argument, which includes the title.
• It returns a metadata object with the title set to params.title.
• The HeadContent component can then use this title as needed.

For more details on using generateMetadata, you can refer to the Next.js documentation on dynamic metadata (https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function).

This approach ensures that the title is dynamically set based on the route parameters or other dynamic data, leveraging Next.js's built-in SEO support.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: