Merge branch 'canary' into use-svg-blur

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -41,6 +41,12 @@ body:
       description: A clear and concise description of what you expected to happen.
     validations:
       required: true
+  - type: input
+    attributes:
+      label: Link to reproduction
+      description: A link to a https://stackblitz.com/ or git repo with a minimal reproduction. Minimal reproductions should be created from a create-next-app starter and include only relevant changes to cause the issue if possible.
+    validations:
+      required: true
   - type: textarea
     attributes:
       label: To Reproduce

.github/actions/next-stats-action/Dockerfile

@@ -7,7 +7,7 @@ LABEL repository="https://github.com/vercel/next-stats-action"
 COPY . /next-stats
 
 # Install node_modules
-RUN npm i -g pnpm@7.1.6
+RUN npm i -g pnpm@7.2.1
 RUN cd /next-stats && pnpm install --production
 
 RUN git config --global user.email 'stats@localhost'

.github/workflows/build_test_deploy.yml

@@ -10,7 +10,7 @@ env:
   NAPI_CLI_VERSION: 2.7.0
   TURBO_VERSION: 1.2.14
   RUST_TOOLCHAIN: nightly-2022-02-23
-  PNPM_VERSION: 7.1.6
+  PNPM_VERSION: 7.2.1
 
 jobs:
   check-examples:
@@ -98,7 +98,6 @@ jobs:
     steps:
       - name: Setup node
         uses: actions/setup-node@v3
-        if: ${{ steps.docs-change.outputs.docsChange != 'docs only change' }}
         with:
           node-version: 16
           check-latest: true
@@ -227,6 +226,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: node run-tests.js --type unit
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -268,6 +270,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -320,6 +325,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -344,6 +352,7 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
+      TEST_TIMINGS_TOKEN: ${{ secrets.TEST_TIMINGS_TOKEN }}
     strategy:
       fail-fast: false
       matrix:
@@ -376,6 +385,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -401,6 +413,7 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       NEXT_TEST_REACT_VERSION: ^17
+      TEST_TIMINGS_TOKEN: ${{ secrets.TEST_TIMINGS_TOKEN }}
     strategy:
       fail-fast: false
       matrix:
@@ -432,6 +445,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -487,6 +503,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -529,6 +548,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -543,6 +565,7 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
+      TEST_TIMINGS_TOKEN: ${{ secrets.TEST_TIMINGS_TOKEN }}
     strategy:
       fail-fast: false
       matrix:
@@ -575,6 +598,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -590,6 +616,7 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       NEXT_TEST_REACT_VERSION: ^17
+      TEST_TIMINGS_TOKEN: ${{ secrets.TEST_TIMINGS_TOKEN }}
     strategy:
       fail-fast: false
       matrix:
@@ -621,6 +648,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -667,6 +697,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -712,7 +745,10 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
-      - run: cd test/integration/with-electron/app && yarn
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
+      - run: cd test/integration/with-electron/app && yarn install
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: xvfb-run node run-tests.js test/integration/with-electron/test/index.test.js
@@ -767,6 +803,7 @@ jobs:
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
       # test rsc hydration on firefox due to limited support of TransformStream api
       - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
       - run: xvfb-run pnpm testheadless test/integration/react-streaming-and-server-components/test/index.test.js -t "should handle streaming server components correctly"
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -807,6 +844,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       # TODO: use macos runner so that we can use playwright to test against
       # PRs instead of only running on canary?
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || npm i -g browserstack-local@1.4.0'
@@ -852,6 +892,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || npm i -g browserstack-local@1.4.0'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -883,6 +926,8 @@ jobs:
         with:
           name: next-swc-test-binary
           path: packages/next-swc/native
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
       - run: npx playwright install-deps && npx playwright install firefox
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
       - run: node run-tests.js test/integration/production/test/index.test.js
@@ -961,6 +1006,9 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        name: Install pnpm
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
         name: Install playwright dependencies
 
@@ -1162,6 +1210,9 @@ jobs:
       - run: node ./scripts/setup-wasm.mjs
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
+      - run: npm i -g pnpm@${PNPM_VERSION}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - run: TEST_WASM=true xvfb-run node run-tests.js test/integration/production/test/index.test.js
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -1525,7 +1576,8 @@ jobs:
       - name: Turbo Cache
         id: turbo-cache
         uses: actions/cache@v3
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
         with:
           path: .turbo
           key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ steps.get-week.outputs.WEEK }}-${{ github.sha }}

.github/workflows/pull_request_stats.yml

@@ -8,7 +8,7 @@ env:
   NAPI_CLI_VERSION: 2.7.0
   TURBO_VERSION: 1.2.14
   RUST_TOOLCHAIN: nightly-2022-02-23
-  PNPM_VERSION: 7.1.6
+  PNPM_VERSION: 7.2.1
 
 jobs:
   build-native-dev:

.github/workflows/test_react_experimental.yml

