Merge branch 'canary' into feat/request-next-opt

vercel · Oct 22, 2022 · 3fb3c2f · 3fb3c2f
2 parents 8086679 + 6fb9a19
commit 3fb3c2f
Show file tree

Hide file tree

Showing 76 changed files with 791 additions and 606 deletions.
diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -316,82 +316,6 @@ jobs:
           path: |
             test/traces
 
-  testDevReact17:
-    name: Test Development (react v17)
-    runs-on: ubuntu-latest
-    needs: [build, build-native-test]
-    env:
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_TEST_JOB: 1
-      NEXT_TEST_REACT_VERSION: ^17
-    strategy:
-      fail-fast: false
-      matrix:
-        group: [1, 2]
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          node-version: 16
-          check-latest: true
-
-      - run: echo ${{needs.build.outputs.docsChange}}
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - uses: actions/cache@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - uses: actions/download-artifact@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          name: next-swc-test-binary
-          path: packages/next-swc/native
-
-      - run: npm i -g pnpm@${PNPM_VERSION}
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npm i -g [email protected] && npx playwright install-deps
-        timeout-minutes: 10
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npx @replayio/playwright install chromium
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: node run-tests.js --type development --timings -g ${{ matrix.group }}/2
-        name: Run test/development
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        env:
-          RECORD_REPLAY_METADATA_TEST_RUN_TITLE: testDevReact17 / Group ${{ matrix.group }}
-          RECORD_ALL_CONTENT: 1
-          RECORD_REPLAY: 1
-          RECORD_REPLAY_TEST_METRICS: 1
-          RECORD_REPLAY_WEBHOOK_URL: ${{ secrets.RECORD_REPLAY_WEBHOOK_URL }}
-
-      - uses: replayio/[email protected]
-        if: always()
-        with:
-          api-key: rwk_iKsQnEoQwKd31WAJxgN9ARPFuAlyXlVrDH4uhYpRnti
-          public: true
-          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
-
-      - name: Upload test trace
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: test-trace
-          if-no-files-found: ignore
-          retention-days: 2
-          path: |
-            test/traces
-
   testDevE2E:
     name: Test Development (E2E)
     runs-on: ubuntu-latest
@@ -471,84 +395,6 @@ jobs:
           path: |
             test/traces
 
-  testDevE2EReact17:
-    name: Test Development (E2E) (react v17)
-    runs-on: ubuntu-latest
-    needs: [build, build-native-test]
-    env:
-      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:
-        group: [1, 2, 3]
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          node-version: 16
-          check-latest: true
-
-      - run: echo ${{needs.build.outputs.docsChange}}
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - uses: actions/cache@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - uses: actions/download-artifact@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          name: next-swc-test-binary
-          path: packages/next-swc/native
-
-      - run: npm i -g pnpm@${PNPM_VERSION}
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npm i -g [email protected] && npx playwright install-deps
-        timeout-minutes: 10
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npx @replayio/playwright install chromium
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: node run-tests.js --type e2e --timings -g ${{ matrix.group }}/3
-        name: Run test/e2e (dev)
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        env:
-          RECORD_REPLAY_METADATA_TEST_RUN_TITLE: testDevE2EReact17 / Group ${{ matrix.group }}
-          RECORD_ALL_CONTENT: 1
-          RECORD_REPLAY: 1
-          NEXT_TEST_MODE: dev
-          RECORD_REPLAY_TEST_METRICS: 1
-          RECORD_REPLAY_WEBHOOK_URL: ${{ secrets.RECORD_REPLAY_WEBHOOK_URL }}
-
-      - uses: replayio/[email protected]
-        if: always()
-        with:
-          api-key: rwk_iKsQnEoQwKd31WAJxgN9ARPFuAlyXlVrDH4uhYpRnti
-          public: true
-          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
-
-      - name: Upload test trace
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: test-trace
-          if-no-files-found: ignore
-          retention-days: 2
-          path: |
-            test/traces
-
   testProd:
     name: Test Production
     runs-on: ubuntu-latest
@@ -616,72 +462,6 @@ jobs:
           public: true
           filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
 
-  testProdReact17:
-    name: Test Production (react v17)
-    runs-on: ubuntu-latest
-    needs: [build, build-native-test]
-    env:
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_TEST_JOB: 1
-      NEXT_TEST_REACT_VERSION: ^17
-    strategy:
-      fail-fast: false
-      matrix:
-        group: [1, 2]
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          node-version: 16
-          check-latest: true
-
-      - run: echo ${{needs.build.outputs.docsChange}}
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - uses: actions/cache@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - uses: actions/download-artifact@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          name: next-swc-test-binary
-          path: packages/next-swc/native
-
-      - run: npm i -g pnpm@${PNPM_VERSION}
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npm i -g [email protected] && npx playwright install-deps
-        timeout-minutes: 10
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npx @replayio/playwright install chromium
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: node run-tests.js --type production --timings -g ${{ matrix.group }}/2
-        name: Run test/production
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        env:
-          RECORD_REPLAY_METADATA_TEST_RUN_TITLE: testProdReact17 / Group ${{ matrix.group }}
-          RECORD_ALL_CONTENT: 1
-          RECORD_REPLAY: 1
-          RECORD_REPLAY_TEST_METRICS: 1
-          RECORD_REPLAY_WEBHOOK_URL: ${{ secrets.RECORD_REPLAY_WEBHOOK_URL }}
-
-      - uses: replayio/[email protected]
-        if: always()
-        with:
-          api-key: rwk_iKsQnEoQwKd31WAJxgN9ARPFuAlyXlVrDH4uhYpRnti
-          public: true
-          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
-
   testProdE2E:
     name: Test Production (E2E)
     runs-on: ubuntu-latest
