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.
- Place your custom font
typewr__.ttf
(available from 1001freefonts.com) under the/assets
folder from the project root. - Make sure that the letter case of the file matches the code (e.g. file name and code should be both lowercase or uppercase).
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() {
// Make sure the font exists in the specified path:
const fontData = await fetch(
new URL('../../../../assets/typewr__.ttf', import.meta.url),
).then((res) => res.arrayBuffer());
return new ImageResponse(
(
<div
style={{
backgroundColor: 'white',
height: '100%',
width: '100%',
fontSize: 100,
fontFamily: '"Typewriter"',
paddingTop: '100px',
paddingLeft: '50px',
}}
>
Hello world!
</div>
),
{
width: 1200,
height: 630,
fonts: [
{
name: 'Typewriter',
data: fontData,
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 dev
Then, browse to http://localhost:3000/api/og
. You will see the following image:
![](/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1689795055%2Fdocs-assets%2Fstatic%2Fdocs%2Fconcepts%2Ffunctions%2Fog-image%2Fog-font.png&w=3840&q=75)
Image generated using the custom font typewriter