Merge branch 'canary' into prevent-edge-case-in-redirect

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

@@ -4,7 +4,7 @@ description: Next.js provides gzip compression to compress rendered content and
 
 # Compression
 
-Next.js provides [**gzip**](https://tools.ietf.org/html/rfc6713#section-3) compression to compress rendered content and static files. Compression only works with the [`server` target](/docs/api-reference/next.config.js/build-target.md#server-target). In general you will want to enable compression on a HTTP proxy like [nginx](https://www.nginx.com/), to offload load from the `Node.js` process.
+Next.js provides [**gzip**](https://tools.ietf.org/html/rfc6713#section-3) compression to compress rendered content and static files. In general you will want to enable compression on a HTTP proxy like [nginx](https://www.nginx.com/), to offload load from the `Node.js` process.
 
 To disable **compression**, open `next.config.js` and disable the `compress` config:
 

docs/api-reference/next/link.md

@@ -61,6 +61,7 @@ export default Home
 - [`replace`](#replace-the-url-instead-of-push) - Replace the current `history` state instead of adding a new url into the stack. Defaults to `false`
 - [`scroll`](#disable-scrolling-to-the-top-of-the-page) - 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`
+- `locale` - The active locale is automatically prepended. `locale` allows for providing a different locale. When `false` `href` has to include the locale as the default behavior is disabled.
 
 ## If the route has dynamic segments
 

docs/basic-features/environment-variables.md

@@ -109,16 +109,18 @@ Next.js allows you to set defaults in `.env` (all environments), `.env.developme
 
 ## Environment Variables on Vercel
 
-When deploying on [Vercel](https://vercel.com) you can configure secrets in the [Environment Variables](https://vercel.com/docs/v2/build-step#environment-variables) section of the project in the Vercel dashboard.
+When deploying your Next.js application to [Vercel](https://vercel.com), Environment Variables can be configured [in the Project Settings](https://vercel.com/docs/environment-variables).
 
-You can still use `.env`, `.env.development` and `.env.production` to add defaults.
+All types of Environment Variables should be configured there. Even Environment Variables used in Development – which can be [downloaded onto your local device](https://vercel.com/docs/environment-variables#development-environment-variables) afterwards.
 
-If you've configured [Development Environment Variables](https://vercel.com/docs/v2/build-step#development-environment-variables) you can pull them into a `.env.local` for usage on your local machine using the following command:
+If you've configured [Development Environment Variables](https://vercel.com/docs/environment-variables#development-environment-variables) you can pull them into a `.env.local` for usage on your local machine using the following command:
 
 ```bash
 vercel env pull .env.local
 ```
 
+When using the Vercel CLI to deploy make sure you add a [`.vercelignore`](https://vercel.com/guides/prevent-uploading-sourcepaths-with-vercelignore?query=vercelignore#allowlist) that includes files that should not be uploaded, generally these are the same files included in `.gitignore`.
+
 ## Test Environment Variables
 
 Apart from `development` and `production` environments, there is a 3rd option available: `test`. In the same way you can set defaults for development or production environments, you can do the same with `.env.test` file for testing environment (though this one is not so common as the previous two).

docs/manifest.json

@@ -292,10 +292,6 @@
               "title": "CDN Support with Asset Prefix",
               "path": "/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md"
             },
-            {
-              "title": "Build Target",
-              "path": "/docs/api-reference/next.config.js/build-target.md"
-            },
             {
               "title": "Custom Webpack Config",
               "path": "/docs/api-reference/next.config.js/custom-webpack-config.md"

examples/with-why-did-you-render/README.md

@@ -1,7 +1,35 @@
 # Why did you render
 
-This is a simple example of getting [why-did-you-render](https://github.com/welldone-software/why-did-you-render) up and running.
-The header component will rerender despite the state staying the same. You can see details in developer console.
+This is a simple example of how to use [why-did-you-render](https://github.com/welldone-software/why-did-you-render).
+
+The header component will rerender despite the state staying the same.
+
+You can see `why-did-you-render` console logs about this redundant re-render in the developer console.
+
+## Installation guide
+
+1. add `why-did-you-render` to the project by running:
+
+   ```
+   yarn add @welldone-software/why-did-you-render
+   ```
+
+1. Create `scripts/wdyr.js` with the code:
+
+   ```jsx
+   import React from 'react'
+
+   if (process.env.NODE_ENV === 'development') {
+     if (typeof window !== 'undefined') {
+       const whyDidYouRender = require('@welldone-software/why-did-you-render')
+       whyDidYouRender(React, {
+         trackAllPureComponents: true,
+       })
+     }
+   }
+   ```
+
+1. import `scripts/wdyr.js` as the first import of `_app`.
 
 ## Deploy your own
 
@@ -20,5 +48,3 @@ yarn create next-app --example with-why-did-you-render with-why-did-you-render-a
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
-
-[![Deploy To Now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/vercel/next.js/tree/master/examples/with-why-did-you-render)

examples/with-why-did-you-render/package.json

@@ -1,15 +1,15 @@
 {
   "name": "with-why-did-you-render",
+  "license": "MIT",
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@welldone-software/why-did-you-render": "^4.0.4",
+    "@welldone-software/why-did-you-render": "^6.0.5",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
-  },
-  "license": "MIT"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
 }

examples/with-why-did-you-render/pages/_app.js

@@ -1,9 +1,4 @@
-import React from 'react'
-import whyDidYouRender from '@welldone-software/why-did-you-render'
-
-if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
-  whyDidYouRender(React)
-}
+import '../scripts/wdyr'
 
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />

examples/with-why-did-you-render/scripts/wdyr.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+if (process.env.NODE_ENV === 'development') {
+  if (typeof window !== 'undefined') {
+    const whyDidYouRender = require('@welldone-software/why-did-you-render')
+    whyDidYouRender(React, {
+      trackAllPureComponents: true,
+    })
+  }
+}

packages/next/client/image.tsx

@@ -109,7 +109,7 @@ type CallLoaderProps = {
   quality?: number
 }
 
-function callLoader(loaderProps: CallLoaderProps) {
+function callLoader(loaderProps: CallLoaderProps): string {
   const load = loaders.get(configLoader)
   if (load) {
     return load({ root: configPath, ...loaderProps })
@@ -446,7 +446,7 @@ export default function Image({
 
 type LoaderProps = CallLoaderProps & { root: string }
 
-function normalizeSrc(src: string) {
+function normalizeSrc(src: string): string {
   return src[0] === '/' ? src.slice(1) : src
 }
 

packages/next/next-server/lib/router/router.ts

@@ -535,8 +535,10 @@ export default class Router implements BaseRouter {
     this.query = query
     // if auto prerendered and dynamic route wait to update asPath
     // until after mount to prevent hydration mismatch
-    this.asPath =
-      isDynamicRoute(pathname) && self.__NEXT_DATA__.autoExport ? pathname : as
+    const autoExportDynamic =
+      isDynamicRoute(pathname) && self.__NEXT_DATA__.autoExport
+
+    this.asPath = autoExportDynamic ? pathname : as
     this.basePath = basePath
     this.sub = subscription
     this.clc = null
@@ -550,7 +552,7 @@ export default class Router implements BaseRouter {
     this.isReady = !!(
       self.__NEXT_DATA__.gssp ||
       self.__NEXT_DATA__.gip ||
-      !self.location.search
+      (!autoExportDynamic && !self.location.search)
     )
 
     if (process.env.__NEXT_I18N_SUPPORT) {

test/integration/build-output/test/index.test.js

@@ -101,7 +101,7 @@ describe('Build Output', () => {
       expect(parseFloat(err404Size) - 3.7).toBeLessThanOrEqual(0)
       expect(err404Size.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(err404FirstLoad)).toBeCloseTo(65.4, 1)
+      expect(parseFloat(err404FirstLoad)).toBeCloseTo(65.5, 1)
       expect(err404FirstLoad.endsWith('kB')).toBe(true)
 
       expect(parseFloat(sharedByAll)).toBeCloseTo(62, 1)

test/integration/router-is-ready/pages/auto-export/index.js

@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router'
+
+export default function Page(props) {
+  const router = useRouter()
+
+  if (typeof window !== 'undefined') {
+    if (!window.isReadyValues) {
+      window.isReadyValues = []
+    }
+    window.isReadyValues.push(router.isReady)
+  }
+
+  return (
+    <>
+      <p id="auto-export">auto-export page</p>
+    </>
+  )
+}

test/integration/router-is-ready/test/index.test.js

@@ -49,6 +49,16 @@ function runTests(isDev) {
     expect(await browser.eval('window.isReadyValues')).toEqual([false, true])
   })
 
+  it('isReady should be true after query update for dynamic auto-export page without query', async () => {
+    const browser = await webdriver(appPort, '/auto-export/first')
+    expect(await browser.eval('window.isReadyValues')).toEqual([false, true])
+  })
+
+  it('isReady should be true after query update for dynamic auto-export page with query', async () => {
+    const browser = await webdriver(appPort, '/auto-export/first?hello=true')
+    expect(await browser.eval('window.isReadyValues')).toEqual([false, true])
+  })
+
   it('isReady should be true after query update for getStaticProps page with query', async () => {
     const browser = await webdriver(appPort, '/gsp?hello=world')
     expect(await browser.eval('window.isReadyValues')).toEqual([false, true])