@@ -44,6 +44,8 @@ jobs:
           path: ./*
           key: ${{ github.sha }}-react-experimental
 
+      - run: npm i -g pnpm@latest
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
 
       - run: node run-tests.js --timings -g ${{ matrix.group }}/6

.github/workflows/test_react_next.yml

@@ -44,6 +44,8 @@ jobs:
           path: ./*
           key: ${{ github.sha }}-react-next
 
+      - run: npm i -g pnpm@latest
+
       - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
 
       - run: node run-tests.js --timings -g ${{ matrix.group }}/6

azure-pipelines.yml

@@ -33,7 +33,7 @@ pr:
 
 variables:
   PNPM_CACHE_FOLDER: $(Pipeline.Workspace)/.pnpm-store
-  PNPM_VERSION: 7.1.6
+  PNPM_VERSION: 7.2.1
   NEXT_TELEMETRY_DISABLED: '1'
   node_version: ^14.19.0
 

docs/api-reference/next/image.md

@@ -16,7 +16,7 @@ description: Enable Image Optimization with the built-in Image component.
 
 | Version   | Changes                                                                                               |
 | --------- | ----------------------------------------------------------------------------------------------------- |
-| `v12.1.7` | Experimental `remotePatterns` configuration added.                                                    |
+| `v12.2.0` | Experimental `remotePatterns` and experimental `unoptimized` configuration added.                     |
 | `v12.1.1` | `style` prop added. Experimental[\*](#experimental-raw-layout-mode) support for `layout="raw"` added. |
 | `v12.1.0` | `dangerouslyAllowSVG` and `contentSecurityPolicy` configuration added.                                |
 | `v12.0.9` | `lazyRoot` prop added.                                                                                |
@@ -301,6 +301,18 @@ const Example = () => {
 When true, the source image will be served as-is instead of changing quality,
 size, or format. Defaults to `false`.
 
+This prop can be assigned to all images by updating `next.config.js` with the following experimental configuration:
+
+```js
+module.exports = {
+  experimental: {
+    images: {
+      unoptimized: true,
+    },
+  },
+}
+```
+
 ## Other Props
 
 Other properties on the `<Image />` component will be passed to the underlying

errors/api-routes-response-size-limit.md

@@ -2,12 +2,27 @@
 
 #### Why This Error Occurred
 
-API Routes are meant to respond quickly and are not intended to support responding with large amounts of data. The maximum size of responses is 4 MB.
+API Routes are meant to respond quickly and are not intended to support responding with large amounts of data. The maximum size of responses is 4MB.
 
 #### Possible Ways to Fix It
 
-Limit your API Route responses to less than 4 MB. If you need to support sending large files to the client, you should consider using a dedicated media host for those assets. See link below for suggestions.
+If you are not using Next.js in a serverless environment, and understand the performance implications of not using a CDN or dedicated media host, you can set this limit to `false` inside your API Route.
 
-### Useful Links
+```js
+export const config = {
+  api: {
+    responseLimit: false,
+  },
+}
+```
 
-[Tips to avoid the 5 MB limit](https://vercel.com/support/articles/how-to-bypass-vercel-5mb-body-size-limit-serverless-functions)
+`responseLimit` can also take the number of bytes or any string format supported by `bytes`, for example `1000`, `'500kb'` or `'3mb'`.
+This value will be the maximum response size before a warning is displayed. The default value is 4MB.
+
+```js
+export const config = {
+  api: {
+    responseLimit: '8mb',
+  },
+}
+```

errors/export-image-api.md

@@ -12,8 +12,8 @@ This is because Next.js optimizes images on-demand, as users request them (not a
 
 - 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`.
+- [Configure `loader`](https://nextjs.org/docs/api-reference/next/image#loader-configuration) in `next.config.js`.
+- [Configure `unoptimized`](https://nextjs.org/docs/api-reference/next/image#unoptimized) in `next.config.js`.
 
 ### Useful Links
 

errors/failed-loading-swc.md

@@ -8,7 +8,7 @@ SWC requires a binary be downloaded that is compatible specific to your system.
 
 #### Possible Ways to Fix It
 
-When on an M1 Mac and switching from a Node.js version without M1 support e.g. v14 to a version with e.g. v16, you may need a different swc dependency which can require re-installing `node_modules` (`npm i --force` or `yarn install --force`).
+When on an M1 Mac and switching from a Node.js version without M1 support to one with, e.g. v14 to v16, you may need a different swc dependency which can require re-installing `node_modules` (`npm i --force` or `yarn install --force`).
 
 On Windows make sure you have Microsoft Visual C++ Redistributable installed. https://docs.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist
 

errors/invalid-images-config.md

@@ -17,8 +17,6 @@ module.exports = {
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
     // limit of 50 domains values
     domains: [],
-    // limit of 50 objects
-    remotePatterns: [],
     // path prefix for Image Optimization API, useful with `loader`
     path: '/_next/image',
     // loader can be 'default', 'imgix', 'cloudinary', 'akamai', or 'custom'
@@ -33,6 +31,15 @@ module.exports = {
     dangerouslyAllowSVG: false,
     // set the Content-Security-Policy header
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+    // the following are experimental features, and may cause breaking changes
+  },
+  experimental: {
+    images: {
+      // limit of 50 objects
+      remotePatterns: [],
+      // when true, every image will be unoptimized
+      unoptimized: false,
+    },
   },
 }
 ```