OpenGraph-Image unable to locate static files via process.cwd() #77497
Description
Link to the code that reproduces this issue
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
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 routerWhich 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