fix(server): serve static assets with standard MIME types (#2713)

Boyeep · james-elicx · web-flow · commit b779754ee6e1 · 2026-07-27T14:18:05.000Z
* fix(server): serve static assets with standard MIME types

* fix(server): add UTF-8 to textual static asset types

* fix(server): match Next static charset casing

* fix(server): lowercase MIME charset values

---------

Co-authored-by: James &lt;james@eli.cx&gt;
diff --git a/packages/vinext/src/server/prod-server.ts b/packages/vinext/src/server/prod-server.ts
@@ -24,7 +24,7 @@ import fs from "node:fs";
 import fsp from "node:fs/promises";
 import path from "pathslash";
 import zlib from "node:zlib";
-import { StaticFileCache, CONTENT_TYPES, etagFromFilenameHash } from "./static-file-cache.js";
+import { StaticFileCache, contentTypeForPath, etagFromFilenameHash } from "./static-file-cache.js";
 import {
   isImageOptimizationPath,
   IMAGE_CONTENT_SECURITY_POLICY,
@@ -690,7 +690,7 @@ async function tryServeStatic(
   if (!resolved) return false;
 
   const ext = path.extname(resolved.path);
-  const ct = CONTENT_TYPES[ext] ?? "application/octet-stream";
+  const ct = contentTypeForPath(resolved.path);
   // Mirror the StaticFileCache's `isHashed` rule: assets under Vite's
   // `assetsDir` carry a content hash. `pathname` always has a leading `/`,
   // so a single `includes` covers both the root-level `/<ASSET_PREFIX_URL_DIR>/...`
@@ -1446,8 +1446,7 @@ async function startAppRouterServer(options: AppRouterServerOptions) {
       }
       // Block SVG and other unsafe content types by checking the file extension.
       // SVG is only allowed when dangerouslyAllowSVG is enabled in next.config.js.
-      const ext = path.extname(params.imageUrl).toLowerCase();
-      const ct = CONTENT_TYPES[ext] ?? "application/octet-stream";
+      const ct = contentTypeForPath(params.imageUrl);
       if (!isSafeImageContentType(ct, imageConfig?.dangerouslyAllowSVG)) {
         res.writeHead(400);
         res.end("The requested resource is not an allowed image type");
@@ -1799,8 +1798,7 @@ async function startPagesRouterServer(options: PagesRouterServerOptions) {
       }
       // Block SVG and other unsafe content types.
       // SVG is only allowed when dangerouslyAllowSVG is enabled.
-      const ext = path.extname(params.imageUrl).toLowerCase();
-      const ct = CONTENT_TYPES[ext] ?? "application/octet-stream";
+      const ct = contentTypeForPath(params.imageUrl);
       if (!isSafeImageContentType(ct, pagesImageConfig?.dangerouslyAllowSVG)) {
         res.writeHead(400);
         res.end("The requested resource is not an allowed image type");
diff --git a/packages/vinext/src/server/static-file-cache.ts b/packages/vinext/src/server/static-file-cache.ts
@@ -17,28 +17,45 @@ import { ASSET_PREFIX_URL_DIR } from "../utils/asset-prefix.js";
 
 /** Content-type lookup for static assets. Shared with prod-server.ts. */
 export const CONTENT_TYPES: Record<string, string> = {
-  ".js": "application/javascript",
-  ".mjs": "application/javascript",
-  ".css": "text/css",
+  ".avif": "image/avif",
+  ".bmp": "image/bmp",
+  ".csv": "text/csv; charset=utf-8",
+  ".eot": "application/vnd.ms-fontobject",
+  ".gif": "image/gif",
+  ".heic": "image/heic",
+  ".js": "application/javascript; charset=utf-8",
+  ".mjs": "application/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
   ".html": "text/html; charset=utf-8",
-  ".json": "application/json",
-  ".txt": "text/plain; charset=utf-8",
-  ".png": "image/png",
-  ".jpg": "image/jpeg",
+  ".ico": "image/x-icon",
   ".jpeg": "image/jpeg",
-  ".gif": "image/gif",
+  ".jpg": "image/jpeg",
+  ".json": "application/json; charset=utf-8",
+  ".map": "application/json; charset=utf-8",
+  ".mp3": "audio/mpeg",
+  ".mp4": "video/mp4",
+  ".ogg": "audio/ogg",
+  ".ogv": "video/ogg",
+  ".pdf": "application/pdf",
+  ".png": "image/png",
+  ".rsc": "text/x-component",
   ".svg": "image/svg+xml",
-  ".ico": "image/x-icon",
-  ".woff": "font/woff",
-  ".woff2": "font/woff2",
   ".ttf": "font/ttf",
-  ".eot": "application/vnd.ms-fontobject",
+  ".txt": "text/plain; charset=utf-8",
+  ".wasm": "application/wasm",
+  ".webm": "video/webm",
+  ".webmanifest": "application/manifest+json",
   ".webp": "image/webp",
-  ".avif": "image/avif",
-  ".map": "application/json",
-  ".rsc": "text/x-component",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".xml": "application/xml",
 };
 
+/** Resolve a path's MIME type with case-insensitive extension matching. */
+export function contentTypeForPath(filePath: string): string {
+  return CONTENT_TYPES[path.extname(filePath).toLowerCase()] ?? "application/octet-stream";
+}
+
 /**
  * Files below this size are buffered in memory at startup for zero-syscall
  * serving via res.end(buffer). Above this, files stream via createReadStream.
@@ -118,7 +135,7 @@ export class StaticFileCache {
       if (relativePath.startsWith(".vite/") || relativePath === ".vite") continue;
 
       const ext = path.extname(relativePath);
-      const contentType = CONTENT_TYPES[ext] ?? "application/octet-stream";
+      const contentType = contentTypeForPath(relativePath);
       // Files under Vite's `assetsDir` are content-hashed. The default
       // layout writes to `<ASSET_PREFIX_URL_DIR>/` (Next.js's canonical
       // convention); when `assetPrefix` is a path prefix the layout
diff --git a/tests/serve-static.test.ts b/tests/serve-static.test.ts
@@ -7,6 +7,7 @@ import fsp from "node:fs/promises";
 import path from "node:path";
 import os from "node:os";
 import zlib from "node:zlib";
+import http from "node:http";
 import { StaticFileCache } from "../packages/vinext/src/server/static-file-cache.js";
 import { tryServeStatic } from "../packages/vinext/src/server/prod-server.js";
 import type { IncomingMessage, ServerResponse } from "node:http";
@@ -131,7 +132,7 @@ describe("tryServeStatic (with StaticFileCache)", () => {
     expect(served).toBe(true);
     expect(captured.headers["Content-Encoding"]).toBe("br");
     expect(captured.headers["Content-Length"]).toBe(String(brContent.length));
-    expect(captured.headers["Content-Type"]).toBe("application/javascript");
+    expect(captured.headers["Content-Type"]).toBe("application/javascript; charset=utf-8");
     // Body should be the precompressed brotli content
     const decompressed = zlib.brotliDecompressSync(captured.body).toString();
     expect(decompressed).toBe(jsContent);
@@ -480,7 +481,7 @@ describe("tryServeStatic (with StaticFileCache)", () => {
     await captured.ended;
     expect(served).toBe(true);
     expect(captured.status).toBe(200);
-    expect(captured.headers["Content-Type"]).toBe("application/javascript");
+    expect(captured.headers["Content-Type"]).toBe("application/javascript; charset=utf-8");
     expect(captured.headers["Content-Length"]).toBe(String(jsContent.length));
     expect(captured.body.length).toBe(0); // no body for HEAD
   });
@@ -729,7 +730,7 @@ describe("tryServeStatic (with StaticFileCache)", () => {
     await captured.ended;
     expect(served).toBe(true);
     expect(captured.status).toBe(200);
-    expect(captured.headers["Content-Type"]).toBe("application/javascript");
+    expect(captured.headers["Content-Type"]).toBe("application/javascript; charset=utf-8");
     expect(captured.body.toString()).toBe("slow path content");
   });
 
@@ -795,6 +796,63 @@ describe("tryServeStatic (with StaticFileCache)", () => {
     expect(captured.body.length).toBe(0);
   });
 
+  it("serves Next-compatible MIME types over a real HTTP response", async () => {
+    // Next.js uses its bundled `send` MIME database, which adds UTF-8 to
+    // text/*, application/javascript, and application/json responses.
+    // https://github.com/vercel/next.js/blob/canary/packages/next/src/server/serve-static.ts
+    await Promise.all([
+      writeFile(clientDir, "script.js", "console.log('ok')"),
+      writeFile(clientDir, "style.css", "body {}"),
+      writeFile(clientDir, "data.json", "{}"),
+      writeFile(clientDir, "script.js.map", "{}"),
+      writeFile(clientDir, "table.csv", "name,value"),
+      writeFile(clientDir, "module.wasm", Buffer.from([0, 97, 115, 109])),
+    ]);
+
+    for (const cache of [await StaticFileCache.create(clientDir), undefined]) {
+      const server = http.createServer((req, res) => {
+        void tryServeStatic(req, res, clientDir, req.url ?? "/", false, cache)
+          .then((served) => {
+            if (!served) {
+              res.statusCode = 404;
+              res.end();
+            }
+          })
+          .catch((error: Error) => res.destroy(error));
+      });
+      await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
+
+      try {
+        const address = server.address();
+        if (!address || typeof address === "string") throw new Error("HTTP server did not bind");
+        const origin = `http://127.0.0.1:${address.port}`;
+
+        for (const [pathname, expected] of [
+          ["/script.js", "application/javascript; charset=utf-8"],
+          ["/style.css", "text/css; charset=utf-8"],
+          ["/data.json", "application/json; charset=utf-8"],
+          ["/script.js.map", "application/json; charset=utf-8"],
+          ["/table.csv", "text/csv; charset=utf-8"],
+          ["/module.wasm", "application/wasm"],
+        ] as const) {
+          const response = await fetch(origin + pathname);
+          expect(response.status).toBe(200);
+          expect(response.headers.get("content-type")).toBe(expected);
+        }
+
+        const headResponse = await fetch(origin + "/script.js", { method: "HEAD" });
+        expect(headResponse.headers.get("content-type")).toBe(
+          "application/javascript; charset=utf-8",
+        );
+        expect(await headResponse.text()).toBe("");
+      } finally {
+        await new Promise<void>((resolve, reject) => {
+          server.close((error) => (error ? reject(error) : resolve()));
+        });
+      }
+    }
+  });
+
   // ── URL-encoded characters in path ─────────────────────────────
   //
   // Regression test for https://github.com/cloudflare/vinext/issues/1472
@@ -829,7 +887,7 @@ describe("tryServeStatic (with StaticFileCache)", () => {
     await captured.ended;
     expect(served).toBe(true);
     expect(captured.status).toBe(200);
-    expect(captured.headers["Content-Type"]).toBe("text/css");
+    expect(captured.headers["Content-Type"]).toBe("text/css; charset=utf-8");
     expect(captured.body.toString()).toBe(cssContent);
   });
 
@@ -851,7 +909,7 @@ describe("tryServeStatic (with StaticFileCache)", () => {
     await captured.ended;
     expect(served).toBe(true);
     expect(captured.status).toBe(200);
-    expect(captured.headers["Content-Type"]).toBe("text/css");
+    expect(captured.headers["Content-Type"]).toBe("text/css; charset=utf-8");
     expect(captured.body.toString()).toBe(cssContent);
   });
 
@@ -880,7 +938,7 @@ describe("tryServeStatic (with StaticFileCache)", () => {
     await captured.ended;
     expect(served).toBe(true);
     expect(captured.status).toBe(200);
-    expect(captured.headers["Content-Type"]).toBe("text/css");
+    expect(captured.headers["Content-Type"]).toBe("text/css; charset=utf-8");
     expect(captured.body.toString()).toBe(cssContent);
   });
 
diff --git a/tests/static-file-cache.test.ts b/tests/static-file-cache.test.ts
@@ -74,7 +74,7 @@ describe("StaticFileCache", () => {
     const entry = cache.lookup("/_next/static/index-abc123.js");
 
     expect(entry).toBeDefined();
-    expect(entry!.original.headers["Content-Type"]).toBe("application/javascript");
+    expect(entry!.original.headers["Content-Type"]).toBe("application/javascript; charset=utf-8");
     expect(entry!.original.headers["Content-Length"]).toBe("12"); // "const x = 1;"
     expect(entry!.original.path).toBe(
       toSlash(path.join(clientDir, "_next/static/index-abc123.js")),
@@ -322,10 +322,10 @@ describe("StaticFileCache", () => {
     const cache = await StaticFileCache.create(clientDir);
 
     expect(cache.lookup("/_next/static/style-aaa.css")!.original.headers["Content-Type"]).toBe(
-      "text/css",
+      "text/css; charset=utf-8",
     );
     expect(cache.lookup("/_next/static/data-bbb.json")!.original.headers["Content-Type"]).toBe(
-      "application/json",
+      "application/json; charset=utf-8",
     );
     expect(cache.lookup("/logo.svg")!.original.headers["Content-Type"]).toBe("image/svg+xml");
     expect(cache.lookup("/photo.webp")!.original.headers["Content-Type"]).toBe("image/webp");
@@ -341,6 +341,34 @@ describe("StaticFileCache", () => {
     );
   });
 
+  it("serves common web assets with their standard content types", async () => {
+    await Promise.all([
+      writeFile(clientDir, "module.wasm", "wasm"),
+      writeFile(clientDir, "movie.mp4", "video"),
+      writeFile(clientDir, "document.pdf", "pdf"),
+      writeFile(clientDir, "site.webmanifest", "{}"),
+      writeFile(clientDir, "feed.xml", "<feed />"),
+    ]);
+
+    const cache = await StaticFileCache.create(clientDir);
+
+    expect(cache.lookup("/module.wasm")!.original.headers["Content-Type"]).toBe("application/wasm");
+    expect(cache.lookup("/movie.mp4")!.original.headers["Content-Type"]).toBe("video/mp4");
+    expect(cache.lookup("/document.pdf")!.original.headers["Content-Type"]).toBe("application/pdf");
+    expect(cache.lookup("/site.webmanifest")!.original.headers["Content-Type"]).toBe(
+      "application/manifest+json",
+    );
+    expect(cache.lookup("/feed.xml")!.original.headers["Content-Type"]).toBe("application/xml");
+  });
+
+  it("matches file extensions case-insensitively", async () => {
+    await writeFile(clientDir, "logo.SVG", "<svg />");
+
+    const cache = await StaticFileCache.create(clientDir);
+
+    expect(cache.lookup("/logo.SVG")!.original.headers["Content-Type"]).toBe("image/svg+xml");
+  });
+
   // ── Nested directory scanning ──────────────────────────────────
 
   it("scans nested directories recursively", async () => {
