Obrazki OG w
Next.js

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

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

Bez pakietu

To samo jednym zwykłym wywołaniem HTTP — bez instalowania zależności.

app/blog/[slug]/page.tsx

import type { Metadata } from 'next';

async function ogImage(title: string, author: string) {
  const res = await fetch('https://shareglint.com/v1/images?wait=true', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.SHAREGLINT_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      template: 'blog-og',
      modifications: { title, author, site: 'yourblog.com' },
    }),
    // Same post, same image - so the cache can live forever.
    next: { revalidate: false },
  });

  const { url } = await res.json();
  return url as string;
}

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

  return {
    title: post.title,
    openGraph: { images: [await ogImage(post.title, post.author)] },
    twitter: { card: 'summary_large_image' },
  };
}

Co dostajesz w odpowiedzi

Z ?wait=true czekasz na gotowy obrazek w tym samym połączeniu — zwykle około sekundy.

{
    "id": "img_01m08s3ez1zcv28h335g9923bw",
    "status": "completed",
    "url": "https://cdn.shareglint.com/renders/img_01m08s3ez1zcv28h335g9923bw.png",
    "duration_ms": 912
}

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.

Inne frameworki