Hi, I'm Software Engineer@Glasp. I'll introduce how to create OGP Image by Next.js.

OGP (Open Graph Protocol) is a metadata protocol designed to provide visually appealing and consistent information when sharing web page content on social media platforms and other applications. It was developed by Facebook and is supported by many other social media platforms such as Twitter and LinkedIn.

OGP metadata is described in the HTML <head> section and includes the following information:

og:title: The title of the page
og:type: The type of the page (e.g., article, video, website, etc.)
og:image: The URL of the image displayed when shared
og:url: The URL of the page
og:description: A summary of the page

This ensures a unified display when links are shared on social media, providing users with more attractive content.

Glasp also retrieves and displays the OGP of highlighted sites (you can see it by clicking the following highlights)

How to generate OGP Image by Next.js?

Since the introduction of the App Router, Next.js has evolved in various aspects such as Server Components, Layout, and caching. Among these enhancements, the ImageResponse feature has also been introduced.

What is ImageResponse?

Yes, the ImageResponse feature allows you to design OGP images using JSX within files written for Route Handlers. By passing JSX to ImageResponse and returning it, an image is generated and returned when the page is requested. This functionality provides a dynamic way to create and serve custom OGP images for your pages.

Here is the code using ImageResponse

import { ImageResponse } from 'next/og'
 
new ImageResponse(
  element: ReactElement,
  options: {
    width?: number = 1200
    height?: number = 630
    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
    fonts?: {
      name: string,
      data: ArrayBuffer,
      weight: number,
      style: 'normal' | 'italic'
    }[]
    debug?: boolean = false
 
    // Options that will be passed to the HTTP response
    status?: number = 200
    statusText?: string
    headers?: Record<string, string>
  },
)

I think this is a godsend feature!

Previously, this was provided as a separate package under @vercel/og. With the introduction of the App Router, it has been integrated into Next.js as next/server. (It seems the package has now been changed to next/og).

This is a very good feature, but there are a few things to consider...

Performance

If you are using Vercel, by including export const runtime = 'edge', you can automatically add the correct headers to the cached images at the edge. This helps improve performance and reduces recalculations.

According to the following article, it was mentioned that it only works on the edge runtime, but when I tried it now, it was able to run on the node.js runtime as well.

However, if you cannot use edge, fetching custom fonts and other resources (such as retrieving and displaying user thumbnails) for each request may result in poor performance. In such cases, it might be a good idea to upload the OGP page to GCS (Google Cloud Storage) and distribute it as an image file via CDN each time it is created or updated.

Dynamic Route

According to the following GitHub comment, in the case of a Dynamic Route, an error occurs when fetching a local custom font during deployment.

According to the following GitHub comment, if you try to run it on the edge, it exceeds 1MB, so when setting the runtime to node.js and using Dynamic Route, the OG image is lazily rendered when requested. During this lazy rendering, the font file is not included in Vercel's deployment, which causes an error.

In that case, it seems better to fetch the font from a separate host via CDN.

Next.js

Related Tags

How to generate OGP Image by Next.js?