feat: support next/image with static exports (#2563)

* test: add next/image to static export fixture and test

* feat: support next/image with static exports

Author: pieh

src/index.ts

@@ -64,9 +64,9 @@ export const onBuild = async (options: NetlifyPluginOptions) => {
       await saveBuildCache(ctx)
     }
 
-    // static exports only need to be uploaded to the CDN
+    // static exports only need to be uploaded to the CDN and setup /_next/image handler
     if (ctx.buildConfig.output === 'export') {
-      return copyStaticExport(ctx)
+      return Promise.all([copyStaticExport(ctx), setImageConfig(ctx)])
     }
 
     await verifyAdvancedAPIRoutes(ctx)

tests/e2e/export.test.ts

@@ -52,3 +52,21 @@ test('Renders the Home page correctly with output export and custom dist dir', a
 
   await expectImageWasLoaded(page.locator('img'))
 })
+
+test.describe('next/image is using Netlify Image CDN', () => {
+  test('Local images', async ({ page, outputExport }) => {
+    const nextImageResponsePromise = page.waitForResponse('**/_next/image**')
+
+    await page.goto(`${outputExport.url}/image/local`)
+
+    const nextImageResponse = await nextImageResponsePromise
+    expect(nextImageResponse.request().url()).toContain('_next/image?url=%2Fsquirrel.jpg')
+
+    expect(nextImageResponse.status()).toBe(200)
+    // ensure next/image is using Image CDN
+    // source image is jpg, but when requesting it through Image CDN avif will be returned
+    expect(await nextImageResponse.headerValue('content-type')).toEqual('image/avif')
+
+    await expectImageWasLoaded(page.locator('img'))
+  })
+})

tests/fixtures/output-export/app/image/local/page.js

@@ -0,0 +1,10 @@
+import Image from 'next/image'
+
+export default function NextImageUsingNetlifyImageCDN() {
+  return (
+    <main>
+      <h1>Next/Image + Netlify Image CDN</h1>
+      <Image src="/squirrel.jpg" alt="a cute squirrel (next/image)" width={300} height={278} />
+    </main>
+  )
+}