Merge branch 'canary' into upgrade-css-loaders

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/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
 

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)

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-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.9"
+  "version": "9.5.4-canary.11"
 }

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",

packages/create-next-app/package.json

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

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

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

packages/next-mdx/package.json

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.5.4-canary.9",
+  "version": "9.5.4-canary.11",
   "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": "9.5.4-canary.9",
+  "version": "9.5.4-canary.11",
   "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": "9.5.4-canary.9",
+  "version": "9.5.4-canary.11",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-nomodule/package.json

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