OpenGraph ImageResponse doesn't render UTF-8 characters properly
Nobody has claimed this yet.
- 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
- Run the project with
npm run dev - Open the browser and go to
http://localhost:3000 - Open the generated
opengraphpath - 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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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