# Obrazki OG w Next.js

Podpisany adres obrazka prosto z generateMetadata — bez żądania przy renderowaniu strony.

## Gdzie to wpiąć

Pakiet podpisuje adres obrazka w `generateMetadata` przez Web Crypto, więc ten sam kod działa w środowisku Node.js i Edge. Przy renderowaniu strony nic nie jest pobierane: obrazek powstaje przy pierwszej wizycie crawlera i trafia do cache, a powtórny build tego samego wpisu nie zużywa limitu.

`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,
    })),
  };
}
```

## Pułapka

Sekret do podpisywania musi zostać na serwerze. `generateMetadata` wykonuje się tylko tam — zaimportuj pomocnika do komponentu klienckiego, a odmówi podpisania, zamiast wysłać sekret do przeglądarki. Wołasz API bezpośrednio? Klucz API podlega tej samej zasadzie.

## Ile to kosztuje

Sto obrazków miesięcznie za darmo, potem $9 za dwa tysiące. Ten sam wpis wyrenderowany drugi raz zwraca istniejący adres i nie zużywa limitu — więc przebudowanie strony nic nie kosztuje.