Merge branch 'canary' into remove-import-type

docs/deployment.md

@@ -10,7 +10,7 @@ The easiest way to deploy Next.js to production is to use the **[Vercel platform
 
 ### Getting started
 
-If you haven’t already done so, push your Next.js app to a Git provider of your choice: [GitHub](http://github.com/), [GitLab](https://gitlab.com/), or [BitBucket](https://bitbucket.org/). Your repository can be private or public.
+If you haven’t already done so, push your Next.js app to a Git provider of your choice: [GitHub](https://github.com/), [GitLab](https://gitlab.com/), or [BitBucket](https://bitbucket.org/). Your repository can be private or public.
 
 Then, follow these steps:
 
@@ -29,7 +29,7 @@ Let’s talk about the workflow we recommend using. [Vercel](https://vercel.com)
 
 - **Develop:** Write code in Next.js. Keep the development server running and take advantage of [React Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
 - **Preview:** Every time you push changes to a branch on GitHub / GitLab / BitBucket, Vercel automatically creates a new deployment with a unique URL. You can view them on GitHub when you open a pull request, or under “Preview Deployments” on your project page on Vercel. [Learn more about it here](https://vercel.com/features/deployment-previews).
-- **Ship:** When you’re ready to ship, merge the pull request to your default branch (e.g. `master`). Vercel will automatically create a production deployment.
+- **Ship:** When you’re ready to ship, merge the pull request to your default branch (e.g. `main`). Vercel will automatically create a production deployment.
 
 By using the DPS workflow, in addition to doing _code reviews_, you can do _deployment previews_. Each deployment creates a unique URL that can be shared or used for integration tests.
 
@@ -50,6 +50,14 @@ For example, the [hybrid pages](/docs/basic-features/pages.md) approach is fully
 - **Automatic HTTPS:** HTTPS is enabled by default (including custom domains) and doesn't require extra configuration. We auto-renew SSL certificates.
 - **More:** [Read our documentation](https://vercel.com/docs) to learn more about the Vercel platform.
 
+## Automatic Updates
+
+When you deploy your Next.js application, you want to see the latest version without needing to reload.
+
+Next.js will automatically load the latest version of your application in the background when routing. For client-side navigation, `next/link` will temporarily function as a normal `<a>` tag.
+
+If a new page (with an old version) has already been prefetched by `next/link`, Next.js will use the old version. Then, after either a full page refresh or multiple client-side transitions, Next.js will show the latest version.
+
 ## Other hosting options
 
 ### Node.js Server

examples/custom-server-koa/README.md

@@ -2,7 +2,7 @@
 
 Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://nextjs.org/docs/advanced-features/custom-server) so you can customize as much as you want.
 
-Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Koa](http://koajs.com/) to build a custom router on top of Next.
+Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Koa](https://koajs.com/) to build a custom router on top of Next.
 
 The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
 

examples/using-router/pages/about.js

@@ -1,4 +1,4 @@
-import Header from '../components/header'
+import Header from '../components/Header'
 
 export default function About() {
   return (

examples/with-ant-design-less/README.md

@@ -1,6 +1,6 @@
 # Ant Design example
 
-This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
+This example shows how to use Next.js along with [Ant Design of React](https://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
 
 ## Deploy your own
 

examples/with-ant-design-mobile/README.md

@@ -1,6 +1,6 @@
 # Ant Design Mobile example
 
-This example features how you use [antd-mobile](https://github.com/ant-design/ant-design-mobile) (Ant Design Mobile FrontEnd Framwork) with Next.js.
+This example features how you use [antd-mobile](https://github.com/ant-design/ant-design-mobile) (Ant Design Mobile FrontEnd Framework) with Next.js.
 
 ## Deploy your own
 

examples/with-ant-design/README.md

@@ -1,6 +1,6 @@
 # Ant Design example
 
-This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
+This example shows how to use Next.js along with [Ant Design of React](https://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
 
 ## Deploy your own
 

examples/with-carbon-components/README.md

@@ -1,8 +1,8 @@
 # Example app with carbon-components-react
 
-This example features how you use IBM's [carbon-components-react](https://github.com/IBM/carbon-components-react) [(Carbon Design System)](http://www.carbondesignsystem.com/components/overview) with Next.js.
+This example features how you use IBM's [carbon-components-react](https://github.com/IBM/carbon-components-react) [(Carbon Design System)](https://www.carbondesignsystem.com/components/overview) with Next.js.
 
-Create your own theme with Carbon Design System's [theming tools](http://themes.carbondesignsystem.com/) and put it all together as demonstrated in `static/myCustomTheme.scss`
+Create your own theme with Carbon Design System's [theming tools](https://themes.carbondesignsystem.com/) and put it all together as demonstrated in `static/myCustomTheme.scss`
 
 ## Deploy your own
 

examples/with-deta-base/README.md

@@ -36,10 +36,10 @@ Then set each variable on `.env.local`:
 
 - `DETA_PROJECT_KEY` should be the default _Project Key_ that you saved from step 1.
 
-The resulting `env.local` file shoule look like this:
+The resulting `env.local` file should look like this:
 
 ```bash
-DETA_PROEJECT_KEY=...
+DETA_PROJECT_KEY=...
 ```
 
 ### Step 3. Run Next.js in development mode

examples/with-draft-js/README.md

@@ -2,7 +2,7 @@
 
 Have you ever wanted to have an editor like medium.com in your Next.js app? DraftJS is available for SSR, but some plugins like the toolbar are using `window`, which does not work when doing SSR.
 
-This example aims to provides a fully customizable example of the famous medium editor with DraftJS. The goal was to get it as customizable as possible, and fully working with Next.js without using the react-no-ssr package.
+This example aims to provide a fully customizable example of the famous medium editor with DraftJS. The goal was to get it as customizable as possible, and fully working with Next.js without using the react-no-ssr package.
 
 ## Deploy your own
 

examples/with-electron-typescript/README.md

@@ -29,7 +29,7 @@ Available commands:
 "build-electron": transpile electron layer
 "build": build both layers
 "dev": start dev version
-"dist": create production elctron build
+"dist": create production electron build
 "type-check": check TypeScript in project
 ```
 

examples/with-emotion/README.md

@@ -3,7 +3,7 @@
 Extract and inline critical css with
 [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion),
 [emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server),
-[@emotion/core](https://github.com/emotion-js/emotion/tree/master/packages/core),
+[@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
 and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
 
 ## Deploy your own

examples/with-env-from-next-config-js/README.md

@@ -46,4 +46,4 @@ following behavior while you are doing development.
 - When you run `next build` then `next start`, assuming you set externally the environmental variable STAGING to anything but 1, you will get the results assuming `isProd` is true.
 - When your run `next build` or `npm run build` in production, if the environmental variable `STAGING` is set to `1`, `isStaging` will be set and you will get those values returned.
 
-You can read more about this feature in thie blog post <a href="https://vercel.com/blog/next5-1" target="_blank">Next.js 5.1: Faster Page Resolution, Environment Config and More</a> (under Environment Config).
+You can read more about this feature in this blog post <a href="https://vercel.com/blog/next5-1" target="_blank">Next.js 5.1: Faster Page Resolution, Environment Config and More</a> (under Environment Config).

examples/with-firebase-hosting/README.md

@@ -54,7 +54,7 @@ Then you can create components and pages in `.tsx` or `.ts`
 ## Good to know
 
 - [`firebase.json`](firebase.json:#L7) outlines the catchall rewrite rule for our Cloud Function.
-- The empty `public/.gitignore` file is to ensure `public/` dir exists as it is required for Firebase Hosting. It is [configured](firebase.json:#L4) (by [default](https://firebase.google.com/docs/hosting/full-config#ignore)) that dotfiles (`public/.*`) are ignored from bein publicly served.
+- The empty `public/.gitignore` file is to ensure `public/` dir exists as it is required for Firebase Hosting. It is [configured](firebase.json:#L4) (by [default](https://firebase.google.com/docs/hosting/full-config#ignore)) that dotfiles (`public/.*`) are ignored from being publicly served.
 - The Cloud Function is named `nextjsFunc` (changeable in [firebaseFunctions.js](firebaseFunctions.js#L16) and [firebase.json](firebase.json#L8)).
 - `public/*` files are statically served through [Firebase hosting](https://firebase.google.com/docs/hosting/full-config#public), not through [NextJs server](https://nextjs.org/docs/basic-features/static-file-serving).
 

examples/with-google-tag-manager/.env.local.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=

examples/with-google-tag-manager/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/with-google-tag-manager/README.md

@@ -0,0 +1,29 @@
+## Example app using Google Tag Manager
+
+This example shows how to use Next.js along with Google Tag Manager. [`pages/_document.js`](pages/_document.js) is used to inject [base code](https://developers.google.com/tag-manager/quickstart). [`pages/_app.js`](pages/_app.js) is used to track route changes and send page views to Google Tag Manager.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-google-tag-manager with-google-tag-manager-app
+# or
+yarn create next-app --example with-google-tag-manager with-google-tag-manager-app
+```
+
+Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
+
+```bash
+cp .env.local.example .env.local
+```
+
+Set the `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID` variable in `.env.local` to match your Google Tag Manager ID.
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-google-tag-manager/components/GoogleTagManager.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import * as gtm from '../lib/gtm'
+
+const handleRouteChange = () => {
+  gtm.pageview()
+}
+
+const GoogleTagManager = ({ children }) => {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.events.on('routeChangeComplete', handleRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [router.events])
+
+  return children
+}
+
+export default GoogleTagManager

examples/with-google-tag-manager/lib/gtm.js

@@ -0,0 +1,8 @@
+export const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID
+
+export const pageview = (url) => {
+  window.dataLayer({
+    event: 'pageview',
+    page: url,
+  })
+}

examples/with-google-tag-manager/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "with-google-tag-manager",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "license": "MIT"
+}

examples/with-google-tag-manager/pages/_app.js

@@ -0,0 +1,11 @@
+import GoogleTagManager from '../components/GoogleTagManager'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <GoogleTagManager>
+      <Component {...pageProps} />
+    </GoogleTagManager>
+  )
+}
+
+export default MyApp

examples/with-google-tag-manager/pages/_document.js

@@ -0,0 +1,37 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { GTM_ID } from '../lib/gtm'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          {/* Google Tag Manager - Global base code */}
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer', '${GTM_ID}');
+              `,
+            }}
+          />
+        </Head>
+        <body>
+          <noscript>
+            <iframe
+              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+              height="0"
+              width="0"
+              style={{ display: 'none', visibility: 'hidden' }}
+            />
+          </noscript>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}

examples/with-google-tag-manager/pages/index.js

@@ -0,0 +1,10 @@
+export default function Home() {
+  return (
+    <div>
+      <h1>
+        Go to `pages/_app.js` and `pages/_document.js` to see how you can add
+        Google Tag Manager to your app
+      </h1>
+    </div>
+  )
+}

examples/with-knex/README.md

@@ -1,6 +1,6 @@
 ## Example app using Knex
 
-[Knex](http://knexjs.org/) is a SQL query builder that works with a variety of SQL databases including Postgres and MySQL. This example shows you how to use Knex with Next.js to connect and query a Postgres database. The same code can also connect to all other databases supported by Knex.
+[Knex](https://knexjs.org/) is a SQL query builder that works with a variety of SQL databases including Postgres and MySQL. This example shows you how to use Knex with Next.js to connect and query a Postgres database. The same code can also connect to all other databases supported by Knex.
 
 ## Deploy your own
 

examples/with-mongodb/pages/index.js

@@ -225,7 +225,7 @@ export default function Home({ isConnected }) {
 export async function getServerSideProps(context) {
   const { client } = await connectToDatabase()
 
-  const isConnected = await client.isConnected() // Returns true or false
+  const isConnected = await client.isConnected()
 
   return {
     props: { isConnected },

examples/with-mongodb/util/mongodb.js

@@ -16,30 +16,42 @@ if (!MONGODB_DB) {
 
 /**
  * Global is used here to maintain a cached connection across hot reloads
- * in development. This prevents connections growing exponentiatlly
+ * in development. This prevents connections growing exponentially
  * during API Route usage.
  */
 let cached = global.mongo
-if (!cached) cached = global.mongo = {}
+
+if (!cached) {
+  cached = global.mongo = {}
+}
 
 export async function connectToDatabase() {
-  if (cached.conn) return cached.conn
+  if (cached.conn) {
+    return cached.conn
+  }
+
   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
       })
   }
+
   await cached.promise
+
   return cached.conn
 }

examples/with-rebass/README.md

@@ -1,6 +1,6 @@
 # Example app with Rebass
 
-This example features how you use [Rebass](http://jxnblk.com/rebass/) functional UI library with Next.js.
+This example features how you use [Rebass](https://jxnblk.com/rebass/) functional UI library with Next.js.
 
 ![Screenshot](https://cloud.githubusercontent.com/assets/304265/22472564/b2e04ff0-e7de-11e6-921e-d0c9833ac805.png)
 

examples/with-redux-saga/README.md

@@ -26,7 +26,7 @@ Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&ut
 
 In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
 
-![](http://i.imgur.com/JCxtWSj.gif)
+![](https://i.imgur.com/JCxtWSj.gif)
 
 Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the redux store and dispatching the required actions until we are ready to return the initial state to be rendered. Since the component is wrapped with `next-redux-wrapper`, the component is automatically connected to Redux and wrapped with `react-redux Provider`, that allows us to access redux state immediately and send the store down to children components so they can access to the state when required.