You can use the following code sample to explore using parameters and
different content types with
next/og.
To learn more about OG Image Generation, see Open Graph Image
Generation.
Create an api route with route.tsx in /app/api/og/ and paste the following code:
app/api/og/route.tsx
import { ImageResponse } from 'next/og';
// App router includes @vercel/og.
// No need to install it.
async function loadGoogleFont (font: string, text: string) {
const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`
const css = await (await fetch(url)).text()
const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)
if (resource) {
const response = await fetch(resource[1])
if (response.status == 200) {
return await response.arrayBuffer()
}
}
throw new Error('failed to load font data')
}
export async function GET() {
const text = 'Hello world!'
return new ImageResponse(
(
<div
style={{
backgroundColor: 'white',
height: '100%',
width: '100%',
fontSize: 100,
fontFamily: 'Geist',
paddingTop: '100px',
paddingLeft: '50px',
}}
>
{text}
</div>
),
{
width: 1200,
height: 630,
fonts: [
{
name: 'Geist',
data: await loadGoogleFont('Geist', text),
style: 'normal',
},
],
},
);
}If you're not using a framework, you must either add
"type": "module" to your
package.json or change your JavaScript Functions'
file extensions from .js to
.mjs
Preview the OG route locally by running the following command:
pnpm devThen, browse to http://localhost:3000/api/og. You will see the following image:
Image generated using the custom font typewriter