Next.js

Integrating OpenGraph.xyz with the Next.js App Router is straightforward. You can use the generateMetadata function to dynamically generate Open Graph images for your pages.

URL Structure

To generate a dynamic image, you need to construct the URL with your template ID and the dynamic values.

Here is an example URL:

The URL structure for this template is:

https://ogcdn.net/{templateId}/{templateVersion}/{title}/{imageUrl}/og.png

Ensure that all dynamic values are URL encoded.

Template Versioning

The v3 in the URL represents the version of your template. Every time you publish changes to your template in the editor, this version number increments (e.g., v1, v2, v3).

Make sure to use the correct version number in your URL to reflect the latest design changes. You can find the current version number in the dashboard or by copying the integration URL again.

Code Example

Here is how you can implement this in a Next.js App Router page (e.g. app/posts/[slug]/page.tsx):

import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata,
): Promise<Metadata> {
  // Mock data for example
  const product = {
    title: 'My Awesome Product',
    image:
      'https://opengraph.b-cdn.net/production/images/56188dc2-e3c3-4ce5-a8b1-1323953e37b9.jpg?token=hOY-wLL-tV2Wb6eqlpzb3hUOqYMZbXQ3az2flBDqaSs&height=800&width=1200&expires=33251249770',
  }

  // Define your template ID
  const templateId = '4baf7dd9-4a11-4e55-9837-649e705f44ef'

  // Define the template version
  const templateVersion = 'v3'

  // Encode the dynamic values
  const title = encodeURIComponent(product.title)
  const imageUrl = encodeURIComponent(product.image)

  // Construct the OG Image URL
  const ogImageUrl = `https://ogcdn.net/${templateId}/${templateVersion}/${title}/${imageUrl}/og.png`

  return {
    title: product.title,
    openGraph: {
      images: [ogImageUrl],
    },
    twitter: {
      card: 'summary_large_image',
      images: [ogImageUrl],
    },
  }
}

export default function Page({ params, searchParams }: Props) {
  return <div>My Post</div>
}