> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ogify.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Pages Router
> Generate OG images using API Routes in Next.js Pages Router
**Important:** Add OGify packages to `serverExternalPackages` in your `next.config.js`:
```javascript theme={null}
const nextConfig = {
...
experimental: {
serverExternalPackages: ["@ogify/core", "@ogify/templates"],
},
...
};
module.exports = nextConfig;
```
This prevents Next.js from bundling OGify packages, which is necessary for proper font loading and image generation.
For Next.js projects using the Pages Router, generate OG images using **API Routes**.
## Using API Routes
Create a file at `pages/api/og.ts`:
```typescript theme={null}
import { createRenderer } from '@ogify/core';
import template from '@ogify/templates/basic';
import type { TemplateParams } from '@ogify/templates/basic';
import type { NextApiRequest, NextApiResponse } from 'next';
const renderer = createRenderer<{ basic: TemplateParams }>({
templates: { basic: template },
});
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { title } = req.query;
const imageBuffer = await renderer.renderToImage('basic', {
title: (title as string) || 'Hello World',
layout: 'centered',
});
res.setHeader('Content-Type', 'image/png');
res.send(imageBuffer);
}
```
In your pages, point the `og:image` meta tag to your API route.
```tsx theme={null}
import Head from 'next/head';
export default function Page() {
return (
<>
My Page
My Page
);
}
```