[FEAT] Support Next.js (app directory)

[custardcream98]

No description provided.

[custardcream98]

Update:

I'm building a WebSocket server for msw-devtools that runs concurrently with the next dev command.

Here's the approach I have in mind:

1. Use a tool like concurrently to start the WebSocket server. (concurrently "msw-devtools-server" "next dev")
2. Connect the server-side MSW worker, which runs in the Node thread of Next.js, to the WebSocket server.
3. Store mock data in a file like mockList.json. This file is used as the initial mock data that gets registered when the Next.js app restarts and MSW is set up again, ensuring that mocks are applied correctly even during the first render.
4. When a mock handler is modified from the devtools client, notify the WebSocket server.
5. The WebSocket server receives this update and saves it to mockList.json.
6. The server-side MSW worker is also notified of the update to refresh its mock handlers.

I have developed this approach to some extent, but since applying MSW to Next.js is quite challenging, it is difficult to make it work seamlessly.

The two bugs I'm currently trying to solve are:

• During the first render, fetch requests in server components respond with the mocked data as expected, but on refresh, the mocks are not applied.
• When mocks are modified from the client, the changes seem to be registered correctly in the server-side MSW, but somehow, they are not applied.

The branch I am working on is feat/support-next-js

[custardcream98]

Despite the limitations mentioned above, the developed WebSocket server itself seems useful, so I plan to separate it and release it first. With this, users will have more flexibility in handling locally stored handlers according to their preferences.