Next.js Discord

Discord Forum

Font files not found in opengraph-image

Answered
Tofugrass posted this in #help-forum
Open in Discord
Avatar
Which is strange, because they are found during the build step, and the project builds without issue. It works locally when running next dev and the open graph tab in vercel shows no issues.
⨯ Error: ENOENT: no such file or directory, open '/var/task/apps/app/assets/Montserrat-Regular.ttf'
    at async f (.next/server/app/opengraph-image/route.js:1:1750) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/var/task/apps/app/assets/Montserrat-Regular.ttf'
}

The file apps/app/assets/Montserrat-Regular.ttf certainly exists at build time. But in prod at runtime, it error500's with the above issue.
export default async function Image({
  params: { league_id },
}: {
  params: { league_id: string };
}) {
  // Font loading, process.cwd() is Next.js project directory
  console.log(process.cwd());
  const MontserratRegular = await readFile(
    join(process.cwd(), "assets/Montserrat-Regular.ttf"),
  );
Answered by Tofugrass
A simple solution was to just move the fonts into the public folder and fetch them.
const MontserratRegular = await fetch(
    config.WEB_URL + "/assets/Montserrat-Regular.ttf",
  ).then((res) => res.arrayBuffer());
View full answer

1 Reply

Avatar
A simple solution was to just move the fonts into the public folder and fetch them.
const MontserratRegular = await fetch(
    config.WEB_URL + "/assets/Montserrat-Regular.ttf",
  ).then((res) => res.arrayBuffer());
Answer