rsnext/examples/with-msw
leung018 66597be8a7
Add .yarn/install-state.gz to .gitignore (#56637)
### Reason for making this change
https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again.
In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited.

### Remaining work
I apologize for only modifying one template initially to initiate the discussion first.

If this change is agreed upon,  it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change.
2023-10-18 16:34:48 +00:00
..
mocks examples/with-msw-typescript (#39196) 2022-07-31 15:54:30 +00:00
pages examples/with-msw-typescript (#39196) 2022-07-31 15:54:30 +00:00
public Example: Treat "mockServiceWorker" as a generated artifact in "with-msw" (#25515) 2021-05-27 23:18:15 +00:00
.env.development Update with-msw example (#20335) 2020-12-28 14:22:10 -05:00
.env.production Update with-msw example (#20335) 2020-12-28 14:22:10 -05:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
next-env.d.ts Remove incorrect entries for pnpm debug log (#47241) 2023-03-26 22:26:05 -07:00
package.json chore(examples): with-msw update msw (#43224) 2022-11-22 11:33:44 +01:00
README.md update example Deploy button URLs (#48842) 2023-04-26 13:31:44 -04:00
tsconfig.json examples/with-msw-typescript (#39196) 2022-07-31 15:54:30 +00:00

Mock Service Worker Example

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:

  1. Define a set of request handlers shared between client and server.
  2. Setup a Service Worker instance that would intercept all runtime client-side requests via setupWorker function.
  3. Setup a "server" instance to intercept any server/build time requests (e.g. the one happening in getServerSideProps) via setupServer function.

Mocking is enabled using the NEXT_PUBLIC_API_MOCKING environment variable. By default, mocking is enabled for both development and production. This allows you to have working preview deployments before implementing an actual API. To disable MSW for a specific environment, change the environment variable value in the file corresponding to the environment from enabled to disabled.

The service worker file will automatically be generated in public/mockServiceWorker.js after installing node_modules. If the file is not generated, you can explicitly generate it with the following command:

npx msw init public/

More information on this setup step can be found in the MSW documentation here.

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-msw with-msw-app
yarn create next-app --example with-msw with-msw-app
pnpm create next-app --example with-msw with-msw-app

Deploy it to the cloud with Vercel (Documentation).