fix: error when image width={Infinity}

packages/next/src/client/image.tsx

@@ -717,19 +717,27 @@ const Image = forwardRef<HTMLImageElement | null, ImageProps>(
             throw new Error(
               `Image with src "${src}" is missing required "width" property.`
             )
-          } else if (isNaN(widthInt)) {
+          } else if (Number.isNaN(widthInt)) {
             throw new Error(
               `Image with src "${src}" has invalid "width" property. Expected a numeric value in pixels but received "${width}".`
             )
+          } else if (!Number.isFinite(widthInt)) {
+            throw new Error(
+              `Image with src "${src}" has invalid "width" property. Expected a numeric value in pixels but received not isFinite.`
+            )
           }
           if (typeof heightInt === 'undefined') {
             throw new Error(
               `Image with src "${src}" is missing required "height" property.`
             )
-          } else if (isNaN(heightInt)) {
+          } else if (Number.isNaN(heightInt)) {
             throw new Error(
               `Image with src "${src}" has invalid "height" property. Expected a numeric value in pixels but received "${height}".`
             )
+          } else if (!Number.isFinite(heightInt)) {
+            throw new Error(
+              `Image with src "${src}" has invalid "height" property. Expected a numeric value in pixels but received not isFinite.`
+            )
           }
         }
       }

test/integration/next-image-new/app-dir/test/index.test.ts

@@ -824,6 +824,15 @@ function runTests(mode) {
       )
     })
 
+    it('should show error when Infinity width prop', async () => {
+      const browser = await webdriver(appPort, '/invalid-notFinite-width')
+
+      expect(await hasRedbox(browser, true)).toBe(true)
+      expect(await getRedboxHeader(browser)).toContain(
+        `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received not isFinite.`
+      )
+    })
+
     it('should show error when invalid height prop', async () => {
       const browser = await webdriver(appPort, '/invalid-height')
 
@@ -833,6 +842,15 @@ function runTests(mode) {
       )
     })
 
+    it('should show error when Infinity height prop', async () => {
+      const browser = await webdriver(appPort, '/invalid-notFinite-height')
+
+      expect(await hasRedbox(browser, true)).toBe(true)
+      expect(await getRedboxHeader(browser)).toContain(
+        `Image with src "/test.jpg" has invalid "height" property. Expected a numeric value in pixels but received not isFinite.`
+      )
+    })
+
     it('should show missing alt error', async () => {
       const browser = await webdriver(appPort, '/missing-alt')
 

test/integration/next-image-new/default/pages/invalid-notFinite-height.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div>
+      <p>Infinity height</p>
+      <Image src="/test.jpg" width={400} height={Infinity} />
+    </div>
+  )
+}

test/integration/next-image-new/default/pages/invalid-notFinite-width.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div>
+      <p>Infinity width</p>
+      <Image src="/test.jpg" width={Infinity} height={300} />
+    </div>
+  )
+}