Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
danieldelcore opened this issue Mar 25, 2025 · 1 comment
Open

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

danieldelcore opened this issue Mar 25, 2025 · 1 comment
Labels
Image (next/image) Related to Next.js Image Optimization.

Comments

@danieldelcore
Copy link

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

@github-actions github-actions bot added the Image (next/image) Related to Next.js Image Optimization. label Mar 25, 2025
@danieldelcore
Copy link
Author

#64683

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Image (next/image) Related to Next.js Image Optimization.
Projects
None yet
Development

No branches or pull requests

1 participant