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

…true` (#44205)

This fixes a bug where next.config.js was configured with `images.unoptimzed: true` but the Image Optimization API was not truly disabled. Since there is no way to override the config at the component level, its safe to say the API can be disabled.

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