fix(next/image): improve error message when src={null} (#71398)

There is a React error that suggests the user change `src=""` to
`src={null}`.

> An empty string ("") was passed to the src attribute. This may cause
the browser to download the whole page again over the network. To fix
this, either do not render the element at all or pass null to src
instead of an empty string.

Even though `next/image` treats those both the same way, a user
attempting to use `src={null}` would cause the build to crash with a
confusing error message (JS only problem since TS would catch it much
earlier since src is a required prop).

```
⨯ TypeError: Cannot read properties of null (reading 'default')
    at isStaticRequire (.next/server/chunks/ssr/node_modules__pnpm_1b81c1._.js:142:16)
    at isStaticImport (.next/server/chunks/ssr/node_modules__pnpm_1b81c1._.js:148:40)
    at getImgProps (.next/server/chunks/ssr/node_modules__pnpm_1b81c1._.js:320:9)
    at .next/server/chunks/ssr/node_modules__pnpm_1b81c1._.js:2839:82
digest: "1613180311"
```

This PR ensures that `src={null}` will print the expected error that was
added back in a previous PR:

- #38847

Author: styfle

packages/next/src/shared/lib/get-img-props.ts

@@ -111,6 +111,7 @@ function isStaticImageData(
 
 function isStaticImport(src: string | StaticImport): src is StaticImport {
   return (
+    !!src &&
     typeof src === 'object' &&
     (isStaticRequire(src as StaticImport) ||
       isStaticImageData(src as StaticImport))

test/integration/next-image-new/app-dir/app/invalid-src-null/page.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Invalid Source Null</p>
+      <Image alt="alt" id="id" src={null} width={400} height={400} />
+    </div>
+  )
+}
+
+export default Page

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

@@ -900,6 +900,18 @@ function runTests(mode: 'dev' | 'server') {
       }, /Image is missing required "src" property/gm)
     })
 
+    it('should show null src error', async () => {
+      const browser = await webdriver(appPort, '/invalid-src-null')
+
+      await assertNoRedbox(browser)
+
+      await retry(async () => {
+        expect(
+          (await browser.log()).map((log) => log.message).join('\n')
+        ).toMatch(/Image is missing required "src" property/gm)
+      })
+    })
+
     it('should show invalid src error', async () => {
       const browser = await webdriver(appPort, '/invalid-src')
 

test/integration/next-image-new/default/pages/invalid-src-null.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Invalid Source Null</p>
+      <Image alt="alt" id="id" src={null} width={400} height={400} />
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/default/test/index.test.ts

@@ -14,6 +14,7 @@ import {
   nextBuild,
   nextStart,
   renderViaHTTP,
+  retry,
   waitFor,
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
@@ -901,6 +902,18 @@ function runTests(mode) {
       }, /Image is missing required "src" property/gm)
     })
 
+    it('should show null src error', async () => {
+      const browser = await webdriver(appPort, '/invalid-src-null')
+
+      await assertNoRedbox(browser)
+
+      await retry(async () => {
+        expect(
+          (await browser.log()).map((log) => log.message).join('\n')
+        ).toMatch(/Image is missing required "src" property/gm)
+      })
+    })
+
     it('should show invalid src error', async () => {
       const browser = await webdriver(appPort, '/invalid-src')
 

test/integration/next-image-new/typescript/pages/invalid.tsx

@@ -51,6 +51,8 @@ const Invalid = () => {
         width={500}
         height={500}
       />
+      <Image id="missing-src" alt="missing-src" width={500} height={500} />
+      <Image id="null-src" alt="null-src" src={null} width={500} height={500} />
       <p id="stubtext">This is the invalid usage</p>
     </div>
   )