Not found route should return a JSON response depending on the headers

[eric-burel]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #43~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Fri Apr 21 16:51:08 UTC 2
    Binaries:
      Node: 18.10.0
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: 7.17.1
    Relevant packages:
      next: 13.4.4-canary.7
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Data fetching (gS(S)P, getInitialProps), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/eric-burel/json-404

To Reproduce

git clone https://github.com/eric-burel/json-404
npm install
npm run dev

Open the home page and check the browser log (or the network devtools), they show the result of a client-side fetch call to an URL that do not exist.

Describe the Bug

When a route is not-found, the default response is a not-found HTML page.

This page can be configured via  not-found.js, however I couldn't figure how to change the response type to JSON, depending on the request "Accept" headers.

Expected Behavior

The content of the not found response should have the expected type depending on the request "Accept" header, here JSON.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response