Merge branch 'canary' into css-optimization

docs/api-reference/next.config.js/headers.md

@@ -224,3 +224,7 @@ module.exports = {
   },
 }
 ```
+
+### Cache-Control
+
+Cache-Control headers set in next.config.js will be overwritten in production to ensure that static assets can be cached effectively. If you need to revalidate the cache of a page that has been [statically generated](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), you can do so by setting `revalidate` in the page's [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) function.

docs/api-reference/next/router.md

@@ -402,3 +402,26 @@ function Page({ router }) {
 
 export default withRouter(Page)
 ```
+
+### Typescript
+
+To use class components with `withRouter`, the component needs to accept a router prop:
+
+```tsx
+import React from 'react'
+import { withRouter, NextRouter } from 'next/router'
+
+interface WithRouterProps {
+  router: NextRouter
+}
+
+interface MyComponentProps extends WithRouterProps {}
+
+class MyComponent extends React.Component<MyComponentProps> {
+  render() {
+    return <p>{this.props.router.pathname}</p>
+  }
+}
+
+export default withRouter(MyComponent)
+```

examples/amp-story/README.md

@@ -13,9 +13,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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 amp-story amp-app
+npx create-next-app --example amp-story amp-story-app
 # or
-yarn create next-app --example amp-story amp-app
+yarn create next-app --example amp-story amp-story-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/auth0/README.md

