Merge branch 'canary' into with-storybook-styled-jsx-scss

bench/instrument.js

@@ -0,0 +1,15 @@
+const { NodeTracerProvider } = require('@opentelemetry/node')
+const { BatchSpanProcessor } = require('@opentelemetry/tracing')
+const { ZipkinExporter } = require('@opentelemetry/exporter-zipkin')
+
+const tracerProvider = new NodeTracerProvider()
+
+tracerProvider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new ZipkinExporter({
+      serviceName: 'next-js',
+    })
+  )
+)
+
+tracerProvider.register()

docs/advanced-features/source-maps.md

@@ -0,0 +1,23 @@
+---
+description: Enables browser source map generation during the production build.
+---
+
+# Source Maps
+
+Source Maps are enabled by default during development. During production builds they are disabled as generation source maps can significantly increase build times and memory usage while being generated.
+
+Next.js provides a configuration flag you can use to enable browser source map generation during the production build:
+
+```js
+// next.config.js
+module.exports = {
+  productionBrowserSourceMaps: true,
+}
+```
+
+When the `productionBrowserSourceMaps` option is enabled the source maps will be output in the same directory as the JavaScript files, Next.js will automatically serve these files when requested.
+
+## Caveats
+
+- Can increase `next build` time
+- Increases memory usage during `next build`

docs/api-reference/next/router.md

