vercel / vercel/next.js

OpenGraph ImageResponse doesn't render UTF-8 characters properly

Open
#66,558 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug Metadata not stale
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/MartinXPN/next-image-response-reproduction

To Reproduce
  1. Run the project with npm run dev
  2. Open the browser and go to http://localhost:3000
  3. Open the generated opengraph path
  4. See that the image is not generated properly
Current vs. Expected behavior

The image should contain the text Բարև ձեզ. Instead, it only contains empty rectangles. See below.

opengraph-image

Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:14:38 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6020
  Available memory (MB): 65536
  Available CPU cores: 12
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Not sure, Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local), Vercel (Deployed)

Additional context

As an additional request, it would be great to be able to load the fonts like in a regular NextJS app (where all the google fonts are available):

import {Roboto} from "next/font/google";

const font = Roboto({weight: ['300', '400', '500', '700'], subsets: ['latin']});

Instead of having to store the fonts locally and load the font manually like this:

const interSemiBold = fetch(
        new URL('./Inter-SemiBold.ttf', import.meta.url)
    ).then((res) => res.arrayBuffer())

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked reproduction with npm run dev, then open the generated opengraph path and compare the rendered Armenian text with the expected Բարև ձեզ. Trace the OpenGraph ImageResponse font-loading behavior, including the request to support fonts from next/font/google; done means UTF-8 characters render correctly in the generated image.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react, typescript
Domain
web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.