Merge branch 'canary' of https://github.com/zeit/next.js into font-op…

…tims

.github/workflows/build_test_deploy.yml

@@ -15,20 +15,20 @@ jobs:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: cache-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
 
   lint:
     runs-on: ubuntu-latest
     needs: build
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: yarn lint
 
@@ -39,10 +39,10 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: ./check-pre-compiled.sh
 
@@ -59,10 +59,10 @@ jobs:
       matrix:
         group: [1, 2, 3, 4, 5, 6]
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
 
       # TODO: remove after we fix watchpack watching too much
@@ -77,6 +77,24 @@ jobs:
     steps:
       - run: exit 0
 
+  testMacOS:
+    name: macOS ( Basic, Production, Acceptance )
+    runs-on: macos-latest
+    needs: build
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_JOB: 1
+      HEADLESS: true
+
+    steps:
+      - uses: actions/checkout@v2
+      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
+      # Installing dependencies again since OS changed
+      - run: yarn install --frozen-lockfile --check-files
+      - run: node run-tests.js test/integration/production/test/index.test.js
+      - run: node run-tests.js test/integration/basic/test/index.test.js
+      - run: node run-tests.js test/acceptance/*
+
   testFirefox:
     name: Test Firefox (production)
     runs-on: ubuntu-latest
@@ -86,10 +104,10 @@ jobs:
       BROWSERNAME: 'firefox'
       NEXT_TELEMETRY_DISABLED: 1
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: node run-tests.js test/integration/production/test/index.test.js
 
@@ -105,10 +123,10 @@ jobs:
       BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js test/integration/production/test/index.test.js'
 
@@ -125,10 +143,10 @@ jobs:
       BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js test/integration/production-nav/test/index.test.js'
 
@@ -139,10 +157,10 @@ jobs:
     env:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
 
       - run: ./publish-release.sh

.github/workflows/test_react_next.yml

@@ -17,10 +17,10 @@ jobs:
 
   #     - run: yarn upgrade react@next react-dom@next -W --dev
 
-  #     - uses: actions/cache@v1
+  #     - uses: actions/cache@v2
   #       id: cache-build
   #       with:
-  #         path: '.'
+  #         path: ./*
   #         key: ${{ github.sha }}
 
   testAll:
@@ -35,10 +35,10 @@ jobs:
       matrix:
         group: [1, 2, 3, 4, 5, 6]
     steps:
-      # - uses: actions/cache@v1
+      # - uses: actions/cache@v2
       #   id: restore-build
       #   with:
-      #     path: '.'
+      #     path: ./*
       #     key: ${{ github.sha }}
 
       - uses: actions/checkout@v2

docs/advanced-features/custom-document.md

@@ -54,7 +54,6 @@ The `ctx` object is equivalent to the one received in [`getInitialProps`](/docs/
 - `Document` is only rendered in the server, event handlers like `onClick` won't work
 - React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), take a look at the [`App`](/docs/advanced-features/custom-app.md) component instead
 - `Document`'s `getInitialProps` function is not called during client-side transitions, nor when a page is [statically optimized](/docs/advanced-features/automatic-static-optimization.md)
-- Make sure to check if `ctx.req` / `ctx.res` are defined in `getInitialProps`. Those variables will be `undefined` when a page is being statically exported by [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) or by [`next export`](/docs/advanced-features/static-html-export.md)
 
 ## Customizing `renderPage`
 
@@ -86,3 +85,21 @@ class MyDocument extends Document {
 
 export default MyDocument
 ```
+
+## TypeScript
+
+You can use the built-in `DocumentContext` type and change the file name to `./pages/_document.tsx` like so:
+
+```tsx
+import Document, { DocumentContext } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx)
+
+    return initialProps
+  }
+}
+
+export default MyDocument
+```

docs/api-reference/next.config.js/custom-webpack-config.md

@@ -4,12 +4,18 @@ description: Extend the default webpack config added by Next.js.
 
 # Custom Webpack Config
 
+Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case:
+
+- [CSS imports](/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
+- [CSS modules](/docs/basic-features/built-in-css-support#adding-component-level-css)
+- [Sass/SCSS imports](/docs/basic-features/built-in-css-support#sass-support)
+- [Sass/SCSS modules](/docs/basic-features/built-in-css-support#sass-support)
+- [preact](https://github.com/vercel/next.js/tree/canary/examples/using-preact)
+- [Customizing babel configuration](/docs/advanced-features/customizing-babel-config)
+
 Some commonly asked for features are available as plugins:
 
-- [@zeit/next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
-- [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
-- [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus)
-- [@zeit/next-preact](https://github.com/zeit/next-plugins/tree/master/packages/next-preact)
+- [@zeit/next-less](https://github.com/vercel/next-plugins/tree/master/packages/next-less)
 - [@next/mdx](https://github.com/vercel/next.js/tree/canary/packages/next-mdx)
 - [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer)
 
@@ -20,12 +26,8 @@ module.exports = {
   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
     // Note: we provide webpack above so you should not `require` it
     // Perform customizations to webpack config
-    // Important: return the modified config
     config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
-    return config
-  },
-  webpackDevMiddleware: (config) => {
-    // Perform customizations to webpack dev middleware config
+
     // Important: return the modified config
     return config
   },

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

@@ -4,6 +4,13 @@ description: Add rewrites to your Next.js app.
 
 # Rewrites
 
+<details>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/rewrites">Rewrites</a></li>
+  </ul>
+</details>
+
 Rewrites allow you to map an incoming request path to a different destination path.
 
 Rewrites are only available on the Node.js environment and do not affect client-side routing.

docs/api-reference/next/router.md

@@ -318,6 +318,8 @@ You can listen to different events happening inside the Next.js Router. Here's a
 - `hashChangeComplete(url)` - Fires when the hash has changed but not the page
 
 > Here `url` is the URL shown in the browser. If you call `router.push(url, as)` (or similar), then the value of `url` will be `as`.
+>
+> **Note:** If you [configure a `basePath`](/docs/api-reference/next.config.js/basepath.md) then the value of `url` will be `basePath + as`.
 
 #### Usage
 

docs/basic-features/built-in-css-support.md

@@ -129,8 +129,8 @@ module.exports = {
 
 To support importing `.less` or `.styl` files you can use the following plugins:
 
-- [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
-- [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus)
+- [@zeit/next-less](https://github.com/vercel/next-plugins/tree/master/packages/next-less)
+- [@zeit/next-stylus](https://github.com/vercel/next-plugins/tree/master/packages/next-stylus)
 
 If using the less plugin, don't forget to add a dependency on less as well, otherwise you'll see an error like:
 
@@ -164,7 +164,7 @@ function HiThere() {
 export default HiThere
 ```
 
-We bundle [styled-jsx](https://github.com/zeit/styled-jsx) to provide support for isolated scoped CSS.
+We bundle [styled-jsx](https://github.com/vercel/styled-jsx) to provide support for isolated scoped CSS.
 The aim is to support "shadow CSS" similar to Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71).
 
 See the above examples for other popular CSS-in-JS solutions (like Styled Components).
@@ -202,7 +202,7 @@ function HelloWorld() {
 export default HelloWorld
 ```
 
-Please see the [styled-jsx documentation](https://github.com/zeit/styled-jsx) for more examples.
+Please see the [styled-jsx documentation](https://github.com/vercel/styled-jsx) for more examples.
 
 ## FAQ
 

docs/basic-features/data-fetching.md

@@ -326,6 +326,13 @@ export default Post
 
 #### `fallback: true`
 
+<details>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://static-tweet.now.sh">Static generation of a large number of pages</a></li>
+  </ul>
+</details>
+
 If `fallback` is `true`, then the behavior of `getStaticProps` changes:
 
 - The paths returned from `getStaticPaths` will be rendered to HTML at build time.

docs/routing/dynamic-routes.md

@@ -99,7 +99,7 @@ The `query` objects are as follows:
 { "slug": ["a", "b"] } // `GET /post/a/b` (multi-element array)
 ```
 
-> A good example of optional catch all routes is the Next.js docs, a single page called [pages/docs/[[...slug]].js](https://github.com/zeit/next-site/blob/master/pages/docs/%5B%5B...slug%5D%5D.js) takes care of all the docs you're currently looking at.
+> A good example of optional catch all routes is the Next.js docs, a single page called [pages/docs/[[...slug]].js](https://github.com/vercel/next-site/blob/master/pages/docs/%5B%5B...slug%5D%5D.js) takes care of all the docs you're currently looking at.
 
 ## Caveats
 

docs/upgrading.md

@@ -104,7 +104,7 @@ Next.js now has the concept of page-level configuration, so the `withAmp` higher
 This change can be **automatically migrated by running the following commands in the root of your Next.js project:**
 
 ```bash
-curl -L https://github.com/zeit/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js
+curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js
 ```
 
 To perform this migration by hand, or view what the codemod will produce, see below:

errors/gssp-export.md

@@ -2,13 +2,37 @@
 
 #### Why This Error Occurred
 
-You attempted to export a page with `getServerSideProps` which is not allowed. `getServerSideProps` is meant for requesting up to date information on every request which means exporting it defeats the purpose of the method.
+You attempted to statically export your application via `next export`, however, one or more of your pages uses `getServerSideProps`.
+
+The `getServerSideProps` lifecycle is not compatible with `next export`, so you'll need to use `next start` or a [serverless deployment](https://vercel.com).
 
 #### Possible Ways to Fix It
 
-If you would like the page be static you can leverage the `getStaticProps` method instead.
+1. If you'd like to keep your application static, you can use `getStaticProps` instead of `getServerSideProps`.
+
+2. If you want to use server-side rendering, update your build command and remove `next export`. For example, in your `package.json`:
+
+   ```diff
+   diff --git a/bla.json b/bla.json
+   index b84aa66c4..149e67565 100644
+   --- a/bla.json
+   +++ b/bla.json
+   @@ -1,7 +1,7 @@
+   {
+     "scripts": {
+       "dev": "next dev",
+   -    "build": "next build && next export",
+   +    "build": "next build",
+       "start": "next start"
+     }
+   }
+   ```
+
+> **Note**: Removing `next export` does not mean your entire application is no longer static.
+> Pages that use `getStaticProps` or [no lifecycle](https://nextjs.org/docs/advanced-features/automatic-static-optimization) **will still be static**!
 
 ### Useful Links
 
+- [Automatic Static Optimization](https://nextjs.org/docs/advanced-features/automatic-static-optimization)
 - [`getStaticProps` documentation](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
 - [`exportPathMap` documentation](https://nextjs.org/docs/api-reference/next.config.js/exportPathMap)

errors/no-cache.md

@@ -78,7 +78,7 @@ cache:
 Using GitHub's [actions/cache](https://github.com/actions/cache), add the following step in your workflow file:
 
 ```yaml
-uses: actions/cache@v1
+uses: actions/cache@v2
 with:
   path: ${{ github.workspace }}/.next/cache
   key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}

examples/api-routes-apollo-server-and-client-auth/apollo/client.js

@@ -1,16 +1,15 @@
 import { useMemo } from 'react'
-import { ApolloClient } from 'apollo-client'
-import { InMemoryCache } from 'apollo-cache-inmemory'
+import { ApolloClient, InMemoryCache } from '@apollo/client'
 
 let apolloClient
 
 function createIsomorphLink() {
   if (typeof window === 'undefined') {
-    const { SchemaLink } = require('apollo-link-schema')
+    const { SchemaLink } = require('@apollo/client/link/schema')
     const { schema } = require('./schema')
     return new SchemaLink({ schema })
   } else {
-    const { HttpLink } = require('apollo-link-http')
+    const { HttpLink } = require('@apollo/client/link/http')
     return new HttpLink({
       uri: '/api/graphql',
       credentials: 'same-origin',

examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.js

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export const typeDefs = gql`
   type User {

examples/api-routes-apollo-server-and-client-auth/package.json

@@ -7,18 +7,11 @@
     "start": "next start"
   },
   "dependencies": {
-    "@apollo/react-common": "^3.1.4",
-    "@apollo/react-hooks": "^3.1.5",
+    "@apollo/client": "^3.0.2",
     "@hapi/iron": "6.0.0",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-schema": "^1.2.5",
     "apollo-server-micro": "^2.14.2",
-    "apollo-utilities": "^1.3.2",
     "cookie": "^0.4.1",
     "graphql": "^14.0.2",
-    "graphql-tag": "^2.10.3",
     "next": "latest",
     "prop-types": "^15.6.2",
     "react": "^16.7.0",