vercel / vercel/next.js

OpenGraph-Image unable to locate static files via process.cwd()

Open
#77,498 16 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Image (next/image)
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
        }
      ]
    }
  );
}

Image

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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.