OpenGraph-Image unable to locate static files via process.cwd()
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://codesandbox.io/p/devbox/practical-brattain-ghlpgf
To Reproduce
Navigate to https://hypermod-a6gx8i6po-codeshiftcommunity.vercel.app/explore/react-19-remove-forwardref and attempt to read opengraph image (https://www.opengraph.xyz/)
Vercel server will log an error stating that it is unable to access static files
[Error: ENOENT: no such file or directory, open '/var/task/public/images/og/logo.png'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/var/task/public/images/og/logo.png'
}
However in development mode this works as expected
Using the repo, it needs to be deployed in order to replicate https://codesandbox.io/p/devbox/practical-brattain-ghlpgf
Current vs. Expected behavior
Current behaviour appears to be that the following code does not work as expected since cwd is not the same in prod/dev environments
const interSemiBold = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf'))
My code is as follows:
import { readFile } from 'node:fs/promises';
import { ImageResponse } from 'next/og';
import { join } from 'node:path';
export const alt = 'Foo';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';
// Image generation
export default async function Image({ params }: { params: { slug: string } }) {
const cwd = process.cwd();
const font = await readFile(join(cwd, '/assets/fonts/Inter-Bold.ttf'));
const fontSrc = Uint8Array.from(font).buffer;
const logoData = await readFile(join(cwd, 'public/images/og/logo.png'));
const logoSrc = Uint8Array.from(logoData).buffer;
return new ImageResponse((<div>...<div>),
{
...size
fonts: [
{
name: 'Inter',
data: fontSrc,
style: 'normal',
weight: 500
}
]
}
);
}
Provide environment information
Vercel Prod
Next: 14.2.15
App router
Which area(s) are affected? (Select all that apply)
Image (next/image)
Which stage(s) are affected? (Select all that apply)
Vercel (Deployed)
Additional context
No response
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 with the linked CodeSandbox reproduction and the deployed Vercel route, then inspect the App Router image-generation entry point using the shown process.cwd() and readFile calls. Compare development and production asset paths and verify the OpenGraph image can load its font and logo after deployment without the ENOENT error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, node.js, typescript
- Domain
- cloud, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100