fix(#39706): add avif support for node serve static (#39733)

The PR fixes #39706 by adding `avif` mime type directly to `send`. The PR also removes the previous avif workaround for image optimizer.

Note: The PR is still a workaround for now. I will submit a PR to `pillarjs/send` to help them update `mime` to fix the issue once and for all. But now `send.mime.define` just works.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

packages/next/server/serve-static.ts

@@ -1,6 +1,12 @@
 import { IncomingMessage, ServerResponse } from 'http'
 import send from 'next/dist/compiled/send'
 
+// TODO: Remove this once "send" has updated the "mime", or next.js use custom version of "mime"
+// Although "mime" has already add avif in version 2.4.7, "send" is still using mime@1.6.0
+send.mime.define({
+  'image/avif': ['avif'],
+})
+
 export function serveStatic(
   req: IncomingMessage,
   res: ServerResponse,
@@ -21,10 +27,6 @@ export function serveStatic(
 }
 
 export function getContentType(extWithoutDot: string): string | null {
-  if (extWithoutDot === 'avif') {
-    // TODO: update "mime" package
-    return 'image/avif'
-  }
   const { mime } = send
   if ('getType' in mime) {
     // 2.0
@@ -35,10 +37,6 @@ export function getContentType(extWithoutDot: string): string | null {
 }
 
 export function getExtension(contentType: string): string | null {
-  if (contentType === 'image/avif') {
-    // TODO: update "mime" package
-    return 'avif'
-  }
   const { mime } = send
   if ('getExtension' in mime) {
     // 2.0

test/integration/file-serving/test/index.test.js

@@ -61,6 +61,13 @@ const runTests = () => {
     expect(await res.text()).toBe('hi')
   })
 
+  it('should serve avif image with correct content-type', async () => {
+    // vercel-icon-dark.avif is downloaded from https://vercel.com/design and transformed to avif on avif.io
+    const res = await fetchViaHTTP(appPort, '/vercel-icon-dark.avif')
+    expect(res.status).toBe(200)
+    expect(res.headers.get('content-type')).toBe('image/avif')
+  })
+
   // checks against traversal requests from
   // https://github.com/swisskyrepo/PayloadsAllTheThings/blob/master/Directory%20Traversal/Intruder/traversals-8-deep-exotic-encoding.txt