Merge branch 'canary' of github.com:zeit/next.js into canary

docs/api-routes/introduction.md

@@ -48,7 +48,7 @@ export default (req, res) => {
 
 To fetch API endpoints, take a look into any of the examples at the start of this section.
 
-> API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with [micro-cors](/docs/api-routes/api-middlewares.md#micro-support).
+> API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with the [cors middleware](/docs/api-routes/api-middlewares.md#connectexpress-middleware-support).
 
 > API Routes do not increase your client-side bundle size. They are server-side only bundles.
 

docs/routing/dynamic-routes.md

@@ -11,7 +11,7 @@ description: Dynamic Routes are pages that allow you to add custom params to you
   </ul>
 </details>
 
-Defining routes by using predefined paths is not always enough for complex applications, in Next.js you can add brackets to a page (`[param]`) to create a dynamic route (a.k.a. url slugs, pretty urls, and others).
+Defining routes by using predefined paths is not always enough for complex applications. In Next.js you can add brackets to a page (`[param]`) to create a dynamic route (a.k.a. url slugs, pretty urls, and others).
 
 Consider the following page `pages/post/[pid].js`:
 

examples/api-routes-rest/package.json

@@ -7,10 +7,10 @@
     "start": "next start"
   },
   "dependencies": {
-    "isomorphic-unfetch": "3.0.0",
     "next": "latest",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "swr": "^0.1.18"
   },
   "license": "ISC"
 }

examples/api-routes-rest/pages/api/users.js

@@ -1,11 +1,5 @@
 // Fake users data
-const users = [
-  {
-    id: 1,
-  },
-  { id: 2 },
-  { id: 3 },
-]
+const users = [{ id: 1 }, { id: 2 }, { id: 3 }]
 
 export default (req, res) => {
   // Get data from your database

examples/api-routes-rest/pages/index.js

@@ -1,23 +1,23 @@
-import fetch from 'isomorphic-unfetch'
+import useSwr from 'swr'
 import Link from 'next/link'
 
-const Index = ({ users }) => (
-  <ul>
-    {users.map(user => (
-      <li key={user.id}>
-        <Link href="/user/[id]" as={`/user/${user.id}`}>
-          <a>{`User ${user.id}`}</a>
-        </Link>
-      </li>
-    ))}
-  </ul>
-)
+const fetcher = url => fetch(url).then(res => res.json())
 
-Index.getInitialProps = async () => {
-  const response = await fetch('http://localhost:3000/api/users')
-  const users = await response.json()
+export default function Index() {
+  const { data, error } = useSwr('/api/users', fetcher)
 
-  return { users }
+  if (error) return <div>Failed to load users</div>
+  if (!data) return <div>Loading...</div>
+
+  return (
+    <ul>
+      {data.map(user => (
+        <li key={user.id}>
+          <Link href="/user/[id]" as={`/user/${user.id}`}>
+            <a>{`User ${user.id}`}</a>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
 }
-
-export default Index

examples/api-routes-rest/pages/user/[id].js

@@ -1,12 +1,14 @@
-import fetch from 'isomorphic-unfetch'
+import { useRouter } from 'next/router'
+import useSwr from 'swr'
 
-const User = ({ user }) => <div>{user.name}</div>
+const fetcher = url => fetch(url).then(res => res.json())
 
-User.getInitialProps = async ({ query: { id } }, res) => {
-  const response = await fetch(`http://localhost:3000/api/user/${id}`)
-  const user = await response.json()
+export default function User() {
+  const router = useRouter()
+  const { data, error } = useSwr(`/api/user/${router.query.id}`, fetcher)
 
-  return { user }
+  if (error) return <div>Failed to load user</div>
+  if (!data) return <div>Loading...</div>
+
+  return <div>{data.name}</div>
 }
-
-export default User

examples/custom-server-actionhero/README.md

@@ -103,7 +103,7 @@ module.exports = class CreateChatRoom extends Action {
 
 3. Tell ActionHero to use the api rather than the file server as the top-level route in `api.config.servers.web.rootEndpointType = 'api'`. This will allows "/" to listen to API requests. Also update `api.config.general.paths.public = [ path.join(__dirname, '/../static') ]`. In this configuration, the next 'static' renderer will take priority over the ActionHero 'public file' api. Note that any static assets (CSS, fonts, etc) will need to be in "./static" rather than "./public".
 
-Note that this is where the websocket server, if you enable it, will place the `ActionheroWebsocketClient` libraray.<br>
+Note that this is where the websocket server, if you enable it, will place the `ActionheroWebsocketClient` library.<br>
 
 4.  Configure a wild-card route at the lowest priority of your GET handler to catch all web requests that aren't caught by other actions:
 

examples/with-aphrodite/README.md

@@ -1,6 +1,6 @@
 # Example app with aphrodite
 
-This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [Aphrodite](https://github.com/Khan/aphrodite/).
+This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [Aphrodite](https://github.com/Khan/aphrodite/).
 
 For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.
 

examples/with-emotion-11/package.json

@@ -12,11 +12,11 @@
   "author": "Thomas Greco",
   "license": "ISC",
   "dependencies": {
-    "@emotion/cache": "11.0.0-next.10",
-    "@emotion/css": "11.0.0-next.10",
-    "@emotion/react": "11.0.0-next.10",
-    "@emotion/server": "11.0.0-next.10",
-    "@emotion/styled": "11.0.0-next.10",
+    "@emotion/cache": "11.0.0-next.12",
+    "@emotion/css": "11.0.0-next.12",
+    "@emotion/react": "11.0.0-next.12",
+    "@emotion/server": "11.0.0-next.12",
+    "@emotion/styled": "11.0.0-next.12",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"

examples/with-firebase-hosting-and-typescript/.gitignore

@@ -1,4 +1,5 @@
 dist/
+node_modules/
 
 # Firebase cache
 .firebase/

examples/with-sentry-simple/README.md

@@ -46,7 +46,7 @@ Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm
 This is a simple example showing how to use [Sentry](https://sentry.io) to catch & report errors on both client + server side.
 
 - `_app.js` renders on both the server and client. It initializes Sentry to catch any unhandled exceptions
-- `_error.js` is rendered by Next.js while handling certain types of exceptions for you. It is overriden so those exceptions can be passed along to Sentry
+- `_error.js` is rendered by Next.js while handling certain types of exceptions for you. It is overridden so those exceptions can be passed along to Sentry
 - `next.config.js` enables source maps in production for Sentry and swaps out `@sentry/node` for `@sentry/browser` when building the client bundle
 
 **Note**: Source maps will not be sent to Sentry when running locally (because Sentry cannot access your `localhost`). To accurately test client-side source maps, please deploy to Now.
@@ -84,7 +84,7 @@ Sentry.init({
 
 ### Hosting source maps vs. uploading them to Sentry
 
-This example shows how to generate your own source maps, which are hosted alongside your JavaScript bundles in production. But that has the potential for innaccurate results in Sentry.
+This example shows how to generate your own source maps, which are hosted alongside your JavaScript bundles in production. But that has the potential for inaccurate results in Sentry.
 
 Sentry will attempt to [fetch the source map](https://docs.sentry.io/platforms/javascript/sourcemaps/#hosting--uploading) when it is processing an exception, as long as the "Enable JavaScript source fetching" setting is turned on for your Sentry project.
 

packages/next-mdx/readme.md

@@ -24,14 +24,14 @@ const withMDX = require('@next/mdx')()
 module.exports = withMDX()
 ```
 
-Optionally you can provide [MDX options](https://github.com/mdx-js/mdx#options):
+Optionally you can provide [MDX plugins](https://mdxjs.com/advanced/plugins#plugins):
 
 ```js
 // next.config.js
 const withMDX = require('@next/mdx')({
   options: {
-    mdPlugins: [],
-    hastPlugins: [],
+    remarkPlugins: [],
+    rehypePlugins: [],
   },
 })
 module.exports = withMDX()

packages/next/README.md

@@ -10,7 +10,7 @@
   <a aria-label="License" href="https://github.com/zeit/next.js/blob/canary/license.md">
     <img alt="" src="https://img.shields.io/npm/l/next.svg?style=for-the-badge&labelColor=000000">
   </a>
-  <a aria-label="join us in spectrum" href="https://github.com/zeit/next.js/discussions">
+  <a aria-label="Join the community on GitHub" href="https://github.com/zeit/next.js/discussions">
     <img alt="" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&logo=Next.js&labelColor=000000&logoWidth=20">
   </a>
 </p>

packages/next/types/index.d.ts

@@ -5,7 +5,8 @@
 import React from 'react'
 import { ParsedUrlQuery } from 'querystring'
 import { IncomingMessage, ServerResponse } from 'http'
-import { Env } from '../lib/load-env-config'
+// @ts-ignore This path is generated at build time and conflicts otherwise
+import { Env } from '../dist/lib/load-env-config'
 
 import {
   NextPageContext,