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());

[silence48]

just encountered same bug. seems to be something to do with windows and how it builds the file path. strangely it wasn't happening with node 22.10.0 and started when i needed to change to 23.8.0

[baraich]

just encountered same bug. seems to be something to do with windows and how it builds the file path. strangely it wasn't happening with node 22.10.0 and started when i needed to change to 23.8.0

@silence48
I tested it on macOS, and it seems to work fine there. I agree that the problem may be specific to Windows.

[silence48]

Yeah something to do with the file url.

OG Image Generated Successfully
⨯ [Error: failed to pipe response] {
[cause]: [TypeError: Invalid URL] {
code: 'ERR_INVALID_URL',
input: '.\file:\C:\dev\dashboard-ui\node_modules\next\dist\compiled\@vercel\og\noto-sans-v27-latin-regular.ttf'
}
}
⨯ [Error: failed to pipe response] {
[cause]: [TypeError: Invalid URL] {
code: 'ERR_INVALID_URL',
input: '.\file:\C:\dev\dashboard-ui\node_modules\next\dist\compiled\@vercel\og\noto-sans-v27-latin-regular.ttf'
}

The reason i tried 23.8.0 is because on 22.10.0 i am getting a different error but not saying anything with fonts, it instead says something about source map support lol. I actually literally just gave up and switched to pupateer

[itssimple]

Getting the same issue as silence.

TypeError: Invalid URL
    at async Object.start (C:\git\manifest-report-site\.next\server\app\manifests\[version]\page.js:1:2764) {
  code: 'ERR_INVALID_URL',
  input: '.\\file:\\C:\\git\\manifest-report-site\\node_modules\\next\\dist\\compiled\\@vercel\\og\\noto-sans-v27-latin-regular.ttf'
}

And the line where it throws is this: const imageBuffer = await image.arrayBuffer();
I have it working on another computer with the same npm and node version.

[itssimple]

Downgrading node to 20.18.0 instead of 20.18.3 resolved it for me.