Using languages in your OG image

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 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.
 
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:

pnpm dev

Then, browse to http://localhost:3000/api/og. You will see the following image:

Image generated using other languages

Please note that right to left languages are not currently supported.

Using languages in your OG image

More resources