Image Optimization API should 404 when loader is not default (#18211)

We currently always accept requests to the new `/_next/image` endpoint, even when it should not be used.

Instead, we should check to see if the default loader is used as a signal to enable this API.

Other loaders (such as cloudinary) will not go through the Next.js API so there is no need to expose this, instead we 404.

- Analogous to vercel/vercel#5321
- Related to #18122

Author: styfle

packages/next/next-server/server/image-optimizer.ts

@@ -30,7 +30,13 @@ export async function imageOptimizer(
   parsedUrl: UrlWithParsedQuery
 ) {
   const { nextConfig, distDir } = server
-  const { sizes = [], domains = [] } = nextConfig?.images || {}
+  const { sizes = [], domains = [], loader } = nextConfig?.images || {}
+
+  if (loader !== 'default') {
+    await server.render404(req, res, parsedUrl)
+    return { finished: true }
+  }
+
   const { headers } = req
   const { url, w, q } = parsedUrl.query
   const mimeType = mediaType(headers.accept, MIME_TYPES) || ''

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

@@ -421,4 +421,29 @@ describe('Image Optimizer', () => {
 
     runTests({ w: size, isDev: false, domains })
   })
+
+  describe('dev support next.config.js cloudinary loader', () => {
+    beforeAll(async () => {
+      const json = JSON.stringify({
+        images: {
+          loader: 'cloudinary',
+          path: 'https://example.com/act123/',
+        },
+      })
+      nextConfig.replace('{ /* replaceme */ }', json)
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+      nextConfig.restore()
+      await fs.remove(imagesDir)
+    })
+    it('should 404 when loader is not default', async () => {
+      const query = { w: 320, q: 90, url: '/test.svg' }
+      const opts = { headers: { accept: 'image/webp' } }
+      const res = await fetchViaHTTP(appPort, '/_next/image', query, opts)
+      expect(res.status).toBe(404)
+    })
+  })
 })