Merge branch 'canary' into patch-4

.circleci/config.yml

@@ -35,17 +35,22 @@ commands:
     steps:
       - run:
           name: Installing Dependencies
-          command: yarn install --frozen-lockfile
+          command: yarn install --frozen-lockfile --check-files
+      - run:
+          name: Install correct Chrome Driver version
+          command: yarn add chromedriver@76 -W && git checkout yarn.lock package.json
+      - run: google-chrome --version
+      - run: chromedriver --version
   yarn_lint:
     steps:
       - run:
           name: Linting
           command: yarn lint
-  yarn_react_canary:
+  yarn_react_integration:
     steps:
       - run:
-          name: Upgrade to React Canary
-          command: yarn upgrade react@canary react-dom@canary -W --dev # upgrade (vs add) will skip re-building Next.js, which doesn't bundle React internals (so this is OK!)
+          name: Upgrade to most recent release in React's Next channel
+          command: yarn upgrade react@next react-dom@next -W --dev # upgrade (vs add) will skip re-building Next.js, which doesn't bundle React internals (so this is OK!)
   yarn_info:
     steps:
       - run:
@@ -128,7 +133,7 @@ jobs:
     executor: node
     steps:
       - *attach_workspace
-      - yarn_react_canary
+      - yarn_react_integration
       - *persist_to_workspace
   test:
     parallelism: 3

azure-pipelines.yml

@@ -35,7 +35,7 @@ steps:
     displayName: Cache Yarn packages
 
   - script: |
-      yarn --frozen-lockfile --check-files
+      yarn install --frozen-lockfile --check-files
     displayName: 'Install dependencies'
 
   - script: |

examples/with-immutable-redux-wrapper/README.md

@@ -1,6 +1,6 @@
 # Immutable Redux Example
 
