Merge branch 'canary' into kmclb-clarify-headers-config-option-docs

.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/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

@@ -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,7 +43,7 @@ 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.
 

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/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/next-forms/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next-forms/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/next-forms/README.md

@@ -0,0 +1,27 @@
+# Building Web Forms with Next.js Example
+
+This example shows how you can build forms with Next.js.
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/next-forms)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/next-forms&project-name=next-forms&repository-name=next-forms)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example next-forms next-forms-app
+# or
+yarn create next-app --example next-forms next-forms-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/next-forms/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

examples/next-forms/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "eslint": "8.4.1",
+    "eslint-config-next": "latest"
+  }
+}

examples/next-forms/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/next-forms/pages/api/form.js

@@ -0,0 +1,12 @@
+export default function handler(req, res) {
+  const body = req.body
+  console.log('body: ', body)
+
+  // Both of these are required.
+  if (!body.first || !body.last) {
+    return res.json({ data: 'First or last name not found' })
+  }
+
+  // Found the name.
+  res.json({ data: `${body.first} ${body.last}` })
+}