add next.js app router example

.github/workflows/examples.yaml

@@ -150,3 +150,16 @@ jobs:
           version: 8.15
       - run: pnpm install --filter with-karma
       - run: pnpm test --filter with-karma
+
+  next:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7.12.1
+      - run: pnpm install --filter with-next
+      - run: pnpm test --filter with-next

examples/with-angular/src/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.4'
-const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
+const PACKAGE_VERSION = '2.4.2'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,12 +62,7 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
+        payload: true,
       })
       break
     }
@@ -160,10 +155,6 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
-  if (activeClientIds.has(event.clientId)) {
-    return client
-  }
-
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -192,14 +183,12 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
-
-    // Remove the "accept" header value that marked this request as passthrough.
-    // This prevents request alteration and also keeps it compliant with the
-    // user-defined CORS policies.
-    headers.delete('accept', 'msw/passthrough')
+    const headers = Object.fromEntries(requestClone.headers.entries())
+
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
 
     return fetch(requestClone, { headers })
   }

examples/with-karma/test/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.4'
-const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
+const PACKAGE_VERSION = '2.4.2'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,12 +62,7 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
+        payload: true,
       })
       break
     }
@@ -160,10 +155,6 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
-  if (activeClientIds.has(event.clientId)) {
-    return client
-  }
-
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -192,14 +183,12 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
-
-    // Remove the "accept" header value that marked this request as passthrough.
-    // This prevents request alteration and also keeps it compliant with the
-    // user-defined CORS policies.
-    headers.delete('accept', 'msw/passthrough')
+    const headers = Object.fromEntries(requestClone.headers.entries())
+
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
 
     return fetch(requestClone, { headers })
   }

examples/with-next/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-next/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/with-next/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { MSWProvider } from './msw-provider'
+
+if (process.env.NEXT_RUNTIME === 'nodejs') {
+  const { server } = require('@/mocks/node')
+  server.listen()
+}
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <MSWProvider>{children}</MSWProvider>
+      </body>
+    </html>
+  )
+}

examples/with-next/app/movie-list.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useState } from 'react'
+
+export type Movie = {
+  id: string
+  title: string
+}
+
+export function MovieList() {
+  const [movies, setMovies] = useState<Array<Movie>>([])
+
+  const fetchMovies = () => {
+    fetch('/graphql', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: `
+          query ListMovies {
+            movies {
+              id
+              title
+            }
+          }
+        `,
+      }),
+    })
+      .then((response) => response.json())
+      .then((response) => {
+        setMovies(response.data.movies)
+      })
+      .catch(() => setMovies([]))
+  }
+
+  return (
+    <div>
+      <button id="fetch-movies-button" onClick={fetchMovies}>
+        Fetch movies
+      </button>
+      {movies.length > 0 ? (
+        <ul id="movies-list">
+          {movies.map((movie) => (
+            <li key={movie.id}>{movie.title}</li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}

examples/with-next/app/msw-provider.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { Suspense, use } from 'react'
+import { handlers } from '@/mocks/handlers'
+
+const mockingEnabledPromise =
+  typeof window !== 'undefined'
+    ? import('@/mocks/browser').then(async ({ worker }) => {
+        await worker.start({
+          onUnhandledRequest(request, print) {
+            if (request.url.includes('_next')) {
+              return
+            }
+            print.warning()
+          },
+        })
+        worker.use(...handlers)
+
+        console.log(worker.listHandlers())
+      })
+    : Promise.resolve()
+
+export function MSWProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  // If MSW is enabled, we need to wait for the worker to start,
+  // so we wrap the children in a Suspense boundary until it's ready.
+  return (
+    <Suspense fallback={null}>
+      <MSWProviderWrapper>{children}</MSWProviderWrapper>
+    </Suspense>
+  )
+}
+
+function MSWProviderWrapper({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  use(mockingEnabledPromise)
+  return children
+}

examples/with-next/app/page.tsx

@@ -0,0 +1,23 @@
+import { MovieList } from './movie-list'
+
+export type User = {
+  firstName: string
+  lastName: string
+}
+
+async function getUser() {
+  const response = await fetch('https://api.example.com/user')
+  const user = (await response.json()) as User
+  return user
+}
+
+export default async function Home() {
+  const user = await getUser()
+
+  return (
+    <main>
+      <p id="server-side-greeting">Hello, {user.firstName}!</p>
+      <MovieList />
+    </main>
+  )
+}

examples/with-next/mocks/browser.ts

@@ -0,0 +1,3 @@
+import { setupWorker } from 'msw/browser'
+
+export const worker = setupWorker()

examples/with-next/mocks/handlers.ts

@@ -0,0 +1,32 @@
+import { http, graphql, HttpResponse } from 'msw'
+import type { User } from '@/app/page'
+import type { Movie } from '@/app/movie-list'
+
+export const handlers = [
+  http.get<never, never, User>('https://api.example.com/user', () => {
+    return HttpResponse.json({
+      firstName: 'Sarah',
+      lastName: 'Maverick',
+    })
+  }),
+  graphql.query<{ movies: Array<Movie> }>('ListMovies', () => {
+    return HttpResponse.json({
+      data: {
+        movies: [
+          {
+            id: '6c6dba95-e027-4fe2-acab-e8c155a7f0ff',
+            title: '123 Lord of The Rings',
+          },
+          {
+            id: 'a2ae7712-75a7-47bb-82a9-8ed668e00fe3',
+            title: 'The Matrix',
+          },
+          {
+            id: '916fa462-3903-4656-9e76-3f182b37c56f',
+            title: 'Star Wars: The Empire Strikes Back',
+          },
+        ],
+      },
+    })
+  }),
+]

examples/with-next/mocks/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)