How do you give each blog post in Next.js its own share image (OG image), and what should you watch for when the title is long or has accents?

The interviewer wants to know that you understand how Next.js generates images from code, and that you know the places where things tend to go wrong when you bring it into a real blog.

In the App Router, you put a file opengraph-image.tsx next to the post page and export a default function that returns an ImageResponse (from next/og), and you can also export alt, size and contentType. Next.js adds the og:image tags to the <head> for you. For a dynamic route like [slug], the function receives params, which since Next.js 16 is a Promise, so you must await it. According to the documentation, the image is generated at build time and cached unless you use data or APIs that only exist at request time, so it isn't redrawn for each viewer.

Things to watch for: ImageResponse supports only flexbox and part of CSS (no display: grid), fonts must be ttf, otf or woff, and there is a bundle size limit of 500 KB, counting JSX, CSS, fonts and images together. The default font has only one weight, so if you want a bold title with its own look you have to embed a font and read it once at module level. As for accented text such as Vietnamese, don't guess: try a title with many stacked accents, then open the image and look at it.

With a long title, a fixed font size makes the text spill out of the image or sit on top of the footer. A simple fix is to reduce the font size according to the length of the title, and to test with an unusually long title, not just a pretty one.

A bonus point: mention that Facebook often keeps the preview it already fetched, so after changing an image you need the Sharing Debugger tool to fetch it again, and mention checking the dimensions and file size with a test.