Mock Service Worker is an API mocking library for browser and Node. It provides seamless mocking by interception of actual requests on the network level using Service Worker API. This makes your application unaware of any mocking being at place.
In this example we integrate Mock Service Worker with Next by following the next steps:
- Define a set of request handlers shared between client and server.
- Setup a Service Worker instance that would intercept all runtime client-side requests via
setupWorker
function. - Setup a "server" instance to intercept any server/build time requests (e.g. the one happening in
getServerSideProps
) viasetupServer
function.
Mocking is enabled using the NEXT_PUBLIC_API_MOCKING
environment variable, which for the sake of the example is saved inside .env
instead of .env.development
. In a real app you should move the variable to .env.development
because mocking should only be done for development.
Deploy the example using Vercel:
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-msw with-msw-app
# or
yarn create next-app --example with-msw with-msw-app
Deploy it to the cloud with Vercel (Documentation).