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.
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const username = searchParams.get('username');
if (!username) {
return new ImageResponse(<>Visit with "?username=vercel"</>, {
width: 1200,
height: 630,
});
}
return new ImageResponse(
(
<div
style={{
display: 'flex',
fontSize: 60,
color: 'black',
background: '#f6f6f6',
width: '100%',
height: '100%',
paddingTop: 50,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<img
width="256"
height="256"
src={`https://github.com/${username}.png`}
style={{
borderRadius: 128,
}}
/>
<p>github.com/{username}</p>
</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 devThen, browse to http://localhost:3000/api/og. You will see the following image:
Image generated using a github profile dynamic image for username=vercel