-> This example and documentation is based on the [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) example.
+> This example and documentation is based on the [with-redux-wrapper](https://github.com/zeit/next.js/tree/master/examples/with-redux-wrapper) example.
 
 ## How to use
 

examples/with-immutable-redux-wrapper/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "immutable": "4.0.0-rc.9",
     "next": "latest",
-    "next-redux-wrapper": "2.0.0-beta.6",
+    "next-redux-wrapper": "4.0.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-redux": "^5.0.1",

examples/with-mdx/next.config.js

@@ -1,4 +1,4 @@
-const withMDX = require('@zeit/next-mdx')({
+const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/
 })
 module.exports = withMDX({

examples/with-mdx/package.json

@@ -7,8 +7,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^1.1.0",
-    "@zeit/next-mdx": "1.2.0",
+    "@mdx-js/loader": "^1.5.1",
+    "@next/mdx": "^9.1.1",
     "next": "latest",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

examples/with-react-intl/pages/_app.js

@@ -1,9 +1,13 @@
 import App from 'next/app'
 import React from 'react'
-import { IntlProvider } from 'react-intl'
+import { createIntl, createIntlCache, RawIntlProvider } from 'react-intl'
+
+// This is optional but highly recommended
+// since it prevents memory leak
+const cache = createIntlCache()
 
 export default class MyApp extends App {
-  static async getInitialProps ({ Component, router, ctx }) {
+  static async getInitialProps ({ Component, ctx }) {
     let pageProps = {}
 
     if (Component.getInitialProps) {
@@ -21,10 +25,18 @@ export default class MyApp extends App {
   render () {
     const { Component, pageProps, locale, messages } = this.props
 
+    const intl = createIntl(
+      {
+        locale,
+        messages
+      },
+      cache
+    )
+
     return (
-      <IntlProvider locale={locale} messages={messages}>
+      <RawIntlProvider value={intl}>
         <Component {...pageProps} />
-      </IntlProvider>
+      </RawIntlProvider>
     )
   }
 }

examples/with-react-native-web/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['next/babel'],
+  plugins: [['react-native-web', { commonjs: true }]]
+}

examples/with-react-native-web/next.config.js

@@ -1,10 +1,11 @@
 module.exports = {
-  webpack: config => {
+  webpack: (config, { defaultLoaders }) => {
     config.resolve.alias = {
       ...(config.resolve.alias || {}),
       // Transform all direct `react-native` imports to `react-native-web`
       'react-native$': 'react-native-web'
     }
+    config.resolve.extensions.push('.web.js', '.web.ts', '.web.tsx')
     return config
   }
 }

examples/with-react-native-web/package.json

@@ -10,5 +10,8 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-native-web": "^0.11.6"
+  },
+  "devDependencies": {
+    "babel-plugin-react-native-web": "^0.11.7"
   }
 }

examples/with-static-export/README.md

@@ -36,6 +36,6 @@ yarn dev
 
 ## The idea behind the example
 
-This example show how to export to static HTML files your Next.js application fetching data from an API to generate a dynamic list of pages. This use a custom Express server in development to configure custom routing and then generate a map of pages to export for production.
+This example show how to export to static HTML files your Next.js application fetching data from an API to generate a dynamic list of pages.
 
 When trying to run `npm start` it will build and export your pages into the `out` folder and serve them on `localhost:5000`.

examples/with-static-export/components/post.js

@@ -1,14 +1,10 @@
 import Link from 'next/link'
 
-export default props => (
+export default ({ title, body, id }) => (
   <article>
-    <h2>{props.title}</h2>
-    <p>{props.body}</p>
-    {/* render the URL as /post/:id */}
-    <Link
-      href={{ pathname: '/post', query: { id: props.id } }}
-      as={`/post/${props.id}`}
-    >
+    <h2>{title}</h2>
+    <p>{body}</p>
+    <Link href='/post/[id]' as={`/post/${id}`}>
       <a>Read more...</a>
     </Link>
   </article>

examples/with-static-export/next.config.js

@@ -12,10 +12,7 @@ module.exports = {
     const pages = postList.reduce(
       (pages, post) =>
         Object.assign({}, pages, {
-          [`/post/${post.id}`]: {
-            page: '/post',
-            query: { id: post.id }
-          }
+          [`/post/${post.id}`]: { page: '/post/[id]' }
         }),
       {}
     )

examples/with-static-export/package.json

@@ -1,16 +1,14 @@
 {
   "name": "with-static-export",
-  "main": "server.js",
   "dependencies": {
-    "express": "^4.15.3",
-    "isomorphic-unfetch": "^2.0.0",
+    "isomorphic-unfetch": "^3.0.0",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "serve": "9.4.0"
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "serve": "11.2.0"
   },
   "scripts": {
-    "dev": "node .",
+    "dev": "next",
     "build": "next build",
     "preexport": "npm run build",
     "export": "next export",

examples/with-static-export/pages/post.js → examples/with-static-export/pages/post/[id].js

@@ -14,15 +14,17 @@ export default class extends Component {
   }
 
   render () {
+    const { title, body } = this.props
+
     return (
       <main>
         <Head>
-          <title>{this.props.title}</title>
+          <title>{title}</title>
         </Head>
 
-        <h1>{this.props.title}</h1>
+        <h1>{title}</h1>
 
-        <p>{this.props.body}</p>
+        <p>{body}</p>
 
         <Link href='/'>
           <a>Go back to home</a>

examples/with-tailwindcss/README.md

@@ -1,6 +1,6 @@
 # Tailwind CSS example
 
-This is an example of how you can include a global stylesheet in a next.js webapp.
+This is an example of using [Tailwind CSS](https://tailwindcss.com) in a Next.js project.
 
 ## How to use
 
@@ -23,9 +23,7 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2
 cd with-tailwindcss
 ```
 
-**Running**
-
-To get this example running you just need to
+Install it and run:
 
 ```bash
 npm install
@@ -35,41 +33,20 @@ yarn
 yarn dev
 ```
 
-Visit [http://localhost:3000](http://localhost:3000) and try to modify `styles/index.css`.
-
 Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
 
 ```bash
 now
 ```
 
-### Extras
-
-In the `package.json` you'll see some extra commands.
-
-- `yarn dev:css`
-  - used by `yarn dev` generate css bundle and watch css files for changes
-  - includes css imported into `index.css`
-  - will **not** autoreload browser when css changes
-- `yarn build:css`
-  - used by `yarn build` to generate css bundle
-
-These can be used manually but using the usual commands will run them anyways.
-
 ## The idea behind the example
 
-This setup is a basic starting point for using tailwind css and next. Along with tailwind, this example
-also uses some other postcss plugins for imports, autoprefixing, and stripping whitespace/comments. The imports simply
-allow for an easy way to split up css files but still get one bundled css file in `static/css/bundle.css`.
-Changing stylesheets does not trigger auto-reloads. Setting up auto-reloads was avoided
-because the next.js read me does not recommend doing so. Although, that can easily be done with
-some webpack loaders. If you are curious about using loaders with next look at this
-[example](https://github.com/zeit/next.js/tree/canary/examples/with-global-stylesheet).
-
-This project shows how you can set it up. Have a look at:
+This setup is a basic starting point for using [Tailwind CSS](https://tailwindcss.com) with Next.js. This example also includes the following [PostCSS](https://github.com/postcss/postcss) plugins:
+- [autoprefixer](https://github.com/postcss/autoprefixer) - Adds vendor prefixes to CSS rules in your stylesheet using values from [Can I Use](https://caniuse.com/)
+- [purgecss](https://github.com/FullHuman/purgecss) - Removes unused CSS
+- [cssnano](https://cssnano.co/) - Minifies CSS
+- [postcss-easy-import](https://github.com/TrySound/postcss-easy-import) - Allows importing one stylesheet into another
 
-- pages/\_document.js
-- styles/config/postcss.config.js
-- styles/config/tailwind.config.js
-- styles/index.css
-- styles/button.css
+## Limitations
+### Dynamically generated class strings will be purged
+Purgecss takes a very straightforward approach to removing unused CSS. It simply searches an entire file for a string that matches a regular expression. As a result, class strings that are dynamically created in a template using string concatenation will be considered unused and removed from your stylesheet. Tailwind CSS addresses this problem in more detail in [their documentation](https://tailwindcss.com/docs/controlling-file-size#writing-purgeable-html).

examples/with-tailwindcss/package.json

@@ -13,8 +13,9 @@
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
-    "autoprefixer": "^7.1.6",
-    "cssnano": "^3.10.0",
+    "@fullhuman/postcss-purgecss": "^1.3.0",
+    "autoprefixer": "^9.6.5",
+    "cssnano": "^4.1.0",
     "postcss-easy-import": "^3.0.0",
     "tailwindcss": "^1.0.1"
   }

examples/with-tailwindcss/postcss.config.js

@@ -2,6 +2,11 @@ module.exports = {
   plugins: [
     require('postcss-easy-import'),
     require('tailwindcss'),
-    require('autoprefixer')
+    require('@fullhuman/postcss-purgecss')({
+      content: ['./pages/**/*.js', './components/**/*.js'],
+      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+    }),
+    require('autoprefixer'),
+    require('cssnano')
   ]
 }

examples/with-tailwindcss/styles/index.css

@@ -1,6 +1,8 @@
 @import './button.css';
 
+/* purgecss start ignore */
 @tailwind base;
+/* purgecss end ignore */
 @tailwind components;
 @tailwind utilities;
 

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.1.2-canary.7"
+  "version": "9.1.2"
 }