Merge branch 'canary' into william/next-2173-useselectedlayoutsegment…

…-does-not-return-the-name-of-the
vercel · Jan 23, 2024 · 1272940 · 1272940
2 parents ae1e20d + 6c611fe
commit 1272940
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/next/src/server/image-optimizer.ts b/packages/next/src/server/image-optimizer.ts
@@ -599,11 +599,17 @@ export async function imageOptimizer(
         '"url" parameter is valid but image type is not allowed'
       )
     }
-    const vector = VECTOR_TYPES.includes(upstreamType)
-    const animate =
-      ANIMATABLE_TYPES.includes(upstreamType) && isAnimated(upstreamBuffer)
 
-    if (vector || animate) {
+    if (ANIMATABLE_TYPES.includes(upstreamType) && isAnimated(upstreamBuffer)) {
+      Log.warnOnce(
+        `The requested resource "${href}" is an animated image so it will not be optimized. Consider adding the "unoptimized" property to the <Image>.`
+      )
+      return { buffer: upstreamBuffer, contentType: upstreamType, maxAge }
+    }
+    if (VECTOR_TYPES.includes(upstreamType)) {
+      // We don't warn here because we already know that "dangerouslyAllowSVG"
+      // was enabled above, therefore the user explicitly opted in.
+      // If we add more VECTOR_TYPES besides SVG, perhaps we could warn for those.
       return { buffer: upstreamBuffer, contentType: upstreamType, maxAge }
     }
     if (!upstreamType.startsWith('image/') || upstreamType.includes(',')) {

diff --git a/test/integration/image-optimizer/test/util.ts b/test/integration/image-optimizer/test/util.ts
@@ -20,6 +20,8 @@ import type { RequestInit } from 'node-fetch'
 const largeSize = 1080 // defaults defined in server/config.ts
 const sharpMissingText = `For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended`
 const sharpOutdatedText = `Your installed version of the 'sharp' package does not support AVIF images. Run 'npm i sharp@latest' to upgrade to the latest version`
+const animatedWarnText =
+  'is an animated image so it will not be optimized. Consider adding the "unoptimized" property to the <Image>.'
 
 export async function serveSlowImage() {
   const port = await findPort()
@@ -208,6 +210,7 @@ export function runTests(ctx) {
       `${contentDispositionType}; filename="animated.gif"`
     )
     await expectWidth(res, 50, { expectAnimated: true })
+    expect(ctx.nextOutput).toContain(animatedWarnText)
   })
 
   it('should maintain animated png', async () => {
@@ -224,6 +227,7 @@ export function runTests(ctx) {
       `${contentDispositionType}; filename="animated.png"`
     )
     await expectWidth(res, 100, { expectAnimated: true })
+    expect(ctx.nextOutput).toContain(animatedWarnText)
   })
 
   it('should maintain animated png 2', async () => {
@@ -240,6 +244,7 @@ export function runTests(ctx) {
       `${contentDispositionType}; filename="animated2.png"`
     )
     await expectWidth(res, 1105, { expectAnimated: true })
+    expect(ctx.nextOutput).toContain(animatedWarnText)
   })
 
   it('should maintain animated webp', async () => {
@@ -256,6 +261,7 @@ export function runTests(ctx) {
       `${contentDispositionType}; filename="animated.webp"`
     )
     await expectWidth(res, 400, { expectAnimated: true })
+    expect(ctx.nextOutput).toContain(animatedWarnText)
   })
 
   if (ctx.dangerouslyAllowSVG) {
@@ -282,6 +288,7 @@ export function runTests(ctx) {
         'utf8'
       )
       expect(actual).toMatch(expected)
+      expect(ctx.nextOutput).not.toContain('The requested resource')
     })
   } else {
     it('should not allow vector svg', async () => {