new URL(..., import.meta.url) behavior difference between Vite SSR and Next edge

[hi-ogawa]

Next app router demo has this code in server component and it looks this is processed to be:

• emit "server" asset .next/server/edge-chunks/asset_Inter-SemiBold.ebaf29e951de4564.ttf
• replace url with blob url blob:Inter-SemiBold.ebaf29e951de4564.ttf loaded runtime magically

https://github.com/vercel/next-app-router-playground/blob/e9d64dd5018d5280fee725fd4d44ea90d66c75f7/app/api/og/route.tsx#L7-L9

const interSemiBold = fetch(
  new URL('./Inter-SemiBold.ttf', import.meta.url),
).then((res) => res.arrayBuffer());

I don't think Vite SSR does such things and this new URL simply ends up with file:(filepath)/Inter-SemiBold.ttf', so fetch 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:

• is this only for .ttf etc..?
• is this only for export const runtime = "edge"?
• is this only for 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.

[hi-ogawa]

Indeed, it seems like this is a fairly narrowly targeted feature just for edge:

• [edge] allow importing blob assets vercel/next.js#38492
• add support for assets in edge vercel/next.js#63209

[hi-ogawa]

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"