Don't emit duplicate image files (#26843)

fixes #26607

This change makes it so the image loader plugin only emits a file while processing an image import for the client. The final generated image URL was already the same in SSR and CSR anyway, so this change doesn't have any functional impact.

I also changed the name of the static page in the image component tests, since it was causing some conflicts with the static assets folder.

packages/next/build/webpack-config.ts

@@ -1032,6 +1032,9 @@ export default async function getBaseWebpackConfig(
                 loader: 'next-image-loader',
                 issuer: { not: regexLikeCss },
                 dependency: { not: ['url'] },
+                options: {
+                  isServer,
+                },
               },
             ]
           : []),

packages/next/build/webpack/loaders/next-image-loader.js

@@ -7,6 +7,7 @@ const BLUR_QUALITY = 70
 const VALID_BLUR_EXT = ['jpeg', 'png', 'webp']
 
 async function nextImageLoader(content) {
+  const isServer = loaderUtils.getOptions(this).isServer
   const context = this.rootContext
   const opts = { context, content }
   const interpolatedName = loaderUtils.interpolateName(
@@ -46,7 +47,9 @@ async function nextImageLoader(content) {
     blurDataURL,
   })
 
-  this.emitFile(interpolatedName, content, null)
+  if (!isServer) {
+    this.emitFile(interpolatedName, content, null)
+  }
 
   return `${'export default '} ${stringifiedData};`
 }

test/integration/image-component/default/test/index.test.js

@@ -15,6 +15,7 @@ import {
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import { join } from 'path'
+import { existsSync } from 'fs'
 
 jest.setTimeout(1000 * 80)
 
@@ -555,6 +556,13 @@ function runTests(mode) {
         /Image with src (.*)jpg(.*) is smaller than 40x40. Consider removing(.*)/gm
       )
     })
+  } else {
+    //server-only tests
+    it('should not create an image folder in server/chunks', async () => {
+      expect(
+        existsSync(join(appDir, '.next/server/chunks/static/image'))
+      ).toBeFalsy()
+    })
   }
 
   it('should correctly ignore prose styles', async () => {

test/integration/image-component/default/test/static.test.js

@@ -18,7 +18,7 @@ let app
 let browser
 let html
 
-const indexPage = new File(join(appDir, 'pages/static.js'))
+const indexPage = new File(join(appDir, 'pages/static-img.js'))
 
 const runTests = () => {
   it('Should allow an image with a static src to omit height and width', async () => {
@@ -97,8 +97,8 @@ describe('Static Image Component Tests', () => {
     await nextBuild(appDir)
     appPort = await findPort()
     app = await nextStart(appDir, appPort)
-    html = await renderViaHTTP(appPort, '/static')
-    browser = await webdriver(appPort, '/static')
+    html = await renderViaHTTP(appPort, '/static-img')
+    browser = await webdriver(appPort, '/static-img')
   })
   afterAll(() => {
     killApp(app)