Merge branch 'canary' into chore/issue-validator-tweaks

.alexrc

@@ -17,6 +17,7 @@
     "hooks",
     "host-hostess",
     "invalid",
-    "remains"
+    "remains",
+    "white"
   ]
 }

.github/workflows/build_test_deploy.yml

@@ -1060,7 +1060,7 @@ jobs:
 
   build-native-test:
     name: Build native binary for tests and metrics
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
       # https://github.com/actions/virtual-environments/issues/1187
       - name: tune linux network
@@ -1092,14 +1092,14 @@ jobs:
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE == 'nope' }}
         with:
           path: ~/.cargo/registry
-          key: stable-ubuntu-18.04-cargo-registry
+          key: stable-ubuntu-latest-cargo-registry
 
       - name: Cache cargo index
         uses: actions/cache@v3
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE == 'nope' }}
         with:
           path: ~/.cargo/git
-          key: stable-ubuntu-18.04-cargo-index
+          key: stable-ubuntu-latest-cargo-index
 
       # We use week in the turbo cache key to keep the cache from infinitely growing
       - id: get-week
@@ -1125,9 +1125,9 @@ jobs:
         uses: actions/cache@v3
         with:
           path: ./packages/next-swc/target
-          key: next-swc-cargo-cache-dev-ubuntu-18.04-${{ hashFiles('**/Cargo.lock') }}
+          key: next-swc-cargo-cache-dev-ubuntu-latest-${{ hashFiles('**/Cargo.lock') }}
           restore-keys: |
-            next-swc-cargo-cache-dev-ubuntu-18.04
+            next-swc-cargo-cache-dev-ubuntu-latest
 
       # since the repo's dependencies aren't installed we need
       # to install napi globally
@@ -1152,7 +1152,7 @@ jobs:
 
   test-native:
     name: Unit Test Native Code
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v3
@@ -1176,7 +1176,7 @@ jobs:
 
   test-wasm:
     name: Test the wasm build
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     needs: [build, build-native-test, build-wasm-dev]
 
     steps:
@@ -1294,7 +1294,7 @@ jobs:
               export CC_aarch64_unknown_linux_gnu=/usr/aarch64-unknown-linux-gnu/bin/aarch64-unknown-linux-gnu-gcc &&
               turbo run build-native --cache-dir=".turbo" -- --release --target aarch64-unknown-linux-gnu &&
               llvm-strip -x packages/next-swc/native/next-swc.*.node
-          - host: ubuntu-18.04
+          - host: ubuntu-latest
             target: 'armv7-unknown-linux-gnueabihf'
             setup: |
               sudo apt-get update
@@ -1357,7 +1357,7 @@ jobs:
       # https://github.com/actions/virtual-environments/issues/1187
       - name: tune linux network
         run: sudo ethtool -K eth0 tx off rx off
-        if: ${{ matrix.settings.host == 'ubuntu-18.04' }}
+        if: ${{ matrix.settings.host == 'ubuntu-latest' }}
       - name: tune linux network
         run: sudo ethtool -K eth0 tx off rx off
         if: ${{ matrix.settings.host == 'ubuntu-latest' }}

.github/workflows/pull_request_stats.yml

@@ -13,7 +13,7 @@ env:
 jobs:
   build-native-dev:
     name: Build dev binary for tests
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
       # https://github.com/actions/virtual-environments/issues/1187
       - name: tune linux network
@@ -46,14 +46,14 @@ jobs:
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE == 'nope' }}
         with:
           path: ~/.cargo/registry
-          key: stable-ubuntu-18.04-node@14-cargo-registry-trimmed-${{ hashFiles('**/Cargo.lock') }}
+          key: stable-ubuntu-latest-node@14-cargo-registry-trimmed-${{ hashFiles('**/Cargo.lock') }}
 
       - name: Cache cargo index
         uses: actions/cache@v1
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE == 'nope' }}
         with:
           path: ~/.cargo/git
-          key: stable-ubuntu-18.04-node@14-cargo-index-trimmed-${{ hashFiles('**/Cargo.lock') }}
+          key: stable-ubuntu-latest-node@14-cargo-index-trimmed-${{ hashFiles('**/Cargo.lock') }}
 
       # We use week in the turbo cache key to keep the cache from infinitely growing
       - id: get-week
@@ -78,9 +78,9 @@ jobs:
         uses: actions/cache@v3
         with:
           path: ./packages/next-target
-          key: next-swc-cargo-cache-ubuntu-18.04--${{ hashFiles('**/Cargo.lock') }}
+          key: next-swc-cargo-cache-ubuntu-latest--${{ hashFiles('**/Cargo.lock') }}
           restore-keys: |
