Open hi-ogawa opened 1 week ago
Indeed, it seems like this is a fairly narrowly targeted feature just for edge:
Output in .next/server/app/api/og/route.js
//
// (rsc)/./app/api/og/route.tsx
//
const interSemiBold = fetch(
/* asset import */ new __webpack_require__.U(
__webpack_require__(
/*! ./Inter-SemiBold.ttf */ "(edge-asset)/./app/api/og/Inter-SemiBold.ttf",
),
),
).then((res) => res.arrayBuffer());
//
// (edge-asset)/./app/api/og/Inter-SemiBold.ttf
//
module.exports = "blob:Inter-SemiBold.ebaf29e951de4564.ttf"
Next app router demo has this code in server component and it looks this is processed to be:
.next/server/edge-chunks/asset_Inter-SemiBold.ebaf29e951de4564.ttf
blob:Inter-SemiBold.ebaf29e951de4564.ttf
loaded runtime magicallyhttps://github.com/vercel/next-app-router-playground/blob/e9d64dd5018d5280fee725fd4d44ea90d66c75f7/app/api/og/route.tsx#L7-L9
I don't think Vite SSR does such things and this
new URL
simply ends up withfile:(filepath)/Inter-SemiBold.ttf'
, sofetch
fails.Probably such usage is an edge case (or maybe not https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx), but it's worth checking out where this feature is coming form either directly from webpack or next.js (I don't think this is what webpack does by default https://webpack.js.org/api/module-variables/#importmetaurl)
For example, some questions:
.ttf
etc..?export const runtime = "edge"
?route.js
?Also side note, I just found the official migration guide from Vite React SPA to Next.js https://nextjs.org/docs/app/building-your-application/upgrading/from-vite It mentions some difference of static assets handling.