Merge branch 'canary' into charset-first

.eslintignore

@@ -8,6 +8,7 @@ examples/with-typescript-eslint-jest/**
 examples/with-kea/**
 examples/with-custom-babel-config/**
 examples/with-flow/**
+examples/with-jest/**
 examples/with-mobx-state-tree/**
 examples/with-mobx/**
 packages/next/bundles/webpack/packages/*.runtime.js

.github/labeler.json

@@ -7,7 +7,10 @@
       "packages/next/**",
       "packages/react-dev-overlay/**",
       "packages/react-refresh-utils/**",
-      "packages/next-codemod/**"
+      "packages/next-codemod/**",
+      "packages/eslint-plugin-next/**",
+      "packages/eslint-config-next/**",
+      "packages/next-env/**"
     ],
     "created-by: Chrome Aurora": [
       { "type": "user", "pattern": "spanicker" },

.github/workflows/build_native.yml

@@ -11,12 +11,16 @@ jobs:
         include:
           - os: ubuntu-18.04
             target: x86_64-unknown-linux-gnu
+            name: linux-x64-gnu
           - os: windows-latest
             target: x86_64-pc-windows-msvc
+            name: win32-x64-msvc
           - os: macos-latest
             target: x86_64-apple-darwin
+            name: darwin-x64
           - os: macos-latest
             target: aarch64-apple-darwin
+            name: darwin-arm64
             description: m1
 
     name: next-swc - ${{ matrix.os }} - ${{ matrix.target }} - node@14
@@ -66,10 +70,10 @@ jobs:
           MACOSX_DEPLOYMENT_TARGET: '10.13'
         working-directory: packages/next
       - name: Upload artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v2.2.4
         with:
           name: next-swc-binaries
-          path: packages/next/native/next-swc.*.node
+          path: packages/next/native/next-swc.${{ matrix.name }}.node
       - name: Clear the cargo caches
         run: |
           cargo install cargo-cache --no-default-features --features ci-autoclean
@@ -80,7 +84,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/download-artifact@v2
+      - uses: actions/download-artifact@v2.0.10
         with:
           name: next-swc-binaries
           path: packages/next/native

.github/workflows/build_test_deploy.yml

@@ -86,8 +86,6 @@ jobs:
             ./packages/next/native/next-swc.linux-x64-gnu.node
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
       - run: ./scripts/check-pre-compiled.sh
-        env:
-          NODE_OPTIONS: '--max_old_space_size=4096'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testUnit:
@@ -106,7 +104,7 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
 
-      - run: node run-tests.js --timings --type unit -g 1/1
+      - run: node run-tests.js --type unit
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testIntegration:
@@ -293,7 +291,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: [build, build-native]
     env:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }}
     steps:
       # https://github.com/actions/virtual-environments/issues/1187
       - name: tune linux network
@@ -410,7 +408,7 @@ jobs:
           MACOSX_DEPLOYMENT_TARGET: '10.13'
         working-directory: packages/next
       - name: Upload artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v2.2.4
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         with:
           name: next-swc-binaries

azure-pipelines.yml

@@ -111,7 +111,7 @@ stages:
               path: $(System.DefaultWorkingDirectory)
             displayName: Cache Build
           - script: |
-              node run-tests.js -g 1/1 --timings --azure --type unit
+              node run-tests.js --type unit
             displayName: 'Run tests'
       # TODO: investigate re-enabling when stability matches running in
       # tests in ubuntu environment

docs/advanced-features/i18n-routing.md

@@ -234,6 +234,30 @@ Next.js doesn't know about variants of a page so it's up to you to add the `href
 
 > Note that Internationalized Routing does not integrate with [`next export`](/docs/advanced-features/static-html-export.md) as `next export` does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use `next export` are fully supported.
 
+### Dynamic Routes and `getStaticProps` Pages
+
+For pages using `getStaticProps` with [Dynamic Routes](/docs/routing/dynamic-routes.md), all locale variants of the page desired to be prerendered need to be returned from [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation). Along with the `params` object returned for `paths`, you can also return a `locale` field specifying which locale you want to render. For example:
+
+```js
+// pages/blog/[slug].js
+export const getStaticPaths = ({ locales }) => {
+  return {
+    paths: [
+      // if no `locale` is provided only the defaultLocale will be generated
+      { params: { slug: 'post-1' }, locale: 'en-US' },
+      { params: { slug: 'post-1' }, locale: 'fr' },
+    ],
+    fallback: true,
+  }
+}
+```
+
+For [Automatically Statically Optimized](/docs/advanced-features/automatic-static-optimization.md) and non-dynamic `getStaticProps` pages, **a version of the page will be generated for each locale**. This is important to consider because it can increase build times depending on how many locales are configured inside `getStaticProps`.
+
+For example, if you have 50 locales configured with 10 non-dynamic pages using `getStaticProps`, this means `getStaticProps` will be called 500 times. 50 versions of the 10 pages will be generated during each build.
+
+To decrease the build time of dynamic pages with `getStaticProps`, use a [`fallback` mode](https://nextjs.org/docs/basic-features/data-fetching#fallback-true). This allows you to return only the most popular paths and locales from `getStaticPaths` for prerendering during the build. Then, Next.js will build the remaining pages at runtime as they are requested.
+
 ### Automatically Statically Optimized Pages
 
 For pages that are [automatically statically optimized](/docs/advanced-features/automatic-static-optimization.md), a version of the page will be generated for each locale.
@@ -265,24 +289,9 @@ export async function getStaticProps({ locale }) {
 }
 ```
 
-### Dynamic getStaticProps Pages
-
-For dynamic `getStaticProps` pages, any locale variants of the page that is desired to be prerendered needs to be returned from [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation). Along with the `params` object that can be returned for the `paths`, you can also return a `locale` field specifying which locale you want to render. For example:
-
-```js
-// pages/blog/[slug].js
-export const getStaticPaths = ({ locales }) => {
-  return {
-    paths: [
-      { params: { slug: 'post-1' }, locale: 'en-US' },
-      { params: { slug: 'post-1' }, locale: 'fr' },
-    ],
-    fallback: true,
-  }
-}
-```
-
 ## Limits for the i18n config
 
 - `locales`: 100 total locales
 - `domains`: 100 total locale domain items
+
+> **Note:** These limits have been added initially to prevent potential [performance issues at build time](#dynamic-routes-and-getStaticProps-pages). We are continuing to evaluate if these limits are sufficient.

docs/api-reference/next.config.js/custom-page-extensions.md

@@ -14,8 +14,37 @@ module.exports = {
 }
 ```
 
+> **Note**: The default value of `pageExtensions` is [`['tsx', 'ts', 'jsx', 'js']`](https://github.com/vercel/next.js/blob/f1dbc9260d48c7995f6c52f8fbcc65f08e627992/packages/next/server/config-shared.ts#L161).
+
 > **Note**: configuring `pageExtensions` also affects `_document.js`, `_app.js` as well as files under `pages/api/`. For example, setting `pageExtensions: ['page.tsx', 'page.ts']` means the following files: `_document.tsx`, `_app.tsx`, `pages/users.tsx` and `pages/api/users.ts` will have to be renamed to `_document.page.tsx`, `_app.page.tsx`, `pages/users.page.tsx` and `pages/api/users.page.ts` respectively.
 
+## Including non-page files in the `pages` directory
+
+To colocate test files, generated files, or other files used by components in the `pages` directory, you can prefix the extensions with something like `page`.
+
+Open `next.config.js` and add the `pageExtensions` config:
+
+```js
+module.exports = {
+  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
+}
+```
+
+Then rename your pages to have a file extension that includes `.page` (ex. rename `MyPage.tsx` to `MyPage.page.tsx`).
+
+> **Note**: Make sure you also rename `_document.js`, `_app.js` as well as files under `pages/api/`.
+
+Without this config, Next.js assumes every tsx/ts/jsx/js file in the `pages` directory is a page or API route, and may expose unintended routes vulnerable to denial of service attacks, or throw an error like the following when building the production bundle:
+
+```
+Build error occurred
+Error: Build optimization failed: found pages without a React Component as default export in
+pages/MyPage.generated
+pages/MyPage.test
+
+See https://nextjs.org/docs/messages/page-without-valid-component for more info.
+```
+
 ## Related
 
 <div class="card">

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

@@ -4,7 +4,7 @@ description: Customize the pages that will be exported as HTML files when using
 
 # exportPathMap
 
-> This feature is exclusive of `next export`. Please refer to [Static HTML export](/docs/advanced-features/static-html-export.md) if you want to learn more about it.
+> This feature is exclusive to `next export`. Please refer to [Static HTML export](/docs/advanced-features/static-html-export.md) if you want to learn more about it.
 
 <details>
   <summary><b>Examples</b></summary>
@@ -40,7 +40,7 @@ module.exports = {
 }
 ```
 
-Note: the `query` field in `exportPathMap` can not be used with [automatically statically optimized pages](/docs/advanced-features/automatic-static-optimization) or [`getStaticProps` pages](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) as they are rendered to HTML files at build-time and additional query information can not be provided during `next export`.
+Note: the `query` field in `exportPathMap` cannot be used with [automatically statically optimized pages](/docs/advanced-features/automatic-static-optimization) or [`getStaticProps` pages](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) as they are rendered to HTML files at build-time and additional query information cannot be provided during `next export`.
 
 The pages will then be exported as HTML files, for example, `/about` will become `/about.html`.
 

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

@@ -201,13 +201,14 @@ module.exports = {
       // if the host is `example.com`,
       // this redirect will be applied
       {
-        source: '/:path((?!another-page$).*)',,
+        source: '/:path((?!another-page$).*)',
         has: [
           {
             type: 'host',
             value: 'example.com',
           },
         ],
+        permanent: false,
         destination: '/another-page',
       },
     ]

docs/api-reference/next/head.md

@@ -55,7 +55,7 @@ function IndexPage() {
 export default IndexPage
 ```
 
-In this case only the second `<meta property="og:title" />` is rendered. `meta` tags with duplicate `name` attributes are automatically handled.
+In this case only the second `<meta property="og:title" />` is rendered. `meta` tags with duplicate `key` attributes are automatically handled.
 
 > The contents of `head` get cleared upon unmounting the component, so make sure each page completely defines what it needs in `head`, without making assumptions about what other pages added.
 

docs/api-reference/next/image.md

@@ -90,29 +90,26 @@ The `<Image />` component optionally accepts the following properties.
 
 ### layout
 
-The layout behavior of the image as the viewport changes size. Defaults to
-`intrinsic`.
+The layout behavior of the image as the viewport changes size.
 
-When `fixed`, the image dimensions will not change as the viewport changes (no
-responsiveness) similar to the native `img` element.
-
-When `intrinsic`, the image will scale the dimensions down for smaller viewports
-but maintain the original dimensions for larger viewports.
-
-When `responsive`, the image will scale the dimensions down for smaller
-viewports and scale up for larger viewports.
-Note: the responsive layout may not work correctly if the parent element uses a display value other than `block` such as `display: flex` or `display: grid`.
-
-When `fill`, the image will stretch both width and height to the dimensions of
-the parent element, provided the parent element is relative. This is usually paired with the [`objectFit`](#objectFit) property.
-Ensure the parent element has `position: relative` in their stylesheet.
-
-Try it out:
+| `layout`              | Behavior                                                 | `srcSet`                                                                                                                                                                                        | `sizes` |
+| --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `intrinsic` (default) | Scale *down* to fit width of container, up to image size | `1x`, `2x` (based on [imageSizes](/docs/basic-features/image-optimization.md#image-sizes))                                                                                                      | N/A     |
+| `fixed`               | Sized to `width` and `height` exactly                    | `1x`, `2x` (based on [imageSizes](/docs/basic-features/image-optimization.md#image-sizes))                                                                                                      | N/A     |
+| `responsive`          | Scale to fit width of container                          | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](/docs/basic-features/image-optimization.md#image-sizes) and [deviceSizes](/docs/basic-features/image-optimization.md#device-sizes)) | `100vw` |
+| `fill`                | Grow in X and Y axes to fill container                   | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](/docs/basic-features/image-optimization.md#image-sizes) and [deviceSizes](/docs/basic-features/image-optimization.md#device-sizes)) | `100vw` |
 
+- [Demo the `intrinsic` layout (default)](https://image-component.nextjs.gallery/layout-intrinsic)
+  - When `intrinsic`, the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports.
 - [Demo the `fixed` layout](https://image-component.nextjs.gallery/layout-fixed)
-- [Demo the `intrinsic` layout](https://image-component.nextjs.gallery/layout-intrinsic)
+  - When `fixed`, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native `img` element.
 - [Demo the `responsive` layout](https://image-component.nextjs.gallery/layout-responsive)
+  - When `responsive`, the image will scale the dimensions down for smaller viewports and scale up for larger viewports.
+  - Ensure the parent element uses `display: block` in their stylesheet.
 - [Demo the `fill` layout](https://image-component.nextjs.gallery/layout-fill)
+  - When `fill`, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.
+  - This is usually paired with the [`objectFit`](#objectFit) property.
+  - Ensure the parent element has `position: relative` in their stylesheet.
 - [Demo background image](https://image-component.nextjs.gallery/background)
 
 ### loader
@@ -265,7 +262,7 @@ Other properties on the `<Image />` component will be passed to the underlying
 
 ## Styling
 
-`next/image` wraps the `img` element with other `div` elements to maintain the aspect ratio of the image and prevent [Cumulative Layout Shift](https://vercel.com/blog/core-web-vitals#cumulative-layout-shift).
+`next/image` wraps the `img` element with a single `div` element to maintain the aspect ratio of the image and prevent [Cumulative Layout Shift](https://vercel.com/blog/core-web-vitals#cumulative-layout-shift).
 
 To add styles to the underlying `img` element, pass the `className` prop to the `<Image />` component. Then, use Next.js' [built-in CSS support](/docs/basic-features/built-in-css-support.md) to add rules to that class.
 

docs/api-reference/next/link.md

@@ -91,7 +91,7 @@ export default Posts
 
 ## If the child is a custom component that wraps an `<a>` tag
 
-If the child of `Link` is a custom component that wraps an `<a>` tag, you must add `passHref` to `Link`. This is necessary if you’re using libraries like [styled-components](https://styled-components.com/). Without this, the `<a>` tag will not have the `href` attribute, which might hurt your site’s SEO.
+If the child of `Link` is a custom component that wraps an `<a>` tag, you must add `passHref` to `Link`. This is necessary if you’re using libraries like [styled-components](https://styled-components.com/). Without this, the `<a>` tag will not have the `href` attribute, which hurts your site's accessibility and might affect SEO. If you're using [ESLint](/docs/basic-features/eslint.md#eslint-plugin), there is a built-in rule `next/link-passhref` to ensure correct usage of `passHref`.
 
 ```jsx
 import Link from 'next/link'

docs/api-routes/api-middlewares.md

@@ -145,7 +145,7 @@ export const setCookie = (
     options.maxAge /= 1000
   }
 
-  res.setHeader('Set-Cookie', serialize(name, String(stringValue), options))
+  res.setHeader('Set-Cookie', serialize(name, stringValue, options))
 }
 
 // pages/api/cookies.ts

docs/api-routes/introduction.md

@@ -55,7 +55,7 @@ For new projects, you can build your entire API with API Routes. If you have an
 
 ## Caveats
 
-- API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with the [cors middleware](/docs/api-routes/api-middlewares.md#connectexpress-middleware-support).
+- API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with the [CORS middleware](/docs/api-routes/api-middlewares.md#connectexpress-middleware-support).
 - API Routes can't be used with [`next export`](/docs/advanced-features/static-html-export.md)
 
 ## Related

docs/basic-features/data-fetching.md

@@ -672,7 +672,7 @@ The `context` parameter is an object containing the following keys:
 
 `getServerSideProps` should return an object with:
 
-- `props` - An **optional** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
+- `props` - An **optional** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization) or a Promise that resolves to a serializable object.
 - `notFound` - An **optional** boolean value to allow the page to return a 404 status and page. Below is an example of how it works:
 
   ```js

docs/basic-features/environment-variables.md

@@ -78,7 +78,7 @@ export async function getStaticProps() {
 
 ## Exposing Environment Variables to the Browser
 
-By default all environment variables loaded through `.env.local` are only available in the Node.js environment, meaning they won't be exposed to the browser.
+By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.
 
 In order to expose a variable to the browser you have to prefix the variable with `NEXT_PUBLIC_`. For example: