Merge branch 'canary' into with-facebook-pixel

.eslintignore

@@ -13,4 +13,5 @@ packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*
 packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
-packages/next-env/**/*.d.ts
+packages/next-env/**/*.d.ts
+test/integration/async-modules/**

.github/workflows/build_test_deploy.yml

@@ -107,12 +107,14 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: cat package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp package.json
-      - run: cat package.json | jq '.resolutions.react = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
-      - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat packages/next/package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp packages/next/package.json
+      - run: cat packages/next/package.json | jq '.resolutions.react = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp packages/next/package.json
+      - run: cat packages/next/package.json | jq '.resolutions."react-dom" = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp packages/next/package.json
       - run: yarn install --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/integration/async-modules/test/index.test.js
+      - run: node run-tests.js test/integration/font-optimization/test/index.test.js
       - run: node run-tests.js test/acceptance/*
 
   testFirefox:
@@ -190,7 +192,11 @@ jobs:
     runs-on: ubuntu-latest
     needs: [publishRelease]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/cache@v2
+        id: restore-build
+        with:
+          path: ./*
+          key: ${{ github.sha }}
       - run: ./release-stats.sh
       - uses: ./.github/actions/next-stats-action
         env:

docs/advanced-features/codemods.md

@@ -132,7 +132,7 @@ export default withRouter(
 )
 ```
 
-This is just one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](./transforms/__testfixtures__/url-to-withrouter).
+This is just one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).
 
 #### Usage
 

docs/advanced-features/custom-app.md

@@ -44,6 +44,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout
 
 - If your app is running and you just added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.
 - Adding a custom `getInitialProps` in your `App` will disable [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) in pages without [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation).
+- `App` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).
 
 ### TypeScript
 

docs/advanced-features/custom-document.md

@@ -51,9 +51,10 @@ The `ctx` object is equivalent to the one received in [`getInitialProps`](/docs/
 
 ## Caveats
 
-- `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)
+- `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).
+- `Document` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).
 
 ## Customizing `renderPage`
 

docs/api-reference/create-next-app.md

@@ -18,6 +18,7 @@ yarn create next-app
 
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed
 
 ### Why use Create Next App?
 

docs/api-reference/next/link.md

@@ -145,7 +145,7 @@ export default Home
 
 ## With URL Object
 
-`Link` can also receive an URL object and it will automatically format it to create the URL string. Here's how to do it:
+`Link` can also receive a URL object and it will automatically format it to create the URL string. Here's how to do it:
 
 ```jsx
 import Link from 'next/link'

docs/api-reference/next/router.md

@@ -120,7 +120,7 @@ export default function Page() {
 
 #### With URL object
 
-You can use an URL object in the same way you can use it for [`next/link`](/docs/api-reference/next/link.md#with-url-object). Works for both the `url` and `as` parameters:
+You can use a URL object in the same way you can use it for [`next/link`](/docs/api-reference/next/link.md#with-url-object). Works for both the `url` and `as` parameters:
 
 ```jsx
 import { useRouter } from 'next/router'

docs/basic-features/fast-refresh.md

@@ -75,7 +75,7 @@ local state being reset on every edit to a file:
 - The file you're editing might have _other_ exports in addition to a React
   component.
 - Sometimes, a file would export the result of calling higher-order component
-  like `higherOrderComponent(WrappedComponent)`. If the returned component is a
+  like `HOC(WrappedComponent)`. If the returned component is a
   class, state will be reset.
 
 As more of your codebase moves to function components and Hooks, you can expect

docs/migrating/from-gatsby.md

@@ -84,10 +84,10 @@ import { getPostBySlug, getAllPosts } from '../lib/blog'
 
 export async function getStaticProps({ params }) {
   const post = getPostBySlug(params.slug)
-  const content = await remark()
+  const markdown = await remark()
     .use(html)
     .process(post.content || '')
-    .toString()
+  const content = markdown.toString()
 
   return {
     props: {
@@ -128,7 +128,7 @@ import { join } from 'path'
 const postsDirectory = join(process.cwd(), 'src', 'content', 'blog')
 
 export function getPostBySlug(slug) {
-  const realSlug = slug.replace(/\\.md$/, '')
+  const realSlug = slug.replace(/\.md$/, '')
   const fullPath = join(postsDirectory, `${realSlug}.md`)
   const fileContents = fs.readFileSync(fullPath, 'utf8')
   const { data, content } = matter(fileContents)

errors/install-sharp.md

@@ -0,0 +1,15 @@
+# Install `sharp` to Use Built-In Image Optimization
+
+#### Why This Error Occurred
+
+Using Next.js' built-in Image Optimization requires that you bring your own version of `sharp`.
+
+#### Possible Ways to Fix It
+
+Please install the `sharp` package in your project.
+
+```bash
+npm i sharp
+# or
+yarn add sharp
+```

examples/with-apollo/components/Submit.js

@@ -1,5 +1,4 @@
 import { gql, useMutation } from '@apollo/client'
-import { ALL_POSTS_QUERY, allPostsQueryVars } from './PostList'
 
 const CREATE_POST_MUTATION = gql`
   mutation createPost($title: String!, $url: String!) {
@@ -26,19 +25,22 @@ export default function Submit() {
 
     createPost({
       variables: { title, url },
-      update: (proxy, { data: { createPost } }) => {
-        const data = proxy.readQuery({
-          query: ALL_POSTS_QUERY,
-          variables: allPostsQueryVars,
-        })
-        // Update the cache with the new post at the top of the list
-        proxy.writeQuery({
-          query: ALL_POSTS_QUERY,
-          data: {
-            ...data,
-            allPosts: [createPost, ...data.allPosts],
+      update: (cache, { data: { createPost } }) => {
+        cache.modify({
+          fields: {
+            allPosts(existingPosts = []) {
+              const newPostRef = cache.writeFragment({
+                data: createPost,
+                fragment: gql`
+                  fragment NewPost on allPosts {
+                    id
+                    type
+                  }
+                `,
+              })
+              return [newPostRef, ...existingPosts]
+            },
           },
-          variables: allPostsQueryVars,
         })
       },
     })

examples/with-expo-typescript/next.config.js

@@ -1,5 +1,5 @@
 // @generated: @expo/next-adapter@2.1.9
-// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#withexpo
+// Learn more: https://github.com/expo/expo/blob/master/docs/pages/guides/using-nextjs.md
 
 const { withExpo } = require('@expo/next-adapter')
 

examples/with-expo/next.config.js

@@ -1,5 +1,5 @@
 // @generated: @expo/next-adapter@2.1.5
-// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#withexpo
+// Learn more: https://github.com/expo/expo/blob/master/docs/pages/guides/using-nextjs.md
 
 const { withExpo } = require('@expo/next-adapter')
 

examples/with-mongodb/util/mongodb.js

@@ -1,37 +1,45 @@
 import { MongoClient } from 'mongodb'
 
-let uri = process.env.MONGODB_URI
-let dbName = process.env.MONGODB_DB
+const { MONGODB_URI, MONGODB_DB } = process.env
 
-let cachedClient = null
-let cachedDb = null
-
-if (!uri) {
+if (!MONGODB_URI) {
   throw new Error(
     'Please define the MONGODB_URI environment variable inside .env.local'
   )
 }
 
-if (!dbName) {
+if (!MONGODB_DB) {
   throw new Error(
     'Please define the MONGODB_DB environment variable inside .env.local'
   )
 }
 
+/**
+ * Global is used here to maintain a cached connection across hot reloads
+ * in development. This prevents connections growing exponentiatlly
+ * during API Route usage.
+ */
+let cached = global.mongo
+if (!cached) cached = global.mongo = {}
+
 export async function connectToDatabase() {
-  if (cachedClient && cachedDb) {
-    return { client: cachedClient, db: cachedDb }
+  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
+      })
   }
-
-  const client = await MongoClient.connect(uri, {
-    useNewUrlParser: true,
-    useUnifiedTopology: true,
-  })
-
-  const db = await client.db(dbName)
-
-  cachedClient = client
-  cachedDb = db
-
-  return { client, db }
+  await cached.promise
+  return cached.conn
 }

examples/with-msw/package.json

@@ -8,7 +8,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "msw": "^0.21.0",
+    "msw": "^0.21.2",
     "next": "latest",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

examples/with-msw/pages/_app.js

@@ -1,4 +1,6 @@
-if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
+// Enable API mocking in all environments except production.
+// This is recommended for real-world apps.
+if (process.env.NODE_ENV !== 'production') {
   require('../mocks')
 }
 

examples/with-msw/pages/index.js

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-export default function Home({ book }) {
+export default function Home({ book, inProduction }) {
   const [reviews, setReviews] = useState(null)
 
   const handleGetReviews = () => {
@@ -10,6 +10,18 @@ export default function Home({ book }) {
       .then(setReviews)
   }
 
+  if (inProduction) {
+    return (
+      <div>
+        <p>
+          This example does not work in production, as MSW is not intended for
+          use in production. In a real-world app, your request will hit the
+          actual backend instead.
+        </p>
+      </div>
+    )
+  }
+
   return (
     <div>
       <img src={book.imageUrl} alt={book.title} width="250" />
@@ -32,12 +44,21 @@ export default function Home({ book }) {
 
 export async function getServerSideProps() {
   // Server-side requests are mocked by `mocks/server.js`.
-  const res = await fetch('https://my.backend/book')
-  const book = await res.json()
+  // In a real-world app this request would hit the actual backend.
+  try {
+    const res = await fetch('https://my.backend/book')
+    const book = await res.json()
 
-  return {
-    props: {
-      book,
-    },
+    return {
+      props: {
+        book,
+      },
+    }
+  } catch (error) {
+    return {
+      props: {
+        inProduction: true,
+      },
+    }
   }
 }

examples/with-prisma/README.md

@@ -1,5 +1,7 @@
 Prisma.io maintains it's own Next.Js examples
 
 - [Javascript](https://github.com/prisma/prisma-examples/tree/master/javascript/rest-nextjs)
-- [Typescript](https://github.com/prisma/prisma-examples/tree/master/typescript/rest-nextjs)
-- [Typescript-GraphQL](https://github.com/prisma/prisma-examples/tree/master/typescript/graphql-nextjs)
+- [Typescript: rest-api-routes-auth](https://github.com/prisma/prisma-examples/tree/latest/typescript/rest-nextjs-api-routes-auth)
+- [Typescript: rest-api-routes](https://github.com/prisma/prisma-examples/tree/latest/typescript/rest-nextjs-api-routes)
+- [Typescript: rest-api-express](https://github.com/prisma/prisma-examples/tree/latest/typescript/rest-nextjs-express)
+- [Typescript: graphql](https://github.com/prisma/prisma-examples/tree/latest/typescript/graphql-nextjs)

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

@@ -7,12 +7,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-native-web": "^0.11.6"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-native-web": "^0.13.14"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "^0.11.7"
+    "babel-plugin-react-native-web": "^0.13.14"
   },
   "license": "MIT"
 }

examples/with-tailwindcss/tailwind.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   future: {
     removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
   },
   purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
   theme: {

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.4-canary.24"
+  "version": "9.5.6-canary.4"
 }