chore: replace next/legacy/image with next/image (#1722)

* chore: removed unused import

* chore: removed broken image that was no longer broken from main images demo page

* test: add e2e test to test broken image error

* chore: fixed image import

* test: updated test validating image config

* test: fixed broken image test

* test: fixed broken image test as it's different when deployed

* test: used a real image to test an image not on the Next.js allow list

Author: nickytonline

cypress/integration/default/images.spec.ts

@@ -4,13 +4,12 @@
 describe('next/images', () => {
   it('should show static image from /public', () => {
     cy.visit('/')
-    cy.findByRole('img').should('be.visible').and(($img) => {
-      // "naturalWidth" and "naturalHeight" are set when the image loads
-      expect(
-        $img[0].naturalWidth,
-        'image has natural width'
-      ).to.be.greaterThan(0)
-    })
+    cy.findByRole('img')
+      .should('be.visible')
+      .and(($img) => {
+        // "naturalWidth" and "naturalHeight" are set when the image loads
+        expect($img[0].naturalWidth, 'image has natural width').to.be.greaterThan(0)
+      })
   })
 
   it('should show image using next/image', () => {
@@ -20,24 +19,27 @@ describe('next/images', () => {
 
   it('should show image allow-listed with remotePatterns', () => {
     cy.visit('/image')
-    cy.findByRole('img',{ name: /tawny frogmouth/i }).should('be.visible').and(($img) => {
-      // "naturalWidth" and "naturalHeight" are set when the image loads
-      expect(
-        $img[0].naturalWidth,
-        'image has natural width'
-      ).to.be.greaterThan(0)
-    })
+    cy.findByRole('img', { name: /shiba inu dog looks through a window/i })
+      .should('be.visible')
+      .and(($img) => {
+        // "naturalWidth" and "naturalHeight" are set when the image loads
+        expect($img[0].naturalWidth, 'image has natural width').to.be.greaterThan(0)
+      })
   })
 
-  it('should show a broken image if it is not on domains or remotePatterns allowlist', () => {
-    cy.visit('/image')
-    cy.findByRole('img',{ name: /jellybeans/i }).should('be.visible').and(($img) => {
-      expect(
-        $img[0].style.height
-      ).to.equal('0px')
-      expect(
-        $img[0].style.width
-      ).to.equal('0px')
+  it('should show throw if an image is not on the domains or remotePatterns allowlist', () => {
+    cy.visit('/broken-image')
+
+    // The image renders broken on the site
+    cy.findByRole('img', { name: /picture of the author/i }).then(($img) => {
+      // eslint-disable-next-line promise/no-nesting
+      cy.request({ url: $img[0].src, failOnStatusCode: false }).then((response) => {
+        // Navigating to the image itself give a forbidden error with a message explaining why.
+        expect(response.status).to.eq(403)
+        expect(response.body).to.include(
+          'URL not on allowlist: https://netlify-plugin-nextjs-demo.netlify.app/next-on-netlify.png',
+        )
+      })
     })
   })
 })

demos/default/next.config.js

@@ -71,7 +71,7 @@ module.exports = {
   },
   // https://nextjs.org/docs/basic-features/image-optimization#domains
   images: {
-    domains: ['raw.githubusercontent.com', 'upload.wikimedia.org'],
+    domains: ['raw.githubusercontent.com'],
     remotePatterns: [
       {
         hostname: '*.imgur.com',

demos/default/pages/broken-image.tsx

@@ -1,9 +1,9 @@
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 
 // This should cause an error, because broken-domain is not part of the configured next.config.js image domains
 const Images = () => (
   <Image
-    src="https://broken-domain/netlify/next-runtime/main/next-on-netlify.png"
+    src="https://netlify-plugin-nextjs-demo.netlify.app/next-on-netlify.png"
     alt="Picture of the author"
     width={500}
     height={500}

demos/default/pages/image.js

@@ -1,4 +1,4 @@
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 import img from './unsplash.jpg'
 import logo from './logomark.svg'
 
@@ -22,16 +22,6 @@ const Images = () => (
       />
       <Image src="https://i.imgur.com/bxSRS3Jb.png" alt="Tawny Frogmouth" width={160} height={160} />
     </p>
-
-    <p>
-      The following image should be broken as the domain is not added to domains or remotePatterns in next.config.js:
-    </p>
-    <Image
-      src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg"
-      alt="Jellybeans"
-      width={146}
-      height={32}
-    />
   </div>
 )
 

demos/static-root/pages/index.js

@@ -1,5 +1,4 @@
 import Head from 'next/head'
-import Image from 'next/legacy/image'
 import { useRouter } from 'next/router'
 import styles from '../styles/Home.module.css'
 

test/index.js

@@ -255,11 +255,11 @@ describe('onBuild()', () => {
     expect(config.config.env.NEXTAUTH_URL).toEqual(mockUserDefinedSiteUrl)
   })
 
-  test('sets the NEXTAUTH_URL to the DEPLOY_PRIME_URL when CONTEXT env variable is not \'production\'', async () => {
+  test("sets the NEXTAUTH_URL to the DEPLOY_PRIME_URL when CONTEXT env variable is not 'production'", async () => {
     const mockUserDefinedSiteUrl = chance.url()
     process.env.DEPLOY_PRIME_URL = mockUserDefinedSiteUrl
     process.env.URL = chance.url()
-    
+
     // See https://docs.netlify.com/configure-builds/environment-variables/#build-metadata for all possible values
     process.env.CONTEXT = 'deploy-preview'
 
@@ -277,8 +277,8 @@ describe('onBuild()', () => {
 
     expect(config.config.env.NEXTAUTH_URL).toEqual(mockUserDefinedSiteUrl)
   })
-  
-  test('sets the NEXTAUTH_URL to the user defined site URL when CONTEXT env variable is \'production\'', async () => {
+
+  test("sets the NEXTAUTH_URL to the user defined site URL when CONTEXT env variable is 'production'", async () => {
     const mockUserDefinedSiteUrl = chance.url()
     process.env.DEPLOY_PRIME_URL = chance.url()
     process.env.URL = mockUserDefinedSiteUrl
@@ -300,7 +300,6 @@ describe('onBuild()', () => {
 
     expect(config.config.env.NEXTAUTH_URL).toEqual(mockUserDefinedSiteUrl)
   })
-  
 
   test('sets the NEXTAUTH_URL specified in the netlify.toml or in the Netlify UI', async () => {
     const mockSiteUrl = chance.url()
@@ -615,7 +614,7 @@ describe('onBuild()', () => {
     const imageConfigPath = path.join(constants.INTERNAL_FUNCTIONS_SRC, IMAGE_FUNCTION_NAME, 'imageconfig.json')
     const imageConfigJson = await readJson(imageConfigPath)
 
-    expect(imageConfigJson.domains.length).toBe(2)
+    expect(imageConfigJson.domains.length).toBe(1)
     expect(imageConfigJson.remotePatterns.length).toBe(1)
     expect(imageConfigJson.responseHeaders).toStrictEqual({
       'X-Foo': mockHeaderValue,