# OG images in Next.js

A signed image URL straight from generateMetadata — no request while the page renders.

## Where it plugs in

The package signs the image URL inside `generateMetadata` with Web Crypto, so the same code runs in the Node.js and the Edge runtime. Nothing is fetched while Next.js renders the page: the image is drawn on the first crawler hit and cached, and a rebuild of the same post costs nothing against your quota.

`app/blog/[slug]/page.tsx`

```ts
// npm i @shareglint/next
// .env: SHAREGLINT_ACCOUNT_ID and SHAREGLINT_SIGNING_SECRET (dashboard)
import type { Metadata } from 'next';
import { ogImageMetadata } from '@shareglint/next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost((await params).slug);

  return {
    title: post.title,
    // A signed URL built locally with Web Crypto - no request to the API,
    // Node.js and Edge runtime alike. Adds openGraph.images and twitter.
    ...(await ogImageMetadata({
      template: 'blog-og',
      fields: { title: post.title, author: post.author, site: 'yourblog.com' },
      alt: post.title,
    })),
  };
}
```

## The trap

The signing secret has to stay on the server. `generateMetadata` only runs there — import the helper into a client component and it refuses to sign rather than ship the secret to the browser. Calling the API directly instead? The API key has the same rule.

## What it costs

A hundred images a month free, then $9 for two thousand. The same post rendered twice returns the existing URL and uses no quota — so rebuilding your site costs nothing.