Merge branch 'canary' into feat/extend-nextcookies

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

@@ -89,18 +89,18 @@ The layout behavior of the image as the viewport changes size.
 | `responsive`          | Scale to fit width of container                          | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes                   |
 | `fill`                | Grow in both X and Y axes to fill container              | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes                   |
 
-- [Demo the `intrinsic` layout (default)](https://image-component.nextjs.gallery/layout-intrinsic)
+- [Demo the `intrinsic` layout (default)](https://image-legacy-component.nextjs.gallery/layout-intrinsic)
   - When `intrinsic`, the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports.
-- [Demo the `fixed` layout](https://image-component.nextjs.gallery/layout-fixed)
+- [Demo the `fixed` layout](https://image-legacy-component.nextjs.gallery/layout-fixed)
   - When `fixed`, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native `img` element.
-- [Demo the `responsive` layout](https://image-component.nextjs.gallery/layout-responsive)
+- [Demo the `responsive` layout](https://image-legacy-component.nextjs.gallery/layout-responsive)
   - When `responsive`, the image will scale the dimensions down for smaller viewports and scale up for larger viewports.
   - Ensure the parent element uses `display: block` in their stylesheet.
-- [Demo the `fill` layout](https://image-component.nextjs.gallery/layout-fill)
+- [Demo the `fill` layout](https://image-legacy-component.nextjs.gallery/layout-fill)
   - When `fill`, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.
   - This is usually paired with the [`objectFit`](#objectFit) property.
   - Ensure the parent element has `position: relative` in their stylesheet.
-- [Demo background image](https://image-component.nextjs.gallery/background)
+- [Demo background image](https://image-legacy-component.nextjs.gallery/background)
 
 ### loader
 
@@ -193,9 +193,9 @@ When `empty`, there will be no placeholder while the image is loading, only empt
 
 Try it out:
 
-- [Demo the `blur` placeholder](https://image-component.nextjs.gallery/placeholder)
-- [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
-- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
+- [Demo the `blur` placeholder](https://image-legacy-component.nextjs.gallery/placeholder)
+- [Demo the shimmer effect with `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/color)
 
 ## Advanced Props
 
@@ -258,9 +258,9 @@ less) is recommended. Including larger images as placeholders may harm your appl
 
 Try it out:
 
-- [Demo the default `blurDataURL` prop](https://image-component.nextjs.gallery/placeholder)
-- [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
-- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
+- [Demo the default `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/placeholder)
+- [Demo the shimmer effect with `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/color)
 
 You can also [generate a solid color Data URL](https://png-pixel.com) to match the image.
 

docs/basic-features/image-optimization.md

@@ -193,7 +193,7 @@ This is the default for `<div>` elements but should be specified otherwise.
 
 ### Styling Examples
 
-For examples of the Image component used with the various styles, see the [Image component example app](https://image-component.nextjs.gallery).
+For examples of the Image component used with the various styles, see the [Image Component Demo](https://image-component.nextjs.gallery).
 
 ## Configuration
 

docs/basic-features/supported-browsers-features.md

@@ -4,7 +4,17 @@ description: Browser support and which JavaScript features are supported by Next
 
 # Supported Browsers and Features
 
-Next.js supports **IE11 and all modern browsers** (Edge, Firefox, Chrome, Safari, Opera, et al) with no required configuration.
+Next.js supports **modern browsers** with zero configuration.
+
+- Chrome 64+
+- Edge 79+
+- Firefox 67+
+- Opera 51+
+- Safari 12+
+
+## Browserslist
+
+If you would like to target specific browsers or features, Next.js supports [Browserslist](https://browsersl.ist) configuration.
 
 ## Polyfills
 

docs/upgrading.md

@@ -6,6 +6,8 @@ description: Learn how to upgrade Next.js.
 
 ## Upgrading from 12 to 13
 
+The [Supported Browsers](/docs/basic-features/supported-browsers-features.md) have been changed to drop Internet Explorer and target modern browsers.
+
 The minimum Node.js version has been bumped from 12.22.0 to 14.0.0, since 12.x has reached end-of-life.
 
 The `swcMinify` configuration property was changed from `false` to `true`. See [Next.js Compiler](/docs/advanced-features/compiler.md) for more info.
@@ -15,7 +17,7 @@ A [codemod is available](/docs/advanced-features/codemods.md#next-image-to-legac
 
 The `next/link` child can no longer be `<a>`. Add the `legacyBehavior` prop to use the legacy behavior or remove the `<a>` to upgrade. A [codemod is available](/docs/advanced-features/codemods.md#new-link) to automatically upgrade your code.
 
-The `target` configuration option has been removed and superseded by [Output File Tracing](https://nextjs.org/docs/advanced-features/output-file-tracing).
+The `target` configuration property has been removed and superseded by [Output File Tracing](https://nextjs.org/docs/advanced-features/output-file-tracing).
 
 ## Upgrading to 12.2
 

examples/image-component/README.md

@@ -6,7 +6,7 @@ The index page ([`pages/index.js`](pages/index.js)) has a couple images, one int
 
 ## Live demo
 
-[https://image-component.nextjs.gallery/](https://image-component.nextjs.gallery/)
+[https://image-component.nextjs.gallery](https://image-component.nextjs.gallery)
 
 ## Deploy your own
 

examples/image-legacy-component/README.md

@@ -1,29 +1,29 @@
-# Image Component Example
+# Legacy Image Component Example
 
-This example shows how to use the [Image Component in Next.js](https://nextjs.org/docs/api-reference/next/image) serve optimized, responsive images.
+This example shows how to use the [Legacy Image Component in Next.js](https://nextjs.org/docs/api-reference/next/legacy/image) serve optimized, responsive images.
 
 The index page ([`pages/index.js`](pages/index.js)) has a couple images, one internal image and one external image. In [`next.config.js`](next.config.js), the `domains` property is used to enable external images. The other pages demonstrate the different layouts. Run or deploy the app to see how it works!
 
 ## Live demo
 
-[https://image-component.nextjs.gallery/](https://image-component.nextjs.gallery/)
+[https://image-legacy-component.nextjs.gallery](https://image-legacy-component.nextjs.gallery)
 
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/image-legacy-component)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/image-component&project-name=image-component&repository-name=image-legacy-component)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/image-legacy-component&project-name=image-legacy-component&repository-name=image-legacy-component)
 
 ## 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), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
 
 ```bash
-npx create-next-app --example image-component image-app
+npx create-next-app --example image-legacy-component image-app
 # or
-yarn create next-app --example image-component image-app
+yarn create next-app --example image-legacy-component image-app
 # or
-pnpm create next-app --example image-component image-app
+pnpm create next-app --example image-legacy-component image-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/with-stripe-typescript/components/Cart.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react'
-import { CartProvider } from 'use-shopping-cart/react'
+import { CartProvider } from 'use-shopping-cart'
 import * as config from '../config'
 
 const Cart = ({ children }: { children: ReactNode }) => (

examples/with-stripe-typescript/components/CartSummary.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 
 import StripeTestCards from '../components/StripeTestCards'
 
-import { useShoppingCart } from 'use-shopping-cart/react'
+import { useShoppingCart } from 'use-shopping-cart'
 import { fetchPostJSON } from '../utils/api-helpers'
 
 const CartSummary = () => {

examples/with-stripe-typescript/components/ClearCart.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useShoppingCart } from 'use-shopping-cart/react'
+import { useShoppingCart } from 'use-shopping-cart'
 
 export default function ClearCart() {
   const { clearCart } = useShoppingCart()

examples/with-stripe-typescript/components/Products.tsx

@@ -1,6 +1,6 @@
 import products from '../data/products'
 import { formatCurrencyString } from 'use-shopping-cart'
-import { useShoppingCart } from 'use-shopping-cart/react'
+import { useShoppingCart } from 'use-shopping-cart'
 
 const Products = () => {
   const { addItem, removeItem } = useShoppingCart()

examples/with-stripe-typescript/package.json

@@ -6,22 +6,23 @@
     "start": "next start"
   },
   "dependencies": {
-    "@stripe/react-stripe-js": "1.7.0",
-    "@stripe/stripe-js": "1.22.0",
-    "micro": "^9.3.4",
+    "@stripe/react-stripe-js": "1.13.0",
+    "@stripe/stripe-js": "1.42.0",
+    "micro": "^9.4.1",
     "micro-cors": "^0.1.1",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "stripe": "8.200.0",
-    "swr": "^0.1.16",
-    "use-shopping-cart": "3.0.5"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "stripe": "10.14.0",
+    "swr": "^1.3.0",
+    "use-shopping-cart": "3.1.2",
+    "redux": "4.2.0"
   },
   "devDependencies": {
-    "@types/micro": "^7.3.3",
-    "@types/micro-cors": "^0.1.0",
-    "@types/node": "^13.1.2",
-    "@types/react": "^16.9.17",
-    "typescript": "4.5.5"
+    "@types/micro": "^7.3.7",
+    "@types/micro-cors": "^0.1.2",
+    "@types/node": "^18.11.2",
+    "@types/react": "^18.0.21",
+    "typescript": "4.8.4"
   }
 }

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.3.2-canary.30"
+  "version": "12.3.2-canary.32"
 }

package.json

@@ -40,11 +40,9 @@
     "next-with-deps": "./scripts/next-with-deps.sh",
     "next": "node --trace-deprecation --enable-source-maps packages/next/dist/bin/next",
     "next-react-17": "__NEXT_REACT_CHANNEL=17 node --trace-deprecation --enable-source-maps -r ./test/lib/react-channel-require-hook.js packages/next/dist/bin/next",
-    "next-react-exp": "__NEXT_REACT_CHANNEL=exp node --trace-deprecation --enable-source-maps -r ./test/lib/react-channel-require-hook.js packages/next/dist/bin/next",
     "next-no-sourcemaps": "node --trace-deprecation packages/next/dist/bin/next",
     "clean-trace-jaeger": "rm -rf test/integration/basic/.next && TRACE_TARGET=JAEGER node --trace-deprecation --enable-source-maps packages/next/dist/bin/next build test/integration/basic",
     "debug": "node --inspect packages/next/dist/bin/next",
-    "debug-react-exp": "__NEXT_REACT_CHANNEL=exp node --inspect --trace-deprecation --enable-source-maps -r ./test/lib/react-channel-require-hook.js packages/next/dist/bin/next",
     "postinstall": "git config feature.manyFiles true && node scripts/install-native.mjs",
     "version": "pnpm install && git add pnpm-lock.yaml",
     "prepare": "husky install"
@@ -183,8 +181,6 @@
     "react-17": "npm:react@17.0.2",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:react-dom@17.0.2",
-    "react-dom-exp": "npm:react-dom@0.0.0-experimental-a8c16a004-20221012",
-    "react-exp": "npm:react@0.0.0-experimental-a8c16a004-20221012",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.3.2-canary.30",
+    "@next/eslint-plugin-next": "12.3.2-canary.32",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "description": "ESLint plugin for NextJS.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.3.2-canary.30",
+  "version": "12.3.2-canary.32",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",