Generuj obrazek przy budowaniu strony i wstaw go w metadata API.
Next.js liczy metadane po stronie serwera, więc obrazek możesz wygenerować raz przy budowaniu i nigdy nie płacić za niego ponownie. Cache po stronie API sprawia, że nawet powtórny build tego samego wpisu nie zużywa limitu.
app/blog/[slug]/page.tsx
import type { Metadata } from 'next';
async function ogImage(title: string, author: string) {
const res = await fetch('https://imageapi.dev/v1/images?wait=true', {
method: 'POST',
headers: {
Authorization: `Bearer ${process.env.IMAGE_API_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' },
};
}Nie wołaj API z komponentu klienckiego — klucz wyciekłby do przeglądarki. `generateMetadata` wykonuje się wyłącznie na serwerze i to jest właściwe miejsce.
Z ?wait=true czekasz na gotowy obrazek w tym samym połączeniu — zwykle około sekundy.
{
"id": "img_01m08s3ez1zcv28h335g9923bw",
"status": "completed",
"url": "https://cdn.imageapi.dev/renders/img_01m08s3ez1zcv28h335g9923bw.png",
"duration_ms": 912
}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.