fix: correctly serve images by storing binary as base64 (#241)

* refactor: use playwright fixtures for e2e tests

* chore: adapt test from next.js

* fix: images need to be encoded as base64

* fix: remove additional dependency

* fix: oof, one character too much

Author: Skn0tt

src/build/content/prerendered.ts

@@ -32,7 +32,7 @@ const buildAppCacheValue = async (path: string): Promise<PageCacheValue> => ({
 
 const buildRouteCacheValue = async (path: string): Promise<RouteCacheValue> => ({
   kind: 'ROUTE',
-  body: await readFile(`${path}.body`, 'utf-8'),
+  body: await readFile(`${path}.body`, 'base64'),
   ...JSON.parse(await readFile(`${path}.meta`, 'utf-8')),
 })
 

src/run/handlers/cache.cts

@@ -83,7 +83,7 @@ export class NetlifyCacheHandler implements CacheHandler {
           return {
             lastModified: blob.lastModified,
             value: {
-              body: Buffer.from(blob.value.body),
+              body: Buffer.from(blob.value.body, 'base64'),
               kind: blob.value.kind,
               status: blob.value.status,
               headers: blob.value.headers,
@@ -114,6 +114,11 @@ export class NetlifyCacheHandler implements CacheHandler {
 
       console.debug(`[NetlifyCacheHandler.set]: ${key}`)
 
+      if (data?.kind === 'ROUTE') {
+        // @ts-expect-error gotta find a better solution for this
+        data.body = data.body.toString('base64')
+      }
+
       await this.blobStore.setJSON(blobKey, {
         lastModified,
         value: data,

tests/e2e/edge-middleware.test.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
 import { test } from '../utils/create-e2e-fixture.js'
+import { getImageSize } from 'next/dist/server/image-optimizer.js'
 
 test('Runs edge middleware', async ({ page, middleware }) => {
   await page.goto(`${middleware.url}/test/redirect`)
@@ -27,3 +28,14 @@ test('Supports CJS dependencies in Edge Middleware', async ({ page, middleware }
 
   expect(await res?.headerValue('x-cjs-module-works')).toEqual("true")
 })
+
+// adaptation of https://github.com/vercel/next.js/blob/8aa9a52c36f338320d55bd2ec292ffb0b8c7cb35/test/e2e/app-dir/metadata-edge/index.test.ts#L24C5-L31C7
+test('it should render OpenGraph image meta tag correctly', async ({ page, middleware }) => {
+  await page.goto(`${middleware.url}/`)
+  const ogURL = await page.locator('meta[property="og:image"]').getAttribute('content')
+  expect(ogURL).toBeTruthy()
+  const ogResponse = await fetch(new URL(new URL(ogURL!).pathname, middleware.url))
+  const imageBuffer = await ogResponse.arrayBuffer()
+  const size = await getImageSize(Buffer.from(imageBuffer), 'png')
+  expect([size.width, size.height]).toEqual([1200, 630])
+})

tests/fixtures/middleware/app/og.js

@@ -0,0 +1,21 @@
+import { ImageResponse } from 'next/og'
+
+export default function og() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 128,
+          background: 'lavender',
+        }}
+      >
+        Open Graph
+      </div>
+    )
+  )
+}

tests/fixtures/middleware/app/opengraph-image.js

@@ -0,0 +1,3 @@
+export const alt = 'Open Graph'
+
+export { default } from './og'