custardcream98 / msw-devtools

Framework Agnostic Devtools UI for Managing MSW Request Handlers
https://msw-devtools.shiwoo.dev
Apache License 2.0
3 stars 0 forks source link

[FEAT] Support Next.js (app directory) #68

Open custardcream98 opened 3 weeks ago

custardcream98 commented 2 weeks ago

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:

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

custardcream98 commented 2 weeks ago

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.