@@ -751,74 +531,6 @@ jobs:
           public: true
           filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
 
-  testProdE2EReact17:
-    name: Test Production (E2E) (react v17)
-    runs-on: ubuntu-latest
-    needs: [build, build-native-test]
-    env:
-      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:
-        group: [1, 2, 3]
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          node-version: ${{ matrix.node }}
-          check-latest: true
-
-      - run: echo ${{needs.build.outputs.docsChange}}
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - uses: actions/cache@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - uses: actions/download-artifact@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          name: next-swc-test-binary
-          path: packages/next-swc/native
-
-      - run: npm i -g pnpm@${PNPM_VERSION}
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npm i -g [email protected] && npx playwright install-deps
-        timeout-minutes: 10
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npx @replayio/playwright install chromium
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: node run-tests.js --type e2e --timings -g ${{ matrix.group }}/3
-        name: Run test/e2e (production)
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        env:
-          RECORD_REPLAY_METADATA_TEST_RUN_TITLE: testProdE2EReact17 / Group ${{ matrix.group }}
-          RECORD_ALL_CONTENT: 1
-          RECORD_REPLAY: 1
-          NEXT_TEST_MODE: start
-          RECORD_REPLAY_TEST_METRICS: 1
-          RECORD_REPLAY_WEBHOOK_URL: ${{ secrets.RECORD_REPLAY_WEBHOOK_URL }}
-
-      - uses: replayio/[email protected]
-        if: always()
-        with:
-          api-key: rwk_iKsQnEoQwKd31WAJxgN9ARPFuAlyXlVrDH4uhYpRnti
-          public: true
-          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
-
   testIntegration:
     name: Test Integration
     runs-on: ubuntu-latest

diff --git a/bench/minimal-server/start.js b/bench/minimal-server/start.js
@@ -1,4 +1,3 @@
-process.env.__NEXT_REACT_CHANNEL = 'exp'
 process.env.NODE_ENV = 'production'
 
 require('../../test/lib/react-channel-require-hook')

diff --git a/docs/advanced-features/codemods.md b/docs/advanced-features/codemods.md
@@ -88,7 +88,7 @@ Dangerously migrates from `next/legacy/image` to the new `next/image` by adding
 - Removes `objectPosition` prop and adds `style`
 - Removes `lazyBoundary` prop
 - Removes `lazyRoot` prop
-- TODO: does not migrate the `loader` config. If you need it, you must manually add a `loader` prop.
+- Changes next.config.js `loader` to "custom", removes `path`, and sets `loaderFile` to a new file.
 
 #### Before: intrinsic
 

diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
@@ -111,6 +111,8 @@ const MyImage = (props) => {
 }
 ```
 
+Alternatively, you can use the [loaderFile](#loader-configuration) configuration in next.config.js to configure every instance of `next/image` in your application, without passing a prop.
+
 ### fill
 
 A boolean that causes the image to fill the parent element instead of setting [`width`](#width) and [`height`](#height).
@@ -343,6 +345,29 @@ module.exports = {
 }
 ```
 
+### Loader Configuration
+
+If you want to use a cloud provider to optimize images instead of using the Next.js built-in Image Optimization API, you can configure the `loaderFile` in your `next.config.js` like the following:
+
+```js
+module.exports = {
+  images: {
+    loader: 'custom',
+    loaderFile: './my/image/loader.js',
+  },
+}
+```
+
+This must point to a file relative to the root of your Next.js application. The file must export a default function that returns a string, for example:
+
+```js
+export default function myImageLoader({ src, width, quality }) {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+```
+
+Alternatively, you can use the [`loader` prop](#loader) to configure each instance of `next/image`.
+
 ## Advanced
 
 The following configuration is for advanced use cases and is usually not necessary. If you choose to configure the properties below, you will override any changes to the Next.js defaults in future updates.

diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
@@ -99,13 +99,13 @@ To protect your application from malicious users, you must define a list of remo
 
 ### Loaders
 
-Note that in the [example earlier](#remote-images), a partial URL (`"/me.png"`) is provided for a remote image. This is possible because of the `next/image` [loader](/docs/api-reference/next/image.md#loader) architecture.
+Note that in the [example earlier](#remote-images), a partial URL (`"/me.png"`) is provided for a remote image. This is possible because of the loader architecture.
 
 A loader is a function that generates the URLs for your image. It modifies the provided `src`, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic [srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) generation, so that visitors to your site will be served an image that is the right size for their viewport.
 
-The default loader for Next.js applications uses the built-in Image Optimization API, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you would like to serve your images directly from a CDN or image server, you can use one of the [built-in loaders](/docs/api-reference/next/image.md#built-in-loaders) or write your own with a few lines of JavaScript.
+The default loader for Next.js applications uses the built-in Image Optimization API, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you would like to serve your images directly from a CDN or image server, you can write your own loader function with a few lines of JavaScript.
 
-Loaders can be defined per-image, or at the application level.
+You can define a loader per-image with the [`loader` prop](/docs/api-reference/next/image.md#loader), or at the application level with the [`loaderFile` configuration](https://nextjs.org/docs/api-reference/next/image#loader-configuration).
 
 ### Priority
 
@@ -151,7 +151,7 @@ Because `next/image` is designed to guarantee good performance results, it canno
 >
 > If you are accessing images from a source without knowledge of the images' sizes, there are several things you can do:
 >
-> **Use `fill``**
+> **Use `fill`**
 >
 > The [`fill`](/docs/api-reference/next/image#fill) prop allows your image to be sized by its parent element. Consider using CSS to give the image's parent element space on the page along [`sizes`](/docs/api-reference/next/image#sizes) prop to match any media query break points. You can also use [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with `fill`, `contain`, or `cover`, and [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) to define how the image should occupy that space.
 >