Next.js

Get started with integrating Mosaic into your Next.js project.

Step 1

You can add the OG image URL in your `layout.js` or `page.js` file.

import { Metadata } from 'next'

export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        url: 'https://mosaicimg.com/use?url=yourwebsite.com/your_slug',
        width: 1200,
        height: 630,
        alt: 'Open Graph Image',
      },
    ],
  },
}

export default function Page() {
  return (
    // Your page content
  )
}

Step 2

You can use the `generateMetadata` function in combination with dynamic routes. Create a dynamic route in your Next.js app. For example, let's create a `[slug].tsx` file in the `app/posts` directory.

export async function generateMetadata({ params, searchParams }: Props, parent: ResolvingMetadata): Promise<Metadata> {
  const slug = await (params.slug);

  return {
    title: `Post: ${slug}`,
    openGraph: {
      images: [
        {
          url: `https://mosaicimg.com/use?url=yourwebsite.com/${slug}`,
          width: 1200,
          height: 630,
          alt: `Open Graph Image for ${slug}`,
        },
      ],
    },
  }
}

Step 3

Remember to replace the placeholder value (like 'yourwebsite.com' and 'your_slug') with your actual website URL and slug.