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.
In this example, your post image uses different languages.
Create an API route handler:
app/api/og/route.tsx
import { ImageResponse } from 'next/og';// App router includes @vercel/og.// No need to install it.
export async function GET() { return new ImageResponse( ( <div style={{ fontSize: 40, color: 'black', background: 'white', width: '100%', height: '100%', padding: '50px 200px', textAlign: 'center', justifyContent: 'center', alignItems: 'center', }} > 👋 Hello 你好 नमस्ते こんにちは สวัสดีค่ะ 안녕 добрий день Hallá </div> ), { width: 1200, height: 630, }, );}app/about/opengraph-image.jsx
import { ImageResponse } from 'next/og';// App router includes @vercel/og.// No need to install it.
export async function GET() { return new ImageResponse( ( <div style={{ fontSize: 40, color: 'black', background: 'white', width: '100%', height: '100%', padding: '50px 200px', textAlign: 'center', justifyContent: 'center', alignItems: 'center', }} > 👋 Hello 你好 नमस्ते こんにちは สวัสดีค่ะ 안녕 добрий день Hallá </div> ), { width: 1200, height: 630, }, );}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:
terminal
pnpm devThen, browse to http://localhost:3000/api/og. You will see the following image:
Please note that right to left languages are not currently supported.