diff --git a/src/index.ts b/src/index.ts index 58cb08fa35..219a554615 100644 --- a/src/index.ts +++ b/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) diff --git a/tests/e2e/export.test.ts b/tests/e2e/export.test.ts index 8c56f288fe..715ec18f1d 100644 --- a/tests/e2e/export.test.ts +++ b/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')) + }) +}) diff --git a/tests/fixtures/output-export/app/image/local/page.js b/tests/fixtures/output-export/app/image/local/page.js new file mode 100644 index 0000000000..9e427d4edf --- /dev/null +++ b/tests/fixtures/output-export/app/image/local/page.js @@ -0,0 +1,10 @@ +import Image from 'next/image' + +export default function NextImageUsingNetlifyImageCDN() { + return ( +
+

Next/Image + Netlify Image CDN

+ a cute squirrel (next/image) +
+ ) +}