diff --git a/packages/next/server/web/spec-extension/response.ts b/packages/next/server/web/spec-extension/response.ts
index 3be0ead678bef..862f0935164cd 100644
--- a/packages/next/server/web/spec-extension/response.ts
+++ b/packages/next/server/web/spec-extension/response.ts
@@ -31,15 +31,10 @@ export class NextResponse extends Response {
     return this[INTERNALS].cookies
   }
 
-  static json(body: any, init?: ResponseInit) {
-    const { headers, ...responseInit } = init || {}
-    return new NextResponse(JSON.stringify(body), {
-      ...responseInit,
-      headers: {
-        ...headers,
-        'content-type': 'application/json',
-      },
-    })
+  static json(body: any, init?: ResponseInit): NextResponse {
+    // @ts-expect-error This is not in lib/dom right now, and we can't augment it.
+    const response: Response = Response.json(body, init)
+    return new NextResponse(response.body, response)
   }
 
   static redirect(url: string | NextURL | URL, status = 307) {
diff --git a/test/unit/web-runtime/next-response.test.ts b/test/unit/web-runtime/next-response.test.ts
index aea5b59646032..9a9be22243bf6 100644
--- a/test/unit/web-runtime/next-response.test.ts
+++ b/test/unit/web-runtime/next-response.test.ts
@@ -4,7 +4,7 @@
 
 import { NextResponse } from 'next/server/web/spec-extension/response'
 
-const toJSON = async (response) => ({
+const toJSON = async (response: Response) => ({
   body: await response.json(),
   contentType: response.headers.get('content-type'),
   status: response.status,
@@ -53,3 +53,8 @@ it('can be cloned', async () => {
     server: 'Vercel',
   })
 })
+
+it('can return JSON', async () => {
+  const response = NextResponse.json({ hello: 'world' })
+  expect(await response.json()).toEqual({ hello: 'world' })
+})