Disable Image Optimization API when next.config.js has unoptimized: true

packages/next/build/index.ts

@@ -2726,14 +2726,20 @@ export default async function build(
         pathname: makeRe(p.pathname ?? '**').source,
       }))
 
-      await promises.writeFile(
-        path.join(distDir, IMAGES_MANIFEST),
-        JSON.stringify({
-          version: 1,
-          images,
-        }),
-        'utf8'
-      )
+      if (images.unoptimized) {
+        // Skip writing the images manifest file
+        // so that any downstream consumer will know
+        // to disable the Image Optimization API
+      } else {
+        await promises.writeFile(
+          path.join(distDir, IMAGES_MANIFEST),
+          JSON.stringify({
+            version: 1,
+            images,
+          }),
+          'utf8'
+        )
+      }
       await promises.writeFile(
         path.join(distDir, EXPORT_MARKER),
         JSON.stringify({

packages/next/server/next-server.ts

@@ -407,7 +407,7 @@ export default class NextNodeServer extends BaseServer {
           }
           const imagesConfig = this.nextConfig.images
 
-          if (imagesConfig.loader !== 'default') {
+          if (imagesConfig.loader !== 'default' || imagesConfig.unoptimized) {
             await this.render404(req, res)
             return { finished: true }
           }

test/integration/image-optimizer/test/index.test.ts

@@ -558,6 +558,36 @@ describe('Image Optimizer', () => {
     })
   })
 
+  describe('images.unoptimized in next.config.js', () => {
+    let app
+    let appPort
+
+    beforeAll(async () => {
+      nextConfig.replace(
+        '{ /* replaceme */ }',
+        JSON.stringify({
+          images: {
+            unoptimized: true,
+          },
+        })
+      )
+      await cleanImagesDir({ imagesDir })
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+      nextConfig.restore()
+    })
+    it('should 404 when unoptimized', async () => {
+      const size = 384 // defaults defined in server/config.ts
+      const query = { w: size, q: 75, url: '/test.jpg' }
+      const opts = { headers: { accept: 'image/webp' } }
+      const res = await fetchViaHTTP(appPort, '/_next/image', query, opts)
+      expect(res.status).toBe(404)
+    })
+  })
+
   describe('External rewrite support with for serving static content in images', () => {
     let app
     let appPort