Merge branch 'canary' into fix/wasm-loading

Author: padmaia

docs/api-reference/next/server.md

@@ -25,7 +25,7 @@ The function can be a default export and as such, does **not** have to be named
 
 The `NextRequest` object is an extension of the native [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) interface, with the following added methods and properties:
 
-- `cookies` - Has the cookies from the `Request`
+- `cookie` - Has the cookies from the `Request`
 - `nextUrl` - Includes an extended, parsed, URL object that gives you access to Next.js specific properties such as `pathname`, `basePath`, `trailingSlash` and `i18n`
 - `geo` - Has the geo location from the `Request`
   - `geo.country` - The country code
@@ -88,6 +88,23 @@ The introduction of the `307` status code means that the request method is prese
 
 The `redirect()` method uses a `307` by default, instead of a `302` temporary redirect, meaning your requests will _always_ be preserved as `POST` requests.
 
+### How do I access Environment Variables?
+
+`process.env` can be used to access [Environment Variables](/docs/basic-features/environment-variables.md) from Middleware. These are evaluated at build time, so only environment variables _actually_ used will be included.
+
+Any variables in `process.env` must be accessed directly, and **cannot** be destructured:
+
+```ts
+// Accessed directly, and not destructured works. process.env.NODE_ENV is `"development"` or `"production"`
+console.log(process.env.NODE_ENV)
+// This will not work
+const { NODE_ENV } = process.env
+// NODE_ENV is `undefined`
+console.log(NODE_ENV)
+// process.env is `{}`
+console.log(process.env)
+```
+
 ## Related
 
 <div class="card">

errors/manifest.json

