Mock serverside API requests using NextJS and MSWjs

[@eddiejaoude]

See MSWjs and NextJS with Instrumentation feature in a real open source project github.com/EddieHubCommunity/HealthCheck

[@fransjoakimtitulaer2404]

Thank you! It's been hard finding good resources covering this

[@eddiejaoude]

yes I found it difficult when researching also. Thank you for the great feedback. I have a blog version also if you need for reference

[@kakseigrae]

Super helpful, thank you! For the morons like me who rush to use Next 15, you must not add the experimental object as it's no longer experimental feature and you must put the instrumentarium file in the root of your project (not ./app), where package.json lives. Cheers!

[@eddiejaoude]

Thanks for the great feedback! Ah yes, the new version doesn't require the extra config. Thanks for the reminder

[@harshitpant1743]

This is super helpful @kakseigrae , I am using 15 as well. But the import {setupServer} from 'msw/node' is not working, Also 'msw/browser' does not work for me . Do you know the reason for this?

[@jayraldempino1944]

I use mswjs in client side which sooo good. In terms of the mock data, fakerjs is also better with it. Thanks for this, man! Thumbs up for this tutorial.

[@eddiejaoude]

Thank you for the great feedback!!

[@euanmorgann]

Have you managed to get this working with recent versions of msw? For me any version greater than 2.4.3 is completely broken

[@eddiejaoude]

I have not tried yet, i will try soon on my new project and latest versions.

[@johnaroj]

for serveractions you just mock it with /api/route and use a POST or there is another way to write functions?

[@eddiejaoude]

if you mock a function it is more of a unit test, by mocking external api calls, you are doing more of an end to end test

[@dartess]

Unfortunately this doesn't work in build time, only in dev time.

[@euanmorgann]

It's not really intended for build time it's meant for tests / local dev

[@eddiejaoude]

yep 👍

[@minhazulabedin9603]

I always get the error: Package path ./browser is not exported from package

[@eddiejaoude]

i am not using the browserfile, i am using the node file. what are you trying to do?

[@JibbaJabber]

#Noice

[@eddiejaoude]

thank you

[@negarmir3334]

Hi @eddiejaoude I am using the nextjs15 with mswjs 2.6.8. I just added the instrumentation.ts in the root of app next to package.json but it is not working. Do you have any idea how to fix it?

[@eddiejaoude]

it is unclear what is not working in your project, let's start at the beginning, does your instrumentation file trigger?