-            next-swc-cargo-cache-ubuntu-18.04
+            next-swc-cargo-cache-ubuntu-latest
 
       # since the repo's dependencies aren't installed we need
       # to install napi globally

.prettierignore_staged

@@ -7,5 +7,6 @@ packages/next/bundles/webpack/packages/*.runtime.js
 lerna.json
 packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*
-pnpm-lock.yaml
-.github/actions/issue-validator/index.mjs
+pnpm-lock.yam
+.github/actions/issue-validator/index.mjs
+**/convex/_generated/**

contributing.md

@@ -61,7 +61,7 @@ pnpm build
 pnpm prepublishOnly
 ```
 
-By default the latest canary of the next-swc binaries will be installed and used. If you are actively working on Rust code or you need to test out the most recent Rust code that hasn't been published as a canary yet you can [install Rust](https://www.rust-lang.org/tools/install) and run `pnpm --filter=@next/swc build-native`.
+By default, the latest canary of the next-swc binaries will be installed and used. If you are actively working on Rust code or you need to test out the most recent Rust code that hasn't been published as a canary yet you can [install Rust](https://www.rust-lang.org/tools/install) and run `pnpm --filter=@next/swc build-native`.
 
 If you want to test out the wasm build locally, you will need to [install wasm-pack](https://rustwasm.github.io/wasm-pack/installer/). Run `pnpm --filter=@next/swc build-wasm --target <wasm_target>` to build and `node ./scripts/setup-wasm.mjs` to copy it into your `node_modules`. Run next with `NODE_OPTIONS='--no-addons'` to force it to use the wasm binary.
 
@@ -164,7 +164,7 @@ There are two options to develop with your local version of the codebase:
 
    to re-install all of the dependencies.
 
-   Note that Next will be copied from the locally compiled version as opposed to from being downloaded from the NPM registry.
+   Note that Next will be copied from the locally compiled version as opposed to being downloaded from the NPM registry.
 
 4. Run your application as you normally would.
 
@@ -263,7 +263,7 @@ Below are the steps to add a new link:
 
 ## Adding examples
 
-When you add an example to the [examples](examples) directory, please follow these guidelines to ensure high quality examples:
+When you add an example to the [examples](examples) directory, please follow these guidelines to ensure high-quality examples:
 
 - TypeScript should be leveraged for new examples (no need for separate JavaScript and TypeScript examples, converting old JavaScript examples is preferred)
 - Examples should not add custom ESLint configuration (we have specific templates for ESLint)
@@ -277,7 +277,7 @@ When you add an example to the [examples](examples) directory, please follow the
 - Example directories should not be prefixed with `with-`
 - Make sure linting passes (you can run `pnpm lint-fix`)
 
-Also don’t forget to add a `README.md` file with the following format:
+Also, don’t forget to add a `README.md` file with the following format:
 
 - Replace `DIRECTORY_NAME` with the directory name you’re adding.
 - Fill in `Example Name` and `Description`.
@@ -333,14 +333,14 @@ Issues are opened with one of these labels:
 - `template: bug` - unverified issue with Next.js itself, or one of the examples in the [`examples`](https://github.com/vercel/next.js/tree/canary/examples) folder
 - `template: documentation` - feedback for improvement or an unverified issue with the Next.js documentation
 
-In case of a bug report, a maintainer looks at the provided reproduction. If the reproduction is missing or insufficient, a `please add a complete reproduction` label is added. If a reproduction is not provided for more than 30 days, the issue becomes stale and will be automatically closed. If a reproduction is provided within 30 days, the `please add a complete reproduction` label is removed and the issue will not become stale anymore.
+In the case of a bug report, a maintainer looks at the provided reproduction. If the reproduction is missing or insufficient, a `please add a complete reproduction` label is added. If a reproduction is not provided for more than 30 days, the issue becomes stale and will be automatically closed. If a reproduction is provided within 30 days, the `please add a complete reproduction` label is removed and the issue will not become stale anymore.
 
 Bug reports must be verified against the `next@canary` release. The canary version of Next.js ships daily and includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue. Issues not verified against `next@canary` will be closed after 30 days.
 
 If the issue is specific to the project and not to Next.js itself, it might be converted to a [🎓️ Help discussion](https://github.com/vercel/next.js/discussions/categories/help)
 
 If the bug is verified, it will receive the `kind: bug` label and will be tracked by the maintainers. An `area:` label can be added to indicate which part of Next.js is affected.
 
-Confirmed issues never become stale or be closed before resolution.
+Confirmed issues never become stale or are closed before resolution.
 
 All **closed** PRs and Issues will be locked after 30 days of inactivity (eg.: comment, referencing from elsewhere).

docs/advanced-features/custom-error-page.md

@@ -98,3 +98,4 @@ If you have a custom `Error` component be sure to import that one instead. `next
 ### Caveats
 
 - `Error` does not currently support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) or [`getServerSideProps`](/docs/basic-features/data-fetching/get-server-side-props.md).
+- `_error`, like `_app`, is a reserved pathname. `_error` is used to define the customized layouts and behaviors of the error pages. `/_error` will render 404 when accessed directly via [routing](/docs/routing/introduction) or rendering in a [custom server](/docs/advanced-features/custom-server).

docs/advanced-features/preview-mode.md

@@ -173,6 +173,8 @@ https://<your-site>/api/preview?secret=<token>&slug=<path>
 
 ## More Details
 
+> **Note**: during rendering `next/router` exposes an `isPreview` flag, see the [router object docs](/docs/api-reference/next/router.md#router-object) for more info.
+
 ### Clear the Preview Mode cookies
 
 By default, no expiration date is set for Preview Mode cookies, so the preview session ends when the browser is closed.

docs/advanced-features/react-18/server-components.md

@@ -1,30 +1,18 @@
-# React Server Components (Alpha)
+# React Server Components (RFC)
 
 Server Components allow us to render React components on the server. This is fundamentally different from server-side rendering (SSR) where you're pre-generating HTML on the server. With Server Components, there's **zero client-side JavaScript needed,** making page rendering faster. This improves the user experience of your application, pairing the best parts of server-rendering with client-side interactivity.
 
-### Enable React Server Components
+### Next Router and Layouts RFC
 
-To use React Server Components, ensure you have the latest React installed:
+We are currently implementing the [Next.js Router and Layouts RFC](/blog/layouts-rfc).
 
-```jsx
-npm install next@canary react@latest react-dom@latest
-```
-
-Then, update your `next.config.js`:
+The new Next.js router will be built on top of React 18 features, including React Server Components.
 
-```jsx
-// next.config.js
-module.exports = {
-  experimental: {
-    runtime: 'nodejs',
-    serverComponents: true,
-  },
-}
-```
+One of the biggest proposed changes is that, by default, files inside a new `app` directory will be rendered on the server as React Server Components.
 
-Using `runtime` also enables [Streaming SSR](/docs/advanced-features/react-18/streaming). When setting `runtime` to `'experimental-edge'`, the server will be running entirely in the [Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime).
+This will allow you to automatically adopt React Server Components when migrating from `pages` to `app`.
 
-Now, you can start using React Server Components in Next.js. [See our example](https://github.com/vercel/next-rsc-demo) for more information.
+You can find more information on the [RFC](/blog/layouts-rfc) and we welcome your feedback on [Github Discussions](https://github.com/vercel/next.js/discussions/37136).
 
 ### Server Components Conventions
 

docs/advanced-features/static-html-export.md

@@ -31,6 +31,8 @@ Running `npm run build` will generate an `out` directory.
 
 For more advanced scenarios, you can define a parameter called [`exportPathMap`](/docs/api-reference/next.config.js/exportPathMap.md) in your [`next.config.js`](/docs/api-reference/next.config.js/introduction.md) file to configure exactly which pages will be generated.
 
+> **Warning**: Using `exportPathMap` for defining routes with any `getStaticPaths` powered page is now ignored and gets overridden. We recommend not to use them together.
+
 ## Supported Features
 
 The majority of core Next.js features needed to build a static site are supported, including:

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

@@ -40,7 +40,7 @@ module.exports = {
 }
 ```
 
-Note: the `query` field in `exportPathMap` cannot be used with [automatically statically optimized pages](/docs/advanced-features/automatic-static-optimization) or [`getStaticProps` pages](/docs/basic-features/data-fetching/get-static-props.md) as they are rendered to HTML files at build-time and additional query information cannot 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](/docs/basic-features/data-fetching/get-static-props.md) 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`.
 
@@ -79,6 +79,8 @@ module.exports = {
 next export -o outdir
 ```
 
+> **Warning**: Using `exportPathMap` for defining routes with any `getStaticPaths` powered page is now ignored and gets overridden. We recommend not to use them together.
+
 ## Related
 
 <div class="card">

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

@@ -80,7 +80,7 @@ module.exports = (phase, { defaultConfig }) => {
 }
 ```
 
-The commented lines are the place where you can put the configs allowed by `next.config.js`, which are [defined in this file](https://github.com/vercel/next.js/blob/canary/packages/next/server/config-shared.ts#L137).
+The commented lines are the place where you can put the configs allowed by `next.config.js`, which are [defined in this file](https://github.com/vercel/next.js/blob/canary/packages/next/server/config-shared.ts#L158).
 
 However, none of the configs are required, and it's not necessary to understand what each config does. Instead, search for the features you need to enable or modify in this section and they will show you what to do.
 

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

@@ -300,4 +300,4 @@ In some rare cases, you might need to assign a custom status code for older HTTP
 ## Other Redirects
 
 - Inside [API Routes](/docs/api-routes/response-helpers.md), you can use `res.redirect()`.
-- Inside [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) and [`getServerSideProps`](/docs/basic-features/data-fetching/get-server-side-props.md), you can redirect specific pages at request-time.
+- Inside [`getStaticProps`](/docs/api-reference/data-fetching/get-static-props.md) and [`getServerSideProps`](/docs/api-reference/data-fetching/get-server-side-props.md), you can redirect specific pages at request-time.

docs/api-reference/next/future/image.md

@@ -16,7 +16,7 @@ description: Try the latest Image Optimization with the experimental `next/futur
 
 The `next/future/image` component is an experiment to improve both the performance and developer experience of `next/image` by using the native `<img>` element with better default behavior.
 
-This new component is considered experimental and therefore not covered by semver, and may cause unexpected or broken application behavior. This component uses browser native [lazy loading](https://caniuse.com/loading-lazy-attr), which may fallback to eager loading for older browsers before Safari 15.4. When using the blur-up placeholder, older browsers before Safari 12 will fallback to empty placeholder. When using styles with `width`/`height` of `auto`, it is possible to cause [Layout Shift](https://web.dev/cls/) on older browsers before [Chrome 79](https://chromestatus.com/feature/5695266130755584), [Firefox 69](https://bugzilla.mozilla.org/show_bug.cgi?id=1547231), and [Safari 14.2](https://bugs.webkit.org/show_bug.cgi?id=201641). For more details, see [this MDN video](https://www.youtube.com/watch?v=4-d_SoCHeWE).
+This new component is considered experimental and therefore not covered by semver, and may cause unexpected or broken application behavior. This component uses browser native [lazy loading](https://caniuse.com/loading-lazy-attr), which may fallback to eager loading for older browsers before Safari 15.4. When using the blur-up placeholder, older browsers before Safari 12 will fallback to empty placeholder. When using styles with `width`/`height` of `auto`, it is possible to cause [Layout Shift](https://web.dev/cls/) on older browsers before Safari 15 that don't [preserve the aspect ratio](https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes). For more details, see [this MDN video](https://www.youtube.com/watch?v=4-d_SoCHeWE).
 
 To use `next/future/image`, add the following to your `next.config.js` file:
 
@@ -34,12 +34,24 @@ module.exports = {
 
 Compared to `next/image`, the new `next/future/image` component has the following changes:
 
-- Renders a single `<img>` without `<div>` or `<span>` wrappers
+- Removes `<span>` wrapper around `<img>` in favor of [native computed aspect ratio](https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes)
 - Adds support for canonical `style` prop
-- Removes `layout`, `objectFit`, and `objectPosition` props in favor of `style` or `className`
+  - Removes `layout` prop in favor of `style` or `className`
+  - Removes `objectFit` prop in favor of `style` or `className`
+  - Removes `objectPosition` prop in favor of `style` or `className`
 - Removes `IntersectionObserver` implementation in favor of [native lazy loading](https://caniuse.com/loading-lazy-attr)
+  - Removes `lazyBoundary` prop since there is no native equivalent
+  - Removes `lazyRoot` prop since there is no native equivalent
 - Removes `loader` config in favor of [`loader`](#loader) prop
-- Note: the [`onError`](#onerror) prop might behave differently
+
+## Known Browser Bugs
+
+- [Safari 15+](https://bugs.webkit.org/show_bug.cgi?id=243601) displays a gray border while loading. Possible solutions:
+  - Use CSS `@media not all and (min-resolution:.001dpcm) { img[loading="lazy"] { clip-path: inset(0.5px) } }`
+  - Use [`priority`](#priority) if the image is above the fold
+- [Firefox 67+](https://bugzilla.mozilla.org/show_bug.cgi?id=1556156) displays a white background while loading progressive jpeg. Possible solutions:
+  - Enable [AVIF `formats`](#acceptable-formats)
+  - Use [`placeholder="blur"`](#blur)
 
 ## Migration
 
@@ -303,16 +315,14 @@ The callback function will be called with one argument, an object with the follo
 
 A callback function that is invoked when the image is loaded.
 
-Note that the load event might occur before client-side hydration completes, so this callback might not be invoked in that case.
+Note that the load event might occur before the placeholder is removed and the image is fully decoded.
 
 Instead, use [`onLoadingComplete`](#onloadingcomplete).
 
 ### onError
 
 A callback function that is invoked if the image fails to load.
 
-Note that the error might occur before client-side hydration completes, so this callback might not be invoked in that case.
-
 ### loading
 
 > **Attention**: This property is only meant for advanced usage. Switching an