Merge branch 'canary' into fix/breaking-file-loading

examples/with-msw/package.json

@@ -8,7 +8,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "msw": "^0.21.0",
+    "msw": "^0.21.2",
     "next": "latest",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

examples/with-msw/pages/_app.js

@@ -1,4 +1,6 @@
-if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
+// Enable API mocking in all environments except production.
+// This is recommended for real-world apps.
+if (process.env.NODE_ENV !== 'production') {
   require('../mocks')
 }
 

examples/with-msw/pages/index.js

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-export default function Home({ book }) {
+export default function Home({ book, inProduction }) {
   const [reviews, setReviews] = useState(null)
 
   const handleGetReviews = () => {
@@ -10,6 +10,18 @@ export default function Home({ book }) {
       .then(setReviews)
   }
 
+  if (inProduction) {
+    return (
+      <div>
+        <p>
+          This example does not work in production, as MSW is not intended for
+          use in production. In a real-world app, your request will hit the
+          actual backend instead.
+        </p>
+      </div>
+    )
+  }
+
   return (
     <div>
       <img src={book.imageUrl} alt={book.title} width="250" />
@@ -32,12 +44,21 @@ export default function Home({ book }) {
 
 export async function getServerSideProps() {
   // Server-side requests are mocked by `mocks/server.js`.
-  const res = await fetch('https://my.backend/book')
-  const book = await res.json()
+  // In a real-world app this request would hit the actual backend.
+  try {
+    const res = await fetch('https://my.backend/book')
+    const book = await res.json()
 
-  return {
-    props: {
-      book,
-    },
+    return {
+      props: {
+        book,
+      },
+    }
+  } catch (error) {
+    return {
+      props: {
+        inProduction: true,
+      },
+    }
   }
 }