Merge branch 'canary' into fix-data-fetching-meta-data

.github/workflows/build_test_deploy.yml

@@ -347,35 +347,6 @@ jobs:
       - run: xvfb-run node run-tests.js test/integration/with-electron/test/index.test.js
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
-  testYarnPnP:
-    runs-on: ubuntu-latest
-    needs: [build, build-native-dev]
-    env:
-      NODE_OPTIONS: '--unhandled-rejections=strict'
-      YARN_COMPRESSION_LEVEL: '0'
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v2
-        if: ${{ steps.docs-change.outputs.docsChange != 'docs only change' }}
-        with:
-          node-version: 14
-
-      - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
-
-      - uses: actions/download-artifact@v2
-        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
-        with:
-          name: next-swc-dev-binary
-          path: packages/next-swc/native
-
-      - run: bash ./scripts/test-pnp.sh
-        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
-
   testsPass:
     name: thank you, next
     runs-on: ubuntu-latest
@@ -387,7 +358,6 @@ jobs:
         checkPrecompiled,
         testIntegration,
         testUnit,
-        testYarnPnP,
         testDev,
         testProd,
       ]

SECURITY.md

@@ -1 +1,9 @@
-Visit https://vercel.com/security to view the disclosure policy.
+# Reporting Security Issues
+
+If you believe you have found a security vulnerability in Next.js, we encourage you to let us know right away.
+
+We will investigate all legitimate reports and do our best to quickly fix the problem.
+
+Email `security@vercel.com` to disclose any security vulnerabilities.
+
+https://vercel.com/security

contributing.md

@@ -6,10 +6,9 @@ examples](#adding-examples)** below.
 
 ## Developing
 
-The development branch is `canary`, and this is the branch that all pull
-requests should be made against. After publishing a stable release, the changes
-in the `canary` branch are rebased into `master`. The changes on the `canary`
-branch are published to the `@canary` dist-tag daily.
+The development branch is `canary`. This is the branch that all pull
+requests should be made against. The changes on the `canary`
+branch are published to the `@canary` tag on npm regularly.
 
 To develop locally:
 

docs/advanced-features/compiler.md

@@ -94,6 +94,34 @@ const customJestConfig = {
 module.exports = createJestConfig(customJestConfig)
 ```
 
+### Remove React Properties
+
+Allows to remove JSX properties. This is often used for testing. Similar to `babel-plugin-react-remove-properties`.
+
+To remove properties matching the default regex `^data-test`:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    reactRemoveProperties: true,
+  },
+}
+```
+
+To remove custom properties:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    // The regexes defined here are processed in Rust so the syntax is different from
+    // JavaScript `RegExp`s. See https://docs.rs/regex.
+    reactRemoveProperties: { properties: ['^data-custom$'] },
+  },
+}
+```
+
 ### Legacy Decorators
 
 Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with older versions of libraries like `mobx`.
@@ -110,6 +138,34 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
 }
 ```
 
+### Remove Console
+
+This transform allows for removing all `console.*` calls in application code (not `node_modules`). Similar to `babel-plugin-transform-remove-console`.
+
+Remove all `console.*` calls:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    removeConsole: true,
+  },
+}
+```
+
+Remove `console.*` output except `console.error`:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    removeConsole: {
+      exclude: ['error'],
+    },
+  },
+}
+```
+
 ### importSource
 
 Next.js will automatically detect `jsxImportSource` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with libraries like Theme UI.

docs/advanced-features/security-headers.md

