Merge branch 'canary' into create-next-app/support-pnpm

.github/CODEOWNERS

@@ -1,6 +1,6 @@
 # Learn how to add code owners here:
 # https://help.github.com/en/articles/about-code-owners
 
-*          @timneutkens @Timer @ijjk @lfades
-/docs/     @timneutkens @Timer @ijjk @lfades @chibicode
-/examples/ @timneutkens @Timer @ijjk @lfades @chibicode
+*          @timneutkens @Timer @ijjk @lfades @divmain
+/docs/     @timneutkens @Timer @ijjk @lfades @divmain @leerob
+/examples/ @timneutkens @Timer @ijjk @lfades @divmain @leerob

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -3,65 +3,73 @@ about: Create a bug report for the Next.js core
 title: ''
 labels: 'template: bug'
 issue_body: true
-inputs:
-  - type: description
+body:
+  - type: markdown
     attributes:
       value: Thanks for taking the time to file a bug report! Please fill out this form as completely as possible.
-  - type: description
+  - type: markdown
     attributes:
       value: If you leave out sections there is a high likelihood it will be moved to the GitHub Discussions "Help" section.
-  - type: description
+  - type: markdown
     attributes:
       value: 'Please first verify if your issue exists in the Next.js canary release line: `npm install next@canary`.'
-  - type: description
+  - type: markdown
     attributes:
       value: 'next@canary is the beta version of Next.js. It includes all features and fixes that are pending to land on the stable release line.'
   - type: input
     attributes:
       label: What version of Next.js are you using?
       description: 'For example: 10.0.1'
+    validations:
       required: true
   - type: input
     attributes:
       label: What version of Node.js are you using?
       description: 'For example: 12.0.0'
+    validations:
       required: true
   - type: input
     attributes:
       label: What browser are you using?
       description: 'For example: Chrome, Safari'
+    validations:
       required: true
   - type: input
     attributes:
       label: What operating system are you using?
       description: 'For example: macOS, Windows'
+    validations:
       required: true
   - type: input
     attributes:
       label: How are you deploying your application?
       description: 'For example: next start, next export, Vercel, Other platform'
+    validations:
       required: true
   - type: textarea
     attributes:
       label: Describe the Bug
       description: A clear and concise description of what the bug is.
+    validations:
       required: true
   - type: textarea
     attributes:
       label: Expected Behavior
       description: A clear and concise description of what you expected to happen.
+    validations:
       required: true
   - type: textarea
     attributes:
       label: To Reproduce
       description: Steps to reproduce the behavior, please provide a clear code snippets that always reproduces the issue or a GitHub repository. Screenshots can be provided in the issue body below.
+    validations:
       required: true
-  - type: description
+  - type: markdown
     attributes:
       value: Before posting the issue go through the steps you've written down to make sure the steps provided are detailed and clear.
-  - type: description
+  - type: markdown
     attributes:
       value: Contributors should be able to follow the steps provided in order to reproduce the bug.
-  - type: description
+  - type: markdown
     attributes:
       value: These steps are used to add integration tests to ensure the same issue does not happen again. Thanks in advance!

.github/ISSUE_TEMPLATE/2.example_bug_report.yml

@@ -3,64 +3,73 @@ about: Create a bug report for the examples
 title: ''
 labels: 'type: example,template: bug'
 issue_body: true
-inputs:
-  - type: description
+body:
+  - type: markdown
     attributes:
       value: Thanks for taking the time to file a examples bug report! Please fill out this form as completely as possible.
-  - type: description
+  - type: markdown
     attributes:
       value: If you leave out sections there is a high likelihood it will be moved to the GitHub Discussions "Help" section.
   - type: input
     attributes:
       label: What example does this report relate to?
       description: 'For example: with-styled-components'
+    validations:
       required: true
   - type: input
     attributes:
       label: What version of Next.js are you using?
       description: 'For example: 10.0.1'
+    validations:
       required: true
   - type: input
     attributes:
       label: What version of Node.js are you using?
       description: 'For example: 12.0.0'
+    validations:
       required: true
   - type: input
     attributes:
       label: What browser are you using?
       description: 'For example: Chrome, Safari'
+    validations:
       required: true
   - type: input
     attributes:
       label: What operating system are you using?
       description: 'For example: macOS, Windows'
+    validations:
       required: true
   - type: input
     attributes:
       label: How are you deploying your application?
       description: 'For example: next start, next export, Vercel, Other platform'
+    validations:
       required: true
   - type: textarea
     attributes:
       label: Describe the Bug
       description: A clear and concise description of what the bug is.
+    validations:
       required: true
   - type: textarea
     attributes:
       label: Expected Behavior
       description: A clear and concise description of what you expected to happen.
+    validations:
       required: true
   - type: textarea
     attributes:
       label: To Reproduce
       description: Steps to reproduce the behavior, please provide a clear code snippets that always reproduces the issue or a GitHub repository. Screenshots can be provided in the issue body below.
+    validations:
       required: true
-  - type: description
+  - type: markdown
     attributes:
       value: Before posting the issue go through the steps you've written down to make sure the steps provided are detailed and clear.
-  - type: description
+  - type: markdown
     attributes:
       value: Contributors should be able to follow the steps provided in order to reproduce the bug.
-  - type: description
+  - type: markdown
     attributes:
       value: Thanks in advance!

.github/ISSUE_TEMPLATE/3.feature_request.yml

@@ -3,25 +3,28 @@ about: Create a feature request for the Next.js core
 title: ''
 labels: 'template: story'
 issue_body: true
-inputs:
-  - type: description
+body:
+  - type: markdown
     attributes:
       value: Thanks for taking the time to file a feature request! Please fill out this form as completely as possible.
-  - type: description
+  - type: markdown
     attributes:
       value: 'Feature requests will be converted to the GitHub Discussions "Ideas" section.'
   - type: textarea
     attributes:
       label: Describe the feature you'd like to request
       description: A clear and concise description of what you want and what your use case is.
+    validations:
       required: true
   - type: textarea
     attributes:
       label: Describe the solution you'd like
       description: A clear and concise description of what you want to happen.
+    validations:
       required: true
   - type: textarea
     attributes:
       label: Describe alternatives you've considered
       description: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
       required: true

.vscode/launch.json

@@ -25,6 +25,17 @@
       "port": 9229,
       "outFiles": ["${workspaceFolder}/packages/next/dist/**/*"]
     },
+    {
+      "name": "Launch app build trace",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "yarn",
+      "runtimeArgs": ["run", "trace-debug", "build", "test/integration/basic"],
+      "skipFiles": ["<node_internals>/**"],
+      "port": 9229,
+      "outFiles": ["${workspaceFolder}/packages/next/dist/**/*"]
+    },
     {
       "name": "Launch app production",
       "type": "node",

bench/capture-trace.js

@@ -0,0 +1,66 @@
+const http = require('http')
+const fs = require('fs')
+
+const PORT = 9411
+const HOST = '0.0.0.0'
+
+const traces = []
+
+const onReady = () => console.log(`Listening on http://${HOST}:${PORT}`)
+const onRequest = async (req, res) => {
+  if (
+    req.method !== 'POST' ||
+    req.url !== '/api/v2/spans' ||
+    (req.headers && req.headers['content-type']) !== 'application/json'
+  ) {
+    res.writeHead(200)
+    return res.end()
+  }
+
+  try {
+    const body = JSON.parse(await getBody(req))
+    for (const traceEvent of body) {
+      traces.push(traceEvent)
+    }
+    res.writeHead(200)
+  } catch (err) {
+    console.warn(err)
+    res.writeHead(500)
+  }
+
+  res.end()
+}
+
+const getBody = (req) =>
+  new Promise((resolve, reject) => {
+    let data = ''
+    req.on('data', (chunk) => {
+      data += chunk
+    })
+    req.on('end', () => {
+      if (!req.complete) {
+        return reject('Connection terminated before body was received.')
+      }
+      resolve(data)
+    })
+    req.on('aborted', () => reject('Connection aborted.'))
+    req.on('error', () => reject('Connection error.'))
+  })
+
+const main = () => {
+  const args = process.argv.slice(2)
+  const outFile = args[0] || `./trace-${Date.now()}.json`
+
+  process.on('SIGINT', () => {
+    console.log(`\nSaving to ${outFile}...`)
+    fs.writeFileSync(outFile, JSON.stringify(traces, null, 2))
+    process.exit()
+  })
+
+  const server = http.createServer(onRequest)
+  server.listen(PORT, HOST, onReady)
+}
+
+if (require.main === module) {
+  main()
+}

docs/api-reference/next/router.md

@@ -50,6 +50,7 @@ The following is the definition of the `router` object returned by both [`useRou
 - `locales`: `String[]` - All supported locales (if enabled).
 - `defaultLocale`: `String` - The current default locale (if enabled).
 - `isReady`: `boolean` - Whether the router fields are updated client-side and ready for use. Should only be used inside of `useEffect` methods and not for conditionally rendering on the server.
+- `isPreview`: `boolean` - Whether the application is currently in [preview mode](/docs/advanced-features/preview-mode.md).
 
 Additionally, the following methods are also included inside `router`:
 
@@ -71,6 +72,7 @@ router.push(url, as, options)
 - `url` - The URL to navigate to
 - `as` - Optional decorator for the URL that will be shown in the browser. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked
 - `options` - Optional object with the following configuration options:
+  - `scroll`: Scroll to the top of the page after a navigation. Defaults to `true`
   - [`shallow`](/docs/routing/shallow-routing.md): Update the path of the current page without rerunning [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation), [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) or [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md). Defaults to `false`
 
 > You don't need to use `router.push` for external URLs. [window.location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) is better suited for those cases.

docs/authentication.md

@@ -114,16 +114,16 @@ Now that we've discussed authentication patterns, let's look at specific provide
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-iron-session">with-iron-session</a></li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-next-auth">with-next-auth</a></li>
+    <li><a href="https://github.com/nextauthjs/next-auth-example">next-auth-example</a></li>
   </ul>
 </details>
 
 If you have an existing database with user data, you'll likely want to utilize an open-source solution that's provider agnostic.
 
 - If you need email/password log-in, use [`next-iron-session`](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session).
-- If you need to persist session data on the server, use [`next-auth`](https://github.com/vercel/next.js/tree/canary/examples/with-next-auth).
-- If you need to support social login (Google, Facebook, etc.), use [`next-auth`](https://github.com/vercel/next.js/tree/canary/examples/with-next-auth).
-- If you want to use [JWTs](https://jwt.io/), use [`next-auth`](https://github.com/vercel/next.js/tree/canary/examples/with-next-auth).
+- If you need to persist session data on the server, use [`next-auth`](https://github.com/nextauthjs/next-auth-example).
+- If you need to support social login (Google, Facebook, etc.), use [`next-auth`](https://github.com/nextauthjs/next-auth-example).
+- If you want to use [JWTs](https://jwt.io/), use [`next-auth`](https://github.com/nextauthjs/next-auth-example).
 
 Both of these libraries support either authentication pattern. If you're interested in [Passport](http://www.passportjs.org/), we also have examples for it using secure and encrypted cookies:
 

docs/deployment.md

@@ -6,7 +6,7 @@ description: Deploy your Next.js app to production with Vercel and other hosting
 
 ## Vercel (Recommended)
 
-The easiest way to deploy Next.js to production is to use the **[Vercel platform](https://vercel.com)** from the creators of Next.js. [Vercel](https://vercel.com) is an all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions.
+The easiest way to deploy Next.js to production is to use the **[Vercel platform](https://vercel.com)** from the creators of Next.js. [Vercel](https://vercel.com) is a cloud platform for static sites, hybrid apps, and Serverless Functions.
 
 ### Getting started
 

examples/custom-server-actionhero/config/servers/web.js

@@ -9,7 +9,7 @@ exports['default'] = {
         secure: false,
         // Passed to https.createServer if secure=true. Should contain SSL certificates
         serverOptions: {},
-        // Should we redirect all traffic to the first host in this array if hte request header doesn't match?
+        // Should we redirect all traffic to the first host in this array if the request header doesn't match?
         // i.e.: [ 'https://www.site.com' ]
         allowedRequestHosts: process.env.ALLOWED_HOSTS
           ? process.env.ALLOWED_HOSTS.split(',')

examples/with-chakra-ui-typescript/package.json

@@ -7,12 +7,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^1.0.0",
-    "@chakra-ui/react": "^1.0.0",
-    "@chakra-ui/theme-tools": "1.0.0",
-    "@emotion/react": "11.1.1",
-    "@emotion/styled": "11.0.0",
-    "framer-motion": "^2.9.4",
+    "@chakra-ui/icons": "^1.0.5",
+    "@chakra-ui/react": "^1.3.3",
+    "@chakra-ui/theme-tools": "1.0.4",
+    "@emotion/react": "11.1.5",
+    "@emotion/styled": "11.1.5",
+    "framer-motion": "^3.5.2",
     "next": "latest",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"

examples/with-context-api/README.md

@@ -4,7 +4,7 @@ This example shows how to use react context api in our app.
 
 It provides an example of using `pages/_app.js` to include the context api provider and then shows how both the `pages/index.js` and `pages/about.js` can both share the same data using the context api consumer.
 
-We start of by creating two contexts. One that actually never changes (`CounterDispatchContext`) and one that changes more often (`CounterStateContext`).
+We start off by creating two contexts. One that actually never changes (`CounterDispatchContext`) and one that changes more often (`CounterStateContext`).
 
 The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
 

examples/with-emotion/README.md

@@ -1,8 +1,8 @@
 # Emotion Example
 
 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/css](https://github.com/emotion-js/emotion/tree/master/packages/css),
+[@emotion/server](https://github.com/emotion-js/emotion/tree/master/packages/server),
 [@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).
 

examples/with-google-analytics/.env.local.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_GA_ID=123

examples/with-google-analytics/lib/gtag.js

@@ -1,4 +1,4 @@
-export const GA_TRACKING_ID = '<YOUR_GA_TRACKING_ID>'
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
 export const pageview = (url) => {

examples/with-i18n-rosetta/locales/de.json

@@ -2,7 +2,7 @@
   "intro": {
     "welcome": "Willkommen, {{username}}!",
     "text": "Ich hoffe, du findest das nützlich.",
-    "description": "Das Beispiel zeigt, wie man die Sprache für SSG und SSG optimierte Seiten wechselt."
+    "description": "Das Beispiel zeigt, wie man die Sprache für SSG und SSR optimierte Seiten wechselt."
   },
   "dashboard": {
     "description": "Das Beispiel zeigt, wie man die Sprache nur Frontendseitig verändert. Nützlich für Dashboards wo SEO nicht relevant ist."