@@ -4,6 +4,10 @@
       "title": "Messages",
       "heading": true,
       "routes": [
+        {
+          "title": "react-hydration-error",
+          "path": "/errors/react-hydration-error.md"
+        },
         {
           "title": "beta-middleware",
           "path": "/errors/beta-middleware.md"

errors/react-hydration-error.md

@@ -0,0 +1,53 @@
+# React Hydration Error
+
+#### Why This Error Occurred
+
+While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a [feature of React](https://reactjs.org/docs/react-dom.html#hydrate).
+
+This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present.
+
+#### Possible Ways to Fix It
+
+In general this issue is caused by using a specific library or application code that is relying on something that could differ between pre-rendering and the browser. An example of this is using `window` in a component's rendering.
+
+An example:
+
+```jsx
+function MyComponent() {
+    // This condition depends on `window`. During the first render of the browser the `color` variable will be different
+    const color = typeof window !== 'undefined' ? 'red' : 'blue
+    // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render
+    return <h1 className={`title ${color}`}>Hello World!</h1>
+}
+```
+
+How to fix it:
+
+```jsx
+// In order to prevent the first render from being different you can use `useEffect` which is only executed in the browser and is executed during hydration
+import { useEffect, useState } from 'react'
+function MyComponent() {
+  // The default value is 'blue', it will be used during pre-rendering and the first render in the browser (hydration)
+  const [color, setColor] = useState('blue')
+  // During hydration `useEffect` is called. `window` is available in `useEffect`. In this case because we know we're in the browser checking for window is not needed. If you need to read something from window that is fine.
+  // By calling `setColor` in `useEffect` a render is triggered after hydrating, this causes the "browser specific" value to be available. In this case 'red'.
+  useEffect(() => setColor('red'), [])
+  // As color is a state passed as a prop there is no mismatch between what was rendered server-side vs what was rendered in the first render. After useEffect runs the color is set to 'red'
+  return <h1 className={`title ${color}`}>Hello World!</h1>
+}
+```
+
+Common causes with css-in-js libraries:
+
+- When using Styled Components / Emotion
+  - When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch. In general this means the application has to follow the Next.js example for the library. For example if `pages/_document` is missing and the Babel plugin is not added.
+    - Possible fix for Styled Components: https://github.com/vercel/next.js/tree/canary/examples/with-styled-components
+      - If you want to leverage Styled Components with the new Next.js Compiler in Next.js 12 there is an [experimental flag available](https://github.com/vercel/next.js/discussions/30174#discussion-3643870)
+    - Possible fix for Emotion: https://github.com/vercel/next.js/tree/canary/examples/with-emotion
+- When using other css-in-js libraries
+  - Similar to Styled Components / Emotion css-in-js libraries generally need configuration specified in their examples in the [examples directory](https://github.com/vercel/next.js/tree/canary/examples)
+
+### Useful Links
+
+- [React Hydration Documentation](https://reactjs.org/docs/react-dom.html#hydrate)
+- [Josh Comeau's article on React Hydration](https://www.joshwcomeau.com/react/the-perils-of-rehydration/)

examples/progressive-web-app/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "next": "latest",
-    "next-pwa": "^3.1.0",
+    "next-pwa": "^5.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.0.5-canary.8"
+  "version": "12.0.5-canary.9"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.0.5-canary.8",
+    "@next/eslint-plugin-next": "12.0.5-canary.9",
     "@rushstack/eslint-patch": "^1.0.8",
     "@typescript-eslint/parser": "^5.0.0",
     "eslint-import-resolver-node": "^0.3.4",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "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": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

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

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "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": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "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": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native"

packages/next/build/output/index.ts

@@ -107,10 +107,7 @@ let serverWebWasLoading = false
 buildStore.subscribe((state) => {
   const { amp, client, server, serverWeb, trigger } = state
 
-  const { bootstrap: bootstrapping, appUrl } = consoleStore.getState()
-  if (bootstrapping && (client.loading || server.loading)) {
-    return
-  }
+  const { appUrl } = consoleStore.getState()
 
   if (client.loading || server.loading || serverWeb?.loading) {
     consoleStore.setState(

packages/next/build/output/store.ts

@@ -56,17 +56,20 @@ store.subscribe((state) => {
     if (state.appUrl) {
       Log.ready(`started server on ${state.bindAddr}, url: ${state.appUrl}`)
     }
-    if (startTime === 0) startTime = Date.now()
     return
   }
 
   if (state.loading) {
     if (state.trigger) {
-      Log.wait(`compiling ${state.trigger}...`)
+      if (state.trigger !== 'initial') {
+        Log.wait(`compiling ${state.trigger}...`)
+      }
     } else {
       Log.wait('compiling...')
     }
-    if (startTime === 0) startTime = Date.now()
+    if (startTime === 0) {
+      startTime = Date.now()
+    }
     return
   }
 

packages/next/client/dev/noop.js

@@ -1,4 +1,3 @@
-/* globals __REPLACE_NOOP_IMPORT__ */
 import { initNext, version, router, emitter, render, renderError } from './'
 import initOnDemandEntries from './dev/on-demand-entries-client'
 import initWebpackHMR from './dev/webpack-hot-middleware-client'
@@ -10,13 +9,6 @@ import {
   urlQueryToSearchParams,
 } from '../shared/lib/router/utils/querystring'
 
-// Temporary workaround for the issue described here:
-// https://github.com/vercel/next.js/issues/3775#issuecomment-407438123
-// The runtimeChunk doesn't have dynamic import handling code when there hasn't been a dynamic import
-// The runtimeChunk can't hot reload itself currently to correct it when adding pages using on-demand-entries
-// eslint-disable-next-line no-unused-expressions
-__REPLACE_NOOP_IMPORT__
-
 const {
   __NEXT_DATA__: { assetPrefix },
 } = window
@@ -26,6 +18,25 @@ const webpackHMR = initWebpackHMR()
 
 connectHMR({ assetPrefix: prefix, path: '/_next/webpack-hmr' })
 
+if (!window._nextSetupHydrationWarning) {
+  const origConsoleError = window.console.error
+  window.console.error = (...args) => {
+    const isHydrateError = args.some(
+      (arg) =>
+        typeof arg === 'string' &&
+        arg.match(/Warning:.*?did not match.*?Server:/)
+    )
+    if (isHydrateError) {
+      args = [
+        ...args,
+        `\n\nSee more info here: https://nextjs.org/docs/messages/react-hydration-error`,
+      ]
+    }
+    origConsoleError.apply(window.console, args)
+  }
+  window._nextSetupHydrationWarning = true
+}
+
 window.next = {
   version,
   // router is initialized later so it has to be live-binded

packages/next/client/next-dev.js

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.0.5-canary.8",
+  "version": "12.0.5-canary.9",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,10 +69,10 @@
     "@babel/runtime": "7.15.4",
     "@hapi/accept": "5.0.2",
     "@napi-rs/triples": "1.0.3",
-    "@next/env": "12.0.5-canary.8",
-    "@next/polyfill-module": "12.0.5-canary.8",
-    "@next/react-dev-overlay": "12.0.5-canary.8",
-    "@next/react-refresh-utils": "12.0.5-canary.8",
+    "@next/env": "12.0.5-canary.9",
+    "@next/polyfill-module": "12.0.5-canary.9",
+    "@next/react-dev-overlay": "12.0.5-canary.9",
+    "@next/react-refresh-utils": "12.0.5-canary.9",
     "acorn": "8.5.0",
     "assert": "2.0.0",
     "browserify-zlib": "0.2.0",
@@ -155,7 +155,7 @@
     "@babel/traverse": "7.15.0",
     "@babel/types": "7.15.0",
     "@napi-rs/cli": "1.2.1",
-    "@next/polyfill-nomodule": "12.0.5-canary.8",
+    "@next/polyfill-nomodule": "12.0.5-canary.9",
     "@peculiar/webcrypto": "1.1.7",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
@@ -267,7 +267,7 @@
     "webpack-sources1": "npm:[email protected]",
     "webpack-sources3": "npm:[email protected]",
     "webpack4": "npm:[email protected]",
-    "webpack5": "npm:[email protected].1",
+    "webpack5": "npm:[email protected].3",
     "ws": "8.2.3"
   },
   "resolutions": {