Trouble Mocking SSR (getInitialProps) API Calls with MSW in Next.js v12

[yashboura303]

Hi everyone,

I'm working on a project using Next.js v12, and I'm trying to integrate MSW to mock API calls that happen during server-side rendering specifically within getInitialProps().

I’ve reviewed the official with-msw example, but it doesn’t seem to work in my case. I’m using the latest MSW version, and while client-side requests are being intercepted properly, API calls triggered inside getInitialProps() during SSR are not intercepted at all.

I realize this is a relatively older version of Next.js, but upgrading isn’t feasible for the project at the moment.

Has anyone successfully mocked SSR (Node-side) requests with MSW in Next.js v12?
Is this achievable with the current version of MSW and Next.js v12?

Are there any workarounds or best practices you’d recommend for SSR mocking in this setup?

Would posting a code snippet help clarify the issue further?

Thanks in advance for any guidance!

[kettanaito]

Hi!

For older versions of Next.js, please see the official with-msw example repo inside the Next.js repo.

TL;DR You have to enable MSW in the app.tsx file, checking for Node.js environment first. Follow the link I attached above for the full example.