Merge branch 'canary' into patch-1

docs/advanced-features/customizing-postcss-config.md

@@ -26,13 +26,48 @@ Out of the box, with no configuration, Next.js compiles CSS with the following t
    - [Gap Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
    - [Media Query Ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4)
 
-By default, [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/var) (CSS variables) are **not compiled** for IE11 support.
+By default, [CSS Grid](https://www.w3.org/TR/css-grid-1/) and [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/var) (CSS variables) are **not compiled** for IE11 support.
+
+To compile [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) for IE11, you can place the following comment at the top of your CSS file:
+
+```css
+/* autoprefixer grid: autoplace */
+```
+
+You can also enable IE11 support for [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)
+in your entire project by configuring autoprefixer with the configuration shown below (collapsed).
+See ["Customizing Plugins"](#customizing-plugins) below for more information.
+
+<details>
+<summary><strong>Click to view the configuration to enable CSS Grid Layout</strong></summary>
+
+```json
+{
+  "plugins": [
+    "postcss-flexbugs-fixes",
+    [
+      "postcss-preset-env",
+      {
+        "autoprefixer": {
+          "flexbox": "no-2009",
+          "grid": "autoplace"
+        },
+        "stage": 3,
+        "features": {
+          "custom-properties": false
+        }
+      }
+    ]
+  ]
+}
+```
+
+</details>
+<br/>
 
 CSS variables are not compiled because it is [not possible to safely do so](https://github.com/MadLittleMods/postcss-css-variables#caveats).
 If you must use variables, consider using something like [Sass variables](https://sass-lang.com/documentation/variables) which are compiled away by [Sass](https://sass-lang.com/).
 
-> **Note**: To support [Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), you need to enable `grid: "autoplace"` for Autoprefixer. See ["Customizing Plugins"](#customizing-plugins) below.
-
 ## Customizing Target Browsers
 
 Next.js allows you to configure the target browsers (for [Autoprefixer](https://github.com/postcss/autoprefixer) and compiled css features) through [Browserslist](https://github.com/browserslist/browserslist).

docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md

@@ -4,6 +4,13 @@ description: A custom asset prefix allows you serve static assets from a CDN. Le
 
 # CDN Support with Asset Prefix
 
+> **Attention**: [Deploying to Vercel](docs/deployment.md) automatically configures a global CDN for your Next.js project.
+> You do not need to manually setup an Asset Prefix.
+
+> **Note**: Next.js 9.5+ added support for a customizable [Base Path](docs/api-reference/next.config.js/basepath.md), which is better
+> suited for hosting your application on a sub-path like `/docs`.
+> We do not suggest you use a custom Asset Prefix for this use case.
+
 To set up a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network), you can set up an asset prefix and configure your CDN's origin to resolve to the domain that Next.js is hosted on.
 
 Open `next.config.js` and add the `assetPrefix` config:
@@ -17,7 +24,13 @@ module.exports = {
 }
 ```
 
-Next.js will automatically use your prefix in the scripts it loads, but this has no effect whatsoever on the [public](/docs/basic-features/static-file-serving.md) folder; if you want to serve those assets over a CDN, you'll have to introduce the prefix yourself. One way of introducing a prefix that works inside your components and varies by environment is documented [in this example](https://github.com/vercel/next.js/tree/canary/examples/with-universal-configuration-build-time).
+Next.js will automatically use your asset prefix for the JavaScript and CSS files it loads from the `/_next/` path (`.next/static/` folder).
+
+Asset prefix support does not influence the following paths:
+
+- Files in the [public](/docs/basic-features/static-file-serving.md) folder; if you want to serve those assets over a CDN, you'll have to introduce the prefix yourself
+- `/_next/data/` requests for `getServerSideProps` pages. These requests will always be made against the main domain since they're not static.
+- `/_next/data/` requests for `getStaticProps` pages. These requests will always be made against the main domain to support [Incremental Static Generation](/docs/basic-features/data-fetching.md#incremental-static-regeneration), even if you're not using it (for consistency).
 
 ## Related
 

docs/api-reference/next.config.js/runtime-configuration.md

@@ -4,7 +4,7 @@ description: Add client and server runtime configuration to your Next.js app.
 
 # Runtime Configuration
 
-> Generally you'll want to use [build-time environment variables](/docs/api-reference/next.config.js/environment-variables.md) to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
+> Generally you'll want to use [build-time environment variables](/docs/basic-features/environment-variables.md) to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
 
 To add runtime configuration to your app open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs:
 

docs/basic-features/built-in-css-support.md

@@ -52,7 +52,47 @@ In production, all CSS files will be automatically concatenated into a single mi
 
 ### Import styles from `node_modules`
 
-If you’d like to import CSS files from `node_modules`, you must do so inside `pages/_app.js`.
+Importing a CSS file from `node_modules` is permitted in anywhere your application.
+
+For global stylesheets, like `bootstrap` or `nprogress`, you should import the file inside `pages/_app.js`.
+For example:
+
+```jsx
+// pages/_app.js
+import 'bootstrap/dist/css/bootstrap.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+For importing CSS required by a third party component, you can do so in your component. For example:
+
+```tsx
+// components/ExampleDialog.js
+import { useState } from 'react'
+import { Dialog } from '@reach/dialog'
+import '@reach/dialog/styles.css'
+
+function ExampleDialog(props) {
+  const [showDialog, setShowDialog] = useState(false)
+  const open = () => setShowDialog(true)
+  const close = () => setShowDialog(false)
+
+  return (
+    <div>
+      <button onClick={open}>Open Dialog</button>
+      <Dialog isOpen={showDialog} onDismiss={close}>
+        <button className="close-button" onClick={close}>
+          <VisuallyHidden>Close</VisuallyHidden>
+          <span aria-hidden>×</span>
+        </button>
+        <p>Hello there. I am a dialog</p>
+      </Dialog>
+    </div>
+  )
+}
+```
 
 ## Adding Component-Level CSS
 

docs/basic-features/data-fetching.md

@@ -52,7 +52,7 @@ export async function getStaticProps(context) {
 The `context` parameter is an object containing the following keys:
 
 - `params` contains the route parameters for pages using dynamic routes. For example, if the page name is `[id].js` , then `params` will look like `{ id: ... }`. To learn more, take a look at the [Dynamic Routing documentation](/docs/routing/dynamic-routes.md). You should use this together with `getStaticPaths`, which we’ll explain later.
-- `preview` is `true` if the page is in the preview mode and `false` otherwise. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md).
+- `preview` is `true` if the page is in the preview mode and `undefined` otherwise. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md).
 - `previewData` contains the preview data set by `setPreviewData`. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md).
 
 `getStaticProps` should return an object with:

errors/href-interpolation-failed.md

@@ -0,0 +1,54 @@
+# `href` Interpolation Failed
+
+#### Why This Error Occurred
+
+Somewhere you are utilizing the `next/link` component, `Router#push`, or `Router#replace` with `href` interpolation to build dynamic routes but did not provide all of the needed dynamic route params to properly interpolate the `href`.
+
+Note: this error will only show when the `next/link` component is clicked not when only rendered.
+
+**Invalid `href` interpolation**
+
+```jsx
+import Link from 'next/link'
+
+export default function BlogLink() {
+  return (
+    <Link
+      href={{
+        pathname: '/blog/[post]/[comment]',
+        query: { post: 'post-1' },
+      }}
+    >
+      <a>Invalid link</a>
+    </Link>
+  )
+}
+```
+
+**Valid `href` interpolation**
+
+```jsx
+import Link from 'next/link'
+
+export default function BlogLink() {
+  return (
+    <Link
+      href={{
+        pathname: '/blog/[post]/[comment]',
+        query: { post: 'post-1', comment: 'comment-1' },
+      }}
+    >
+      <a>Valid link</a>
+    </Link>
+  )
+}
+```
+
+#### Possible Ways to Fix It
+
+Look for any usage of the `next/link` component, `Router#push`, or `Router#replace` and make sure that the provided `href` has all needed dynamic params in the query.
+
+### Useful Links
+
+- [Routing section in Documentation](https://nextjs.org/docs/routing/introduction)
+- [Dynamic routing section in Documentation](https://nextjs.org/docs/routing/dynamic-routes)

errors/next-head-count-missing.md

@@ -6,6 +6,8 @@ You have a custom `pages/_document.js` that doesn't have the components required
 
 #### Possible Ways to Fix It
 
-Ensure that your `_document.js` is importing and rendering all of the [required components](https://nextjs.org/docs/advanced-features/custom-document).
+Upgrade Next.js to 9.5.4 or later, which does not require `next-head-count`.
+
+If you can't upgrade right now, ensure that your `_document.js` is importing and rendering all of the [required components](https://nextjs.org/docs/advanced-features/custom-document).
 
 In this case you are most likely not rendering the `<Head>` component imported from `next/document`.

examples/with-mongodb-mongoose/models/Pet.js

@@ -34,7 +34,7 @@ const PetSchema = new mongoose.Schema({
     type: Boolean,
   },
   diet: {
-    /* List of dietary needs, if applicale */
+    /* List of dietary needs, if applicable */
 
     type: Array,
   },

examples/with-slate/package.json

@@ -7,13 +7,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "immutable": "^3.8.2",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "slate": "^0.37.0",
-    "slate-plain-serializer": "^0.5.27",
-    "slate-react": "^0.15.0"
+    "slate": "^0.58.4",
+    "slate-history": "0.58.4",
+    "slate-react": "^0.58.4"
   },
   "license": "MIT"
 }

examples/with-slate/pages/index.js

@@ -1,19 +1,24 @@
-import Link from 'next/link'
-import NextEditor from '../components/NextEditor'
+import React, { useState, useMemo } from 'react'
+import { createEditor } from 'slate'
+import { Slate, Editable, withReact } from 'slate-react'
+import { withHistory } from 'slate-history'
 
-const IndexPage = (props) => {
+const IndexPage = () => {
+  const [value, setValue] = useState(initialValue)
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <>
-      <Link href="/multiple">
-        <a>Go to multiple</a>
-      </Link>
-      <hr />
-      <NextEditor
-        slateKey="someUniqueKey"
-        defaultValue="This is editable plain text, just like a <textarea>!"
-      />
-    </>
+    <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
+      <Editable placeholder="Enter some plain text..." />
+    </Slate>
   )
 }
 
+const initialValue = [
+  {
+    children: [
+      { text: 'This is editable plain text, just like a <textarea>!' },
+    ],
+  },
+]
+
 export default IndexPage

examples/with-styled-components/pages/_app.js

@@ -1,4 +1,12 @@
-import { ThemeProvider } from 'styled-components'
+import { createGlobalStyle, ThemeProvider } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+`
 
 const theme = {
   colors: {
@@ -8,8 +16,11 @@ const theme = {
 
 export default function App({ Component, pageProps }) {
   return (
-    <ThemeProvider theme={theme}>
-      <Component {...pageProps} />
-    </ThemeProvider>
+    <>
+      <GlobalStyle />
+      <ThemeProvider theme={theme}>
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </>
   )
 }

examples/with-yarn-workspaces/.gitignore

@@ -9,8 +9,7 @@
 /coverage
 
 # next.js
-/.next/
-/out/
+.next/
 
 # production
 /build

examples/with-zeit-fetch/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@zeit/fetch": "5.1.1",
     "next": "latest",
-    "node-fetch": "2.6.0",
+    "node-fetch": "2.6.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "unfetch": "4.1.0"

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.4-canary.6"
+  "version": "9.5.4-canary.12"
 }

package.json

@@ -92,7 +92,7 @@
     "lost": "8.3.1",
     "minimatch": "3.0.4",
     "moment": "^2.24.0",
-    "node-fetch": "2.6.0",
+    "node-fetch": "2.6.1",
     "node-notifier": "5.4.0",
     "node-sass": "4.12.0",
     "npm-run-all": "4.1.5",