Importing local font in edge runtime is broken since Next 15 with pages router (vercel/og example)

[chemicalkosek]

Link to the code that reproduces this issue

https://github.com/chemicalkosek/og-reproduction

To Reproduce

1. Start the app in dev mode npm run dev
2. Visit http://localhost:3000/api/og
3. See error:

 ⨯ Error [TypeError]: fetch failed
    at handler (pages/api/og.js:11:25)
   9 |
  10 | export default async function handler() {
> 11 |   const fontData = await fetch(
     |                         ^
  12 |     new URL('./og/lexend-deca-v21-latin_latin-ext-700.ttf', import.meta.url),
  13 |   ).then((res) => res.arrayBuffer());
  14 |

Current vs. Expected behavior

Current behavior: Og generation fails with a fetch error while importing local file

Expected behavior: It should generate og with custom font. This is working with Next 14
I didn't see any breaking changes in Next 15 that could cause this.
The code also comes from the official example: https://vercel.com/guides/using-custom-font

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #52-Ubuntu SMP PREEMPT_DYNAMIC Thu Dec  5 13:09:44 UTC 2024
  Available memory (MB): 27914
  Available CPU cores: 16
Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.1.1-canary.23 // Latest available version is detected (15.1.1-canary.23).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Pages Router, Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

No response

[baraich]

@chemicalkosek

There's an issue with the current approach for handling the font files.
Moving the og folder from api to public and updating the fontData retrieval method will resolve this.

Filesystem Changes

Code changes

Here's the suggested code modification:

// /api/og.js
const fontData = await fetch(
  new URL(
    "./og/lexend-deca-v21-latin_latin-ext-700.ttf",
    req.url.substring(0, req.url.lastIndexOf("/api"))
  )
).then(res => res.arrayBuffer());