@@ -16,9 +16,9 @@ Read more: [https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/](
 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 auth0 auth0
+npx create-next-app --example auth0 auth0-app
 # or
-yarn create next-app --example auth0 auth0
+yarn create next-app --example auth0 auth0-app
 ```
 
 ## Configuring Auth0

examples/cms-sanity/schemas/schema.js

@@ -71,6 +71,9 @@ export default createSchema({
           name: 'slug',
           title: 'Slug',
           type: 'slug',
+          options: {
+            source: 'title',
+          },
         },
       ],
     },

examples/fast-refresh-demo/README.md

@@ -15,9 +15,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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 fast-refresh-demo fast-refresh-demo
+npx create-next-app --example fast-refresh-demo fast-refresh-demo-app
 # or
-yarn create next-app --example fast-refresh-demo fast-refresh-demo
+yarn create next-app --example fast-refresh-demo fast-refresh-demo-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-draft-js/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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-draft-js
+npx create-next-app --example with-draft-js with-draft-js-app
 # or
 yarn create next-app --example with-draft-js with-draft-js-app
 ```

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

@@ -23,9 +23,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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-env-from-next-config-js
+npx create-next-app --example with-env-from-next-config-js with-env-from-next-config-js-app
 # or
-yarn create next-app --example with-env-from-next-config-js
+yarn create next-app --example with-env-from-next-config-js with-env-from-next-config-js-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-framer-motion/README.md

@@ -15,9 +15,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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-framer-motion with-framer-motion
+npx create-next-app --example with-framer-motion with-framer-motion-app
 # or
-yarn create next-app --example with-framer-motion with-framer-motion
+yarn create next-app --example with-framer-motion with-framer-motion-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-graphql-faunadb/README.md

@@ -37,9 +37,9 @@ At the end, a `.env.local` [file](https://nextjs.org/docs/basic-features/environ
 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:
 
 ```
-npx create-next-app --example with-graphql-faunadb with-graphql-faunadb
+npx create-next-app --example with-graphql-faunadb with-graphql-faunadb-app
 # or
-yarn create next-app --example with-graphql-faunadb with-graphql-faunadb
+yarn create next-app --example with-graphql-faunadb with-graphql-faunadb-app
 ```
 
 ### Run locally

examples/with-i18n-rosetta/README.md

@@ -15,9 +15,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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-i18n-rosetta with-i18n-rosetta
+npx create-next-app --example with-i18n-rosetta with-i18n-rosetta-app
 # or
-yarn create next-app --example with-i18n-rosetta with-i18n-rosetta
+yarn create next-app --example with-i18n-rosetta with-i18n-rosetta-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-jest/README.md

@@ -11,7 +11,9 @@ Quickly get started using [Create Next App](https://github.com/vercel/next.js/tr
 In your terminal, run the following command:
 
 ```bash
-npx create-next-app --example with-jest
+npx create-next-app --example with-jest with-jest-app
+# or
+yarn create next-app --example with-jest with-jest-app
 ```
 
 ## Run Jest Tests

examples/with-knex/README.md

@@ -13,9 +13,9 @@ Once you have access to the environment variables you'll need, deploy the exampl
 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-knex with-knex
+npx create-next-app --example with-knex with-knex-app
 # or
-yarn create next-app --example with-knex with-knex
+yarn create next-app --example with-knex with-knex-app
 ```
 
 ## Configuration

examples/with-mongodb/README.md

@@ -18,9 +18,9 @@ Once you have access to the environment variables you'll need, deploy the exampl
 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-mongodb with-mongodb
+npx create-next-app --example with-mongodb with-mongodb-app
 # or
-yarn create next-app --example with-mongodb with-mongodb
+yarn create next-app --example with-mongodb with-mongodb-app
 ```
 
 ## Configuration

examples/with-next-page-transitions/README.md

@@ -15,9 +15,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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-next-page-transitions with-next-page-transitions
+npx create-next-app --example with-next-page-transitions with-next-page-transitions-app
 # or
-yarn create next-app --example with-next-page-transitions with-next-page-transitions
+yarn create next-app --example with-next-page-transitions with-next-page-transitions-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-portals-ssr/README.md

@@ -13,9 +13,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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-portals-ssr with-portals-ssr
+npx create-next-app --example with-portals-ssr with-portals-ssr-app
 # or
-yarn create next-app --example with-portals-ssr with-portals-ssr
+yarn create next-app --example with-portals-ssr with-portals-ssr-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-react-native-web/README.md

@@ -17,7 +17,7 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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-react-native-web
+npx create-next-app --example with-react-native-web with-react-native-web-app
 # or
 yarn create next-app --example with-react-native-web with-react-native-web-app
 ```

examples/with-reason-relay/README.md

@@ -15,9 +15,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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-reason-relay with-reason-relay
+npx create-next-app --example with-reason-relay with-reason-relay-app
 # or
-yarn create next-app --example with-reason-relay with-reason-relay
+yarn create next-app --example with-reason-relay with-reason-relay-app
 ```
 
 Download schema introspection data from configured Relay endpoint:

examples/with-sentry/README.md

@@ -18,9 +18,9 @@ Once you have access to your [Sentry DSN](#step-1-enable-error-tracking), deploy
 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-sentry with-sentry
+npx create-next-app --example with-sentry with-sentry-app
 # or
-yarn create next-app --example with-sentry with-sentry
+yarn create next-app --example with-sentry with-sentry-app
 ```
 
 ## Configuration

examples/with-stitches/README.md

@@ -13,9 +13,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 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-stitches
+npx create-next-app --example with-stitches with-stitches-app
 # or
-yarn create next-app --example with-stitches
+yarn create next-app --example with-stitches with-stitches-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-tailwindcss/README.md

@@ -1,6 +1,6 @@
-# Tailwind CSS example
+# Next.js + Tailwind CSS Example
 
-This example is a basic starting point for using [Tailwind CSS](https://tailwindcss.com) with Next.js.
+This example shows how to use [Tailwind CSS](https://tailwindcss.com/) (v2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
 
 ## Deploy your own
 
@@ -19,12 +19,3 @@ yarn create next-app --example with-tailwindcss with-tailwindcss-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
-
-## Notes
-
-This example includes the following [PostCSS](https://github.com/postcss/postcss) plugins:
-
-- [tailwindcss](https://tailwindcss.com) - utility-first CSS framework
-- [autoprefixer](https://github.com/postcss/autoprefixer) - plugin to parse CSS and add vendor prefixes to CSS rules using values from [Can I Use](https://caniuse.com).
-
-To control the generated stylesheet's filesize, this example uses Tailwind CSS' [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.

examples/with-tailwindcss/package.json

@@ -1,20 +1,18 @@
 {
   "name": "with-tailwindcss",
-  "version": "1.0.0",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
     "next": "latest",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
-  },
-  "devDependencies": {
-    "autoprefixer": "10.0.2",
-    "postcss": "8.1.7",
+    "react-dom": "^16.13.1",
+    "autoprefixer": "^10.0.4",
+    "postcss": "^8.1.10",
     "tailwindcss": "^2.0.2"
-  },
-  "license": "MIT"
+  }
 }

examples/with-tailwindcss/pages/_app.js

@@ -1,4 +1,4 @@
-import '../styles/index.css'
+import '../styles/globals.css'
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

examples/with-tailwindcss/pages/api/hello.js

@@ -0,0 +1,6 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function helloAPI(req, res) {
+  res.statusCode = 200
+  res.json({ name: 'John Doe' })
+}