@@ -310,13 +310,13 @@ export default function Page() {
 
 You can listen to different events happening inside the Next.js Router. Here's a list of supported events:
 
-- `routeChangeStart(url)` - Fires when a route starts to change
-- `routeChangeComplete(url)` - Fires when a route changed completely
-- `routeChangeError(err, url)` - Fires when there's an error when changing routes, or a route load is cancelled
+- `routeChangeStart(url, { shallow })` - Fires when a route starts to change
+- `routeChangeComplete(url, { shallow })` - Fires when a route changed completely
+- `routeChangeError(err, url, { shallow })` - Fires when there's an error when changing routes, or a route load is cancelled
   - `err.cancelled` - Indicates if the navigation was cancelled
-- `beforeHistoryChange(url)` - Fires just before changing the browser's history
-- `hashChangeStart(url)` - Fires when the hash will change but not the page
-- `hashChangeComplete(url)` - Fires when the hash has changed but not the page
+- `beforeHistoryChange(url, { shallow })` - Fires just before changing the browser's history
+- `hashChangeStart(url, { shallow })` - Fires when the hash will change but not the page
+- `hashChangeComplete(url, { shallow })` - Fires when the hash has changed but not the page
 
 > **Note:** Here `url` is the URL shown in the browser, including the [`basePath`](/docs/api-reference/next.config.js/basepath.md).
 
@@ -332,8 +332,12 @@ export default function MyApp({ Component, pageProps }) {
   const router = useRouter()
 
   useEffect(() => {
-    const handleRouteChange = (url) => {
-      console.log('App is changing to: ', url)
+    const handleRouteChange = (url, { shallow }) => {
+      console.log(
+        `App is changing to ${url} ${
+          shallow ? 'with' : 'without'
+        } shallow routing`
+      )
     }
 
     router.events.on('routeChangeStart', handleRouteChange)

docs/deployment.md

@@ -10,7 +10,7 @@ The easiest way to deploy Next.js to production is to use the **[Vercel platform
 
 ### Getting started
 
-If you haven’t already done so, push your Next.js app to a Git provider of your choice: [GitHub](http://github.com/), [GitLab](https://gitlab.com/), or [BitBucket](https://bitbucket.org/). Your repository can be private or public.
+If you haven’t already done so, push your Next.js app to a Git provider of your choice: [GitHub](https://github.com/), [GitLab](https://gitlab.com/), or [BitBucket](https://bitbucket.org/). Your repository can be private or public.
 
 Then, follow these steps:
 
@@ -29,7 +29,7 @@ Let’s talk about the workflow we recommend using. [Vercel](https://vercel.com)
 
 - **Develop:** Write code in Next.js. Keep the development server running and take advantage of [React Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
 - **Preview:** Every time you push changes to a branch on GitHub / GitLab / BitBucket, Vercel automatically creates a new deployment with a unique URL. You can view them on GitHub when you open a pull request, or under “Preview Deployments” on your project page on Vercel. [Learn more about it here](https://vercel.com/features/deployment-previews).
-- **Ship:** When you’re ready to ship, merge the pull request to your default branch (e.g. `master`). Vercel will automatically create a production deployment.
+- **Ship:** When you’re ready to ship, merge the pull request to your default branch (e.g. `main`). Vercel will automatically create a production deployment.
 
 By using the DPS workflow, in addition to doing _code reviews_, you can do _deployment previews_. Each deployment creates a unique URL that can be shared or used for integration tests.
 
@@ -50,6 +50,14 @@ For example, the [hybrid pages](/docs/basic-features/pages.md) approach is fully
 - **Automatic HTTPS:** HTTPS is enabled by default (including custom domains) and doesn't require extra configuration. We auto-renew SSL certificates.
 - **More:** [Read our documentation](https://vercel.com/docs) to learn more about the Vercel platform.
 
+## Automatic Updates
+
+When you deploy your Next.js application, you want to see the latest version without needing to reload.
+
+Next.js will automatically load the latest version of your application in the background when routing. For client-side navigation, `next/link` will temporarily function as a normal `<a>` tag.
+
+If a new page (with an old version) has already been prefetched by `next/link`, Next.js will use the old version. Then, after either a full page refresh or multiple client-side transitions, Next.js will show the latest version.
+
 ## Other hosting options
 
 ### Node.js Server

docs/manifest.json

@@ -181,6 +181,10 @@
               "title": "Debugging",
               "path": "/docs/advanced-features/debugging.md"
             },
+            {
+              "title": "Source Maps",
+              "path": "/docs/advanced-features/source-maps.md"
+            },
             {
               "title": "Codemods",
               "path": "/docs/advanced-features/codemods.md"

examples/custom-server-koa/README.md

@@ -2,7 +2,7 @@
 
 Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://nextjs.org/docs/advanced-features/custom-server) so you can customize as much as you want.
 
-Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Koa](http://koajs.com/) to build a custom router on top of Next.
+Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Koa](https://koajs.com/) to build a custom router on top of Next.
 
 The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
 

examples/progressive-web-app/pages/_app.js

@@ -17,13 +17,13 @@ export default function MyApp({ Component, pageProps }) {
 
         <link rel="manifest" href="/manifest.json" />
         <link
-          href="/favicon-16x16.png"
+          href="/icons/favicon-16x16.png"
           rel="icon"
           type="image/png"
           sizes="16x16"
         />
         <link
-          href="/favicon-32x32.png"
+          href="/icons/favicon-32x32.png"
           rel="icon"
           type="image/png"
           sizes="32x32"

examples/with-ant-design-less/README.md

@@ -1,6 +1,6 @@
 # Ant Design example
 
-This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
+This example shows how to use Next.js along with [Ant Design of React](https://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
 
 ## Deploy your own
 

examples/with-ant-design/README.md

@@ -1,6 +1,6 @@
 # Ant Design example
 
-This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
+This example shows how to use Next.js along with [Ant Design of React](https://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
 
 ## Deploy your own
 

examples/with-carbon-components/README.md

@@ -1,8 +1,8 @@
 # Example app with carbon-components-react
 
-This example features how you use IBM's [carbon-components-react](https://github.com/IBM/carbon-components-react) [(Carbon Design System)](http://www.carbondesignsystem.com/components/overview) with Next.js.
+This example features how you use IBM's [carbon-components-react](https://github.com/IBM/carbon-components-react) [(Carbon Design System)](https://www.carbondesignsystem.com/components/overview) with Next.js.
 
-Create your own theme with Carbon Design System's [theming tools](http://themes.carbondesignsystem.com/) and put it all together as demonstrated in `static/myCustomTheme.scss`
+Create your own theme with Carbon Design System's [theming tools](https://themes.carbondesignsystem.com/) and put it all together as demonstrated in `static/myCustomTheme.scss`
 
 ## Deploy your own
 

examples/with-knex/README.md

@@ -1,6 +1,6 @@
 ## Example app using Knex
 
-[Knex](http://knexjs.org/) is a SQL query builder that works with a variety of SQL databases including Postgres and MySQL. This example shows you how to use Knex with Next.js to connect and query a Postgres database. The same code can also connect to all other databases supported by Knex.
+[Knex](https://knexjs.org/) is a SQL query builder that works with a variety of SQL databases including Postgres and MySQL. This example shows you how to use Knex with Next.js to connect and query a Postgres database. The same code can also connect to all other databases supported by Knex.
 
 ## Deploy your own
 

examples/with-rebass/README.md

@@ -1,6 +1,6 @@
 # Example app with Rebass
 
-This example features how you use [Rebass](http://jxnblk.com/rebass/) functional UI library with Next.js.
+This example features how you use [Rebass](https://jxnblk.com/rebass/) functional UI library with Next.js.
 
 ![Screenshot](https://cloud.githubusercontent.com/assets/304265/22472564/b2e04ff0-e7de-11e6-921e-d0c9833ac805.png)
 

examples/with-redux-saga/README.md

@@ -26,7 +26,7 @@ Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&ut
 
 In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
 
-![](http://i.imgur.com/JCxtWSj.gif)
+![](https://i.imgur.com/JCxtWSj.gif)
 
 Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the redux store and dispatching the required actions until we are ready to return the initial state to be rendered. Since the component is wrapped with `next-redux-wrapper`, the component is automatically connected to Redux and wrapped with `react-redux Provider`, that allows us to access redux state immediately and send the store down to children components so they can access to the state when required.
 

examples/with-redux-wrapper/README.md

@@ -24,7 +24,7 @@ Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&ut
 
 In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
 
-![](http://i.imgur.com/JCxtWSj.gif)
+![](https://i.imgur.com/JCxtWSj.gif)
 
 Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the redux store and dispatching the required actions until we are ready to return the initial state to be rendered. Since the component is wrapped with `next-redux-wrapper`, the component is automatically connected to Redux and wrapped with `react-redux Provider`, that allows us to access redux state immediately and send the store down to children components so they can access to the state when required.
 

examples/with-semantic-ui/README.md

@@ -1,6 +1,6 @@
 # Semantic UI example
 
-This example shows how to use Next.js along with [Semantic UI React](http://react.semantic-ui.com) including handling of external styles and assets. This is intended to show the integration of this UI toolkit with the Framework.
+This example shows how to use Next.js along with [Semantic UI React](https://react.semantic-ui.com) including handling of external styles and assets. This is intended to show the integration of this UI toolkit with the Framework.
 
 ## Deploy your own
 

examples/with-sentry/.env.local.example

@@ -5,6 +5,10 @@ NEXT_PUBLIC_SENTRY_DSN=
 # SENTRY_PROJECT=
 # SENTRY_AUTH_TOKEN=
 #
+# Only required if sentry for organization
+# Ex: https://sentry.ORG.com/
+# SENTRY_URL=
+#
 # For sourcemaps to work with server-side exceptions, the file path of the
 # uploaded .map file needs to match the file paths in Error.stack. In Node.js,
 # Error.stack file paths are absolute. Since the .map files we upload to Sentry

examples/with-stomp/README.md

@@ -1,6 +1,6 @@
 # Stomp example
 
-This example show how to use [STOMP](http://stomp.github.io/) inside a Next.js application.
+This example show how to use [STOMP](https://stomp.github.io/) inside a Next.js application.
 
 STOMP is a simple text-orientated messaging protocol. It defines an interoperable wire format so that any of the available STOMP clients can communicate with any STOMP message broker.
 

examples/with-supabase-auth-realtime-db/README.md

@@ -10,7 +10,7 @@ This is a full-stack Slack clone example using:
 
 ![Demo animation gif](./docs/slack-clone-demo.gif)
 
-This example is a clone of the [Slack Clone example](https://github.com/supabase/supabase/tree/master/examples/slack-clone) in the supabase repo, feel free to check it out!
+This example is a clone of the [Slack Clone example](https://github.com/supabase/supabase/tree/master/examples/nextjs-slack-clone) in the supabase repo, feel free to check it out!
 
 ## Deploy your own
 

examples/with-videojs/README.md

@@ -1,6 +1,6 @@
 # video.js example
 
-This example shows how to use Next.js along with [Video.js](http://videojs.com) including handling of default styles.
+This example shows how to use Next.js along with [Video.js](https://videojs.com) including handling of default styles.
 
 ## Deploy your own
 

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.0.4-canary.5"
+  "version": "10.0.5-canary.0"
 }

package.json

@@ -33,6 +33,7 @@
     "publish-stable": "lerna version --force-publish",
     "lint-staged": "lint-staged",
     "next": "node --trace-deprecation packages/next/dist/bin/next",
+    "trace": "node --trace-deprecation -r ./bench/instrument.js packages/next/dist/bin/next",
     "debug": "node --inspect packages/next/dist/bin/next"
   },
   "pre-commit": "lint-staged",
@@ -126,8 +127,13 @@
     "typescript": "3.8.3",
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",
-    "webpack-bundle-analyzer": "3.6.1",
-    "worker-loader": "2.0.0"
+    "webpack-bundle-analyzer": "4.3.0",
+    "worker-loader": "2.0.0",
+    "@opentelemetry/exporter-zipkin": "0.14.0",
+    "@opentelemetry/node": "0.14.0",
+    "@opentelemetry/plugin-http": "0.14.0",
+    "@opentelemetry/plugin-https": "0.14.0",
+    "@opentelemetry/tracing": "0.14.0"
   },
   "resolutions": {
     "browserslist": "^4.14.7",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "main": "index.js",
   "license": "MIT",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-bundle-analyzer"
   },
   "dependencies": {
-    "webpack-bundle-analyzer": "3.6.1"
+    "webpack-bundle-analyzer": "4.3.0"
   }
 }

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "10.0.4-canary.5",
+  "version": "10.0.5-canary.0",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",