@@ -18,7 +18,7 @@ module.exports = {
     return [
       {
         // Apply these headers to all routes in your application.
-        source: '/(.*)',
+        source: '/:path*',
         headers: securityHeaders,
       },
     ]

docs/api-reference/data-fetching/get-static-paths.md

@@ -199,7 +199,7 @@ export async function getStaticProps({ params }) {
 export default Post
 ```
 
-## getStaticProps with TypeScript
+## getStaticPaths with TypeScript
 
 For TypeScript, you can use the `GetStaticPaths` type from `next`:
 

docs/api-reference/next.config.js/configuring-the-build-id.md

@@ -4,7 +4,7 @@ description: Configure the build id, which is used to identify the current build
 
 # Configuring the Build ID
 
-Next.js uses a constant id generated at build time to identify which version of your application is being served. This can cause problems in multi-server deployments when `next build` is ran on every server. In order to keep a static build id between builds you can provide your own build id.
+Next.js uses a constant id generated at build time to identify which version of your application is being served. This can cause problems in multi-server deployments when `next build` is run on every server. In order to keep a consistent build id between builds you can provide your own build id.
 
 Open `next.config.js` and add the `generateBuildId` function:
 

docs/api-reference/next/script.md

@@ -46,6 +46,8 @@ The loading strategy of the script.
 
 A method that returns additional JavaScript that should be executed after the script has finished loading.
 
+> **Note: `onLoad` can't be used with the `beforeInteractive` loading strategy.**
+
 The following is an example of how to use the `onLoad` property:
 
 ```jsx

docs/authentication.md

@@ -62,7 +62,7 @@ export async function getServerSideProps(context) {
 }
 ```
 
-Let's transform the profile example to use [server-side rendering](/docs/basic-features/pages#server-side-rendering). If there's a session, return `user` as a prop to the `Profile` component in the page. Notice there is not a loading skeleton in [this example](https://next-with-iron-session.vercel.app/).
+Let's transform the profile example to use [server-side rendering](/docs/basic-features/pages#server-side-rendering). If there's a session, return `user` as a prop to the `Profile` component in the page. Notice there is not a loading skeleton in [this example](https://iron-session-example.vercel.app/).
 
 ```jsx
 // pages/profile.js
@@ -71,7 +71,9 @@ import withSession from '../lib/session'
 import Layout from '../components/Layout'
 
 export const getServerSideProps = withSession(async function ({ req, res }) {
-  if (!req.session.user) {
+  const { user } = req.session
+
+  if (!user) {
     return {
       redirect: {
         destination: '/login',

docs/basic-features/data-fetching/client-side.md

@@ -43,11 +43,11 @@ function Profile() {
 
 ## Client-side data fetching with SWR
 
-The team behind Next.js has created a React hook library for data fetching called [**SWR**](https://swr.vercel.app/). It is **highly recommend** if you are fetching data on the client-side. It handles caching, revalidation, focus tracking, refetching on intervals, and more.
+The team behind Next.js has created a React hook library for data fetching called [**SWR**](https://swr.vercel.app/). It is **highly recommended** if you are fetching data on the client-side. It handles caching, revalidation, focus tracking, refetching on intervals, and more.
 
 Using the same example as above, we can now use SWR to fetch the profile data. SWR will automatically cache the data for us and will revalidate the data if it becomes stale.
 
-For more information on using SWR, check out the [SWR docs](https://swr.vercel.app/docs).
+For more information on using SWR, check out the [SWR docs](https://swr.vercel.app/docs/getting-started).
 
 ```jsx
 import useSWR from 'swr'

docs/basic-features/data-fetching/get-server-side-props.md

@@ -45,7 +45,7 @@ Take the following example. An API route is used to fetch some data from a CMS.
 
 ## Fetching data on the client side
 
-If your page contains frequently updating data, and you don’t need to pre-render the data, you can fetch the data on the [client side](/docs/basic-features/client-side.md). An example of this is user-specific data:
+If your page contains frequently updating data, and you don’t need to pre-render the data, you can fetch the data on the [client side](/docs/basic-features/data-fetching/client-side.md). An example of this is user-specific data:
 
 - First, immediately show the page without data. Parts of the page can be pre-rendered using Static Generation. You can show loading states for missing data.
 - Then, fetch the data on the client side and display it when ready.

docs/basic-features/data-fetching/get-static-props.md

@@ -23,7 +23,9 @@ You should use `getStaticProps` if:
 - The data can be publicly cached (not user-specific)
 - The page must be pre-rendered (for SEO) and be very fast — `getStaticProps` generates `HTML` and `JSON` files, both of which can be cached by a CDN for performance
 
-Because `getStaticProps` runs at build time, it does **not** receive data that’s only available during request time, such as query parameters or `HTTP` headers, as it generates static `HTML`. When combined with [Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md) however, it will run in the background while the stale page is being revalidated, and the fresh page served to the browser.
+When combined with [Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md), `getStaticProps` will run in the background while the stale page is being revalidated, and the fresh page served to the browser.
+
+Because `getStaticProps` runs at build time, it does **not** have access to the incoming request (such as query parameters or `HTTP` headers) as it generates static `HTML`. If you need access to the request for your page, consider using [Middleware](/docs/middleware.md) in addition to `getStaticProps`.
 
 ## Using getStaticProps to fetch data from a CMS
 
@@ -76,7 +78,7 @@ Alternatively, if you are **not** using API routes to fetch data, then the [`fet
 
 To verify what Next.js eliminates from the client-side bundle, you can use the [next-code-elimination tool](https://next-code-elimination.vercel.app/).
 
-## Statically Generates both HTML and JSON
+## Statically generates both HTML and JSON
 
 When a page with `getStaticProps` is pre-rendered at build time, in addition to the page HTML file, Next.js generates a JSON file holding the result of running `getStaticProps`.
 

docs/basic-features/font-optimization.md

@@ -11,12 +11,12 @@ By default, Next.js will automatically inline font CSS at build time, eliminatin
 ```js
 // Before
 <link
-  href="https://fonts.googleapis.com/css2?family=Inter"
+  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
   rel="stylesheet"
 />
 
 // After
-<style data-href="https://fonts.googleapis.com/css2?family=Inter">
+<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
   @font-face{font-family:'Inter';font-style:normal...
 </style>
 ```

docs/basic-features/pages.md

@@ -63,6 +63,7 @@ You can also use **Client-side Rendering** along with Static Generation or Serve
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok">Storyblok Example</a> (<a href="https://next-blog-storyblok.vercel.app/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms">GraphCMS Example</a> (<a href="https://next-blog-graphcms.vercel.app/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-kontent">Kontent Example</a> (<a href="https://next-blog-kontent.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-builder-io">Builder.io Example</a> (<a href="https://cms-builder-io.vercel.app/">Demo</a>)</li>
     <li><a href="https://static-tweet.vercel.app/">Static Tweet (Demo)</a></li>
   </ul>
 </details>

errors/export-image-api.md

@@ -2,23 +2,23 @@
 
 #### Why This Error Occurred
 
-You are attempting to run `next export` while importing the `next/image` component configured using the default `loader`.
+You are attempting to run `next export` while importing the `next/image` component using the default `loader` configuration.
 
 However, the default `loader` relies on the Image Optimization API which is not available for exported applications.
 
 This is because Next.js optimizes images on-demand, as users request them (not at build time).
 
 #### Possible Ways to Fix It
 
-- Use `next start` to run a server, which includes the Image Optimization API.
-- Use any provider which supports Image Optimization (like [Vercel](https://vercel.com/docs/next.js/image-optimization)).
-- Configure a third-party [loader](https://nextjs.org/docs/basic-features/image-optimization#loader) in `next.config.js`.
-- Use the [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop for `next/image`.
+- Use [`next start`](https://nextjs.org/docs/api-reference/cli#production) to run a server, which includes the Image Optimization API.
+- Use any provider which supports Image Optimization (such as [Vercel](https://vercel.com)).
+- [Configure the loader](https://nextjs.org/docs/api-reference/next/image#loader-configuration) in `next.config.js`.
+- Use the [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop for each instance of `next/image`.
 
 ### Useful Links
 
-- [Deployment Documentation](https://nextjs.org/docs/deployment#vercel-recommended)
+- [Deployment Documentation](https://nextjs.org/docs/deployment#managed-nextjs-with-vercel)
 - [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization)
 - [`next export` Documentation](https://nextjs.org/docs/advanced-features/static-html-export)
 - [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image)
-- [Vercel Documentation](https://vercel.com/docs/next.js/image-optimization)
+- [Vercel Documentation](https://vercel.com/docs/concepts/next.js/image-optimization)

errors/manifest.json

@@ -527,6 +527,10 @@
         {
           "title": "invalid-styled-jsx-children",
           "path": "/errors/invalid-styled-jsx-children.md"
+        },
+        {
+          "title": "middleware-relative-urls",
+          "path": "/errors/middleware-relative-urls.md"
         }
       ]
     }

errors/middleware-relative-urls.md

@@ -0,0 +1,38 @@
+# Middleware Relative URLs
+
+#### Why This Error Occurred
+
+You are using a Middleware function that uses `Response.redirect(url)`, `NextResponse.redirect(url)` or `NextResponse.rewrite(url)` where `url` is a relative or an invalid URL. Currently this will work, but building a request with `new Request(url)` or running `fetch(url)` when `url` is a relative URL will **not** work. For this reason and to bring consistency to Next.js Middleware, this behavior will be deprecated soon in favor of always using absolute URLs.
+
+#### Possible Ways to Fix It
+
+To fix this warning you must always pass absolute URL for redirecting and rewriting. There are several ways to get the absolute URL but the recommended way is to clone `NextURL` and mutate it:
+
+```typescript
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const url = request.nextUrl.clone()
+  url.pathname = '/dest'
+  return NextResponse.rewrite(url)
+}
+```
+
+Another way to fix this error could be to use the original URL as the base but this will not consider configuration like `basePath` or `locale`:
+
+```typescript
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  return NextResponse.rewrite(new URL('/dest', request.url))
+}
+```
+
+You can also pass directly a string containing a valid absolute URL.
+
+### Useful Links
+
+- [URL Documentation](https://developer.mozilla.org/en-US/docs/Web/API/URL)
+- [Response Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Response)

errors/prerender-error.md

@@ -10,5 +10,5 @@ While prerendering a page an error occurred. This can occur for many reasons fro
 - Check for any code that assumes a prop is available, even when it might not be
 - Set default values for all dynamic pages' props (avoid `undefined`, use `null` instead so it can be serialized)
 - Check for any out of date modules that you might be relying on
-- Make sure your component handles `fallback` if it is enabled in `getStaticPaths`. [Fallback docs](https://nextjs.org/docs/basic-features/data-fetching#the-fallback-key-required)
+- Make sure your component handles `fallback` if it is enabled in `getStaticPaths`. [Fallback docs](https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false)
 - Make sure you are not trying to export (`next export`) pages that have server-side rendering enabled [(getServerSideProps)](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)

examples/blog-starter/README.md

@@ -38,6 +38,7 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 - [GraphCMS](/examples/cms-graphcms)
 - [Kontent](/examples/cms-kontent)
 - [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
+- [Builder.io](/examples/cms-builder-io)
 
 ## How to use
 

examples/blog-starter/package.json

@@ -13,7 +13,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remark": "13.0.0",
-    "remark-html": "13.0.1"
+    "remark-html": "13.0.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.0",

examples/cms-agilitycms/README.md

@@ -32,6 +32,7 @@ Once you have access to [the environment variables you'll need](#step-15-set-up-
 - [Ghost](/examples/cms-ghost)
 - [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
 - [Blog Starter](/examples/blog-starter)
+- [Builder.io](/examples/cms-builder-io)
 
 ## How to use
 

examples/cms-builder-io/.env.local.example

@@ -0,0 +1,2 @@
+# Copy this file as .env.local
+NEXT_PUBLIC_BUILDER_API_KEY=