Merge branch 'canary' into remove-import-type

.github/workflows/build_test_deploy.yml

@@ -148,7 +148,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: cat package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions.webpack = "^5.11.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: cat package.json | jq '.resolutions.react = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: yarn install --check-files

docs/basic-features/environment-variables.md

@@ -81,7 +81,7 @@ In order to expose a variable to the browser you have to prefix the variable wit
 NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
 ```
 
-This loads `process.env.NEXT_PUBLIC_ANALYTICS_ID` into the Node.js environment automatically. Allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the `NEXT_PUBLIC_` prefix.
+This loads `process.env.NEXT_PUBLIC_ANALYTICS_ID` into the Node.js environment automatically, allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the `NEXT_PUBLIC_` prefix.
 
 ```js
 // pages/index.js

examples/with-mongodb/util/mongodb.js

@@ -22,7 +22,7 @@ if (!MONGODB_DB) {
 let cached = global.mongo
 
 if (!cached) {
-  cached = global.mongo = {}
+  cached = global.mongo = { conn: null, promise: null }
 }
 
 export async function connectToDatabase() {
@@ -31,27 +31,18 @@ export async function connectToDatabase() {
   }
 
   if (!cached.promise) {
-    const conn = {}
-
     const opts = {
       useNewUrlParser: true,
       useUnifiedTopology: true,
     }
 
-    cached.promise = MongoClient.connect(MONGODB_URI, opts)
-      .then((client) => {
-        conn.client = client
-
-        return client.db(MONGODB_DB)
-      })
-      .then((db) => {
-        conn.db = db
-
-        cached.conn = conn
-      })
+    cached.promise = MongoClient.connect(MONGODB_URI, opts).then((client) => {
+      return {
+        client,
+        db: client.db(MONGODB_DB),
+      }
+    })
   }
-
-  await cached.promise
-
+  cached.conn = await cached.promise
   return cached.conn
 }

examples/with-msw/.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_MOCKING=enabled

examples/with-msw/.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_MOCKING=enabled

examples/with-msw/README.md

@@ -8,7 +8,7 @@ In this example we integrate Mock Service Worker with Next by following the next
 1. Setup a [Service Worker instance](./mocks/browser.js) that would intercept all runtime client-side requests via `setupWorker` function.
 1. Setup a ["server" instance](./mocks/server.js) 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, 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.
+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`.
 
 ## Deploy your own
 

examples/with-msw/package.json

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

examples/with-msw/pages/_app.js

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

examples/with-msw/pages/index.js

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-export default function Home({ book, inProduction }) {
+export default function Home({ book }) {
   const [reviews, setReviews] = useState(null)
 
   const handleGetReviews = () => {
@@ -10,18 +10,6 @@ export default function Home({ book, inProduction }) {
       .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" />
@@ -44,21 +32,12 @@ export default function Home({ book, inProduction }) {
 
 export async function getServerSideProps() {
   // Server-side requests are mocked by `mocks/server.js`.
-  // 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()
+  const res = await fetch('https://my.backend/book')
+  const book = await res.json()
 
-    return {
-      props: {
-        book,
-      },
-    }
-  } catch (error) {
-    return {
-      props: {
-        inProduction: true,
-      },
-    }
+  return {
+    props: {
+      book,
+    },
   }
 }

examples/with-msw/public/mockServiceWorker.js

@@ -7,7 +7,7 @@
 /* eslint-disable */
 /* tslint:disable */
 
-const INTEGRITY_CHECKSUM = 'd1e0e502f550d40a34bee90822e4bf98'
+const INTEGRITY_CHECKSUM = '65d33ca82955e1c5928aed19d1bdf3f9'
 const bypassHeaderName = 'x-msw-bypass'
 
 let clients = {}
@@ -74,11 +74,22 @@ self.addEventListener('message', async function (event) {
   }
 })
 
-self.addEventListener('fetch', async function (event) {
+self.addEventListener('fetch', function (event) {
   const { clientId, request } = event
   const requestClone = request.clone()
   const getOriginalResponse = () => fetch(requestClone)
 
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Bypass mocking if the current client isn't present in the internal clients map
+  // (i.e. has the mocking disabled).
+  if (!clients[clientId]) {
+    return
+  }
+
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
   if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
@@ -89,20 +100,15 @@ self.addEventListener('fetch', async function (event) {
     new Promise(async (resolve, reject) => {
       const client = await event.target.clients.get(clientId)
 
-      if (
-        // Bypass mocking when no clients active
-        !client ||
-        // Bypass mocking if the current client has mocking disabled
-        !clients[clientId] ||
-        // Bypass mocking for navigation requests
-        request.mode === 'navigate'
-      ) {
+      // Bypass mocking when the request client is not active.
+      if (!client) {
         return resolve(getOriginalResponse())
       }
 
       // Bypass requests with the explicit bypass header
       if (requestClone.headers.get(bypassHeaderName) === 'true') {
         const modifiedHeaders = serializeHeaders(requestClone.headers)
+
         // Remove the bypass header to comply with the CORS preflight check
         delete modifiedHeaders[bypassHeaderName]
 

examples/with-typescript/interfaces/index.ts

@@ -2,7 +2,7 @@
 // and then use them in any component by importing them. For
 // example, to import the interface below do:
 //
-// import User from 'path/to/interfaces';
+// import { User } from 'path/to/interfaces';
 
 export type User = {
   id: number

examples/with-zustand/pages/ssr.js

@@ -1,5 +1,5 @@
 import Page from '../components/page'
-import { initializeStore } from '../store'
+import { initializeStore } from '../lib/store'
 
 export default function SSR() {
   return <Page />

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.0.5-canary.0"
+  "version": "10.0.5-canary.1"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "10.0.5-canary.0",
+  "version": "10.0.5-canary.1",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next/build/index.ts

@@ -523,6 +523,7 @@ export default async function build(
     const hybridAmpPages = new Set<string>()
     const serverPropsPages = new Set<string>()
     const additionalSsgPaths = new Map<string, Array<string>>()
+    const additionalSsgPathsEncoded = new Map<string, Array<string>>()
     const pageInfos = new Map<string, PageInfo>()
     const pagesManifest = JSON.parse(
       await promises.readFile(manifestPath, 'utf8')
@@ -640,8 +641,15 @@ export default async function build(
               ssgPages.add(page)
               isSsg = true
 
-              if (workerResult.prerenderRoutes) {
+              if (
+                workerResult.prerenderRoutes &&
+                workerResult.encodedPrerenderRoutes
+              ) {
                 additionalSsgPaths.set(page, workerResult.prerenderRoutes)
+                additionalSsgPathsEncoded.set(
+                  page,
+                  workerResult.encodedPrerenderRoutes
+                )
                 ssgPageRoutes = workerResult.prerenderRoutes
               }
 
@@ -841,8 +849,13 @@ export default async function build(
           // Append the "well-known" routes we should prerender for, e.g. blog
           // post slugs.
           additionalSsgPaths.forEach((routes, page) => {
-            routes.forEach((route) => {
-              defaultMap[route] = { page }
+            const encodedRoutes = additionalSsgPathsEncoded.get(page)
+
+            routes.forEach((route, routeIdx) => {
+              defaultMap[route] = {
+                page,
+                query: { __nextSsgPath: encodedRoutes?.[routeIdx] },
+              }
             })
           })