Merge branch 'canary' into wyattjoh/NEXT-713-unify-request

docs/advanced-features/dynamic-import.md

@@ -13,7 +13,7 @@ description: Dynamically import JavaScript modules and React Components and spli
 
 Next.js supports lazy loading external libraries with `import()` and React components with `next/dynamic`. Deferred loading helps improve the initial loading performance by decreasing the amount of JavaScript necessary to render the page. Components or libraries are only imported and included in the JavaScript bundle when they're used.
 
-`next/dynamic` is a composite extension of [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy) and [`Suspense`](https://reactjs.org/docs/react-api.html#reactsuspense), components can delay hydration until the Suspense boundary is resolved.
+`next/dynamic` is a composite extension of [`React.lazy`](https://react.dev/reference/react/lazy) and [`Suspense`](https://react.dev/reference/react/Suspense), components can delay hydration until the Suspense boundary is resolved.
 
 ## Example
 

docs/api-reference/data-fetching/get-initial-props.md

@@ -70,7 +70,7 @@ For the initial page load, `getInitialProps` will run on the server only. `getIn
 - `getInitialProps` can **not** be used in children components, only in the default export of every page
 - If you are using server-side only modules inside `getInitialProps`, make sure to [import them properly](https://arunoda.me/blog/ssr-and-server-only-modules), otherwise it'll slow down your app
 
-> Note that irrespective of rendering type, any `props` will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://reactjs.org/docs/react-dom.html#hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
+> Note that irrespective of rendering type, any `props` will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://react.dev/reference/react-dom/hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
 
 ## TypeScript
 

docs/api-reference/next/amp.md

@@ -84,4 +84,4 @@ The page above is a hybrid AMP page, which means:
 - The page is rendered as traditional HTML (default) and AMP HTML (by adding `?amp=1` to the URL)
 - The AMP version of the page only has valid optimizations applied with AMP Optimizer so that it is indexable by search-engines
 
-The page uses `useAmp` to differentiate between modes, it's a [React Hook](https://reactjs.org/docs/hooks-intro.html) that returns `true` if the page is using AMP, and `false` otherwise.
+The page uses `useAmp` to differentiate between modes, it's a [React Hook](https://react.dev/reference/react) that returns `true` if the page is using AMP, and `false` otherwise.

docs/api-reference/next/image.md

@@ -209,7 +209,7 @@ In some cases, you may need more advanced usage. The `<Image />` component optio
 
 ### style
 
-Allows [passing CSS styles](https://reactjs.org/docs/dom-elements.html#style) to the underlying image element.
+Allows [passing CSS styles](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) to the underlying image element.
 
 Also keep in mind that the required `width` and `height` props can interact with your styling. If you use styling to modify an image's `width`, you must set the `height="auto"` style as well, or your image will be distorted.
 

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

@@ -203,7 +203,7 @@ In some cases, you may need more advanced usage. The `<Image />` component optio
 
 ### style
 
-Allows [passing CSS styles](https://reactjs.org/docs/dom-elements.html#style) to the underlying image element.
+Allows [passing CSS styles](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) to the underlying image element.
 
 Note that all `layout` modes apply their own styles to the image element, and these automatic styles take precedence over the `style` prop.
 
@@ -274,9 +274,9 @@ If the image is nested in a scrollable parent element other than the root docume
 
 ### lazyRoot
 
-A React [Ref](https://reactjs.org/docs/refs-and-the-dom.html) pointing to the scrollable parent element. Defaults to `null` (the document viewport).
+A React [Ref](https://react.dev/learn/referencing-values-with-refs) pointing to the scrollable parent element. Defaults to `null` (the document viewport).
 
-The Ref must point to a DOM element or a React component that [forwards the Ref](https://reactjs.org/docs/forwarding-refs.html) to the underlying DOM element.
+The Ref must point to a DOM element or a React component that [forwards the Ref](https://react.dev/reference/react/forwardRef) to the underlying DOM element.
 
 **Example pointing to a DOM element**
 

docs/api-reference/next/link.md

@@ -131,7 +131,7 @@ export default NavLink
 
 ## If the child is a functional component
 
-If the child of `Link` is a functional component, in addition to using `passHref` and `legacyBehavior`, you must wrap the component in [`React.forwardRef`](https://reactjs.org/docs/react-api.html#reactforwardref):
+If the child of `Link` is a functional component, in addition to using `passHref` and `legacyBehavior`, you must wrap the component in [`React.forwardRef`](https://react.dev/reference/react/forwardRef):
 
 ```jsx
 import Link from 'next/link'

docs/api-reference/next/router.md

@@ -35,7 +35,7 @@ function ActiveLink({ children, href }) {
 export default ActiveLink
 ```
 
-> `useRouter` is a [React Hook](https://reactjs.org/docs/hooks-intro.html), meaning it cannot be used with classes. You can either use [withRouter](#withRouter) or wrap your class in a function component.
+> `useRouter` is a [React Hook](https://react.dev/learn#using-hooks), meaning it cannot be used with classes. You can either use [withRouter](#withRouter) or wrap your class in a function component.
 
 ## `router` object
 
@@ -174,7 +174,7 @@ useEffect(() => {
 }, [router.query.slug])
 ```
 
-2. Use a React `key` to [tell React to remount the component](https://reactjs.org/docs/lists-and-keys.html#keys). To do this for all pages, you can use a custom app:
+2. Use a React `key` to [tell React to remount the component](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key). To do this for all pages, you can use a custom app:
 
 ```jsx
 // pages/_app.js
@@ -433,7 +433,7 @@ export default function MyApp({ Component, pageProps }) {
 
 > We use a [Custom App](/docs/advanced-features/custom-app.md) (`pages/_app.js`) for this example to subscribe to the event because it's not unmounted on page navigations, but you can subscribe to router events on any component in your application.
 
-Router events should be registered when a component mounts ([useEffect](https://reactjs.org/docs/hooks-effect.html) or [componentDidMount](https://reactjs.org/docs/react-component.html#componentdidmount) / [componentWillUnmount](https://reactjs.org/docs/react-component.html#componentwillunmount)) or imperatively when an event happens.
+Router events should be registered when a component mounts ([useEffect](https://react.dev/reference/react/useEffect) or [componentDidMount](https://react.dev/reference/react/Component#componentdidmount) / [componentWillUnmount](https://react.dev/reference/react/Component#componentwillunmount)) or imperatively when an event happens.
 
 If a route load is cancelled (for example, by clicking two links rapidly in succession), `routeChangeError` will fire. And the passed `err` will contain a `cancelled` property set to `true`, as in the following example:
 

docs/basic-features/data-fetching/get-server-side-props.md

@@ -14,7 +14,7 @@ export async function getServerSideProps(context) {
 }
 ```
 
-> Note that irrespective of rendering type, any `props` will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://reactjs.org/docs/react-dom.html#hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
+> Note that irrespective of rendering type, any `props` will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://react.dev/reference/react-dom/hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
 
 ## When does getServerSideProps run
 

docs/basic-features/data-fetching/get-static-props.md

@@ -14,7 +14,7 @@ export async function getStaticProps(context) {
 }
 ```
 
-> Note that irrespective of rendering type, any `props` will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://reactjs.org/docs/react-dom.html#hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
+> Note that irrespective of rendering type, any `props` will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://react.dev/reference/react-dom/hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
 
 ## When should I use getStaticProps?
 

docs/basic-features/layouts.md

@@ -87,7 +87,7 @@ When navigating between pages, we want to *persist* page state (input values,
 
 This layout pattern enables state persistence because the React component tree is maintained between page transitions. With the component tree, React can understand which elements have changed to preserve state.
 
-> **Note**: This process is called [reconciliation](https://reactjs.org/docs/reconciliation.html), which is how React understands which elements have changed.
+> **Note**: This process is called [reconciliation](https://react.dev/learn/preserving-and-resetting-state), which is how React understands which elements have changed.
 
 ### With TypeScript
 

docs/basic-features/pages.md

@@ -8,7 +8,7 @@ description: Next.js pages are React Components exported in a file in the pages
 >
 > [Learn more about incrementally adopting `app/`](https://beta.nextjs.org/docs/upgrade-guide).
 
-In Next.js, a **page** is a [React Component](https://reactjs.org/docs/components-and-props.html) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory. Each page is associated with a route based on its file name.
+In Next.js, a **page** is a [React Component](https://react.dev/learn/your-first-component) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory. Each page is associated with a route based on its file name.
 
 **Example**: If you create `pages/about.js` that exports a React component like below, it will be accessible at `/about`.
 

docs/guides/building-forms.md

@@ -217,9 +217,9 @@ If you submit this form, it will submit the data to the forms API endpoint `/api
 
 ## Part 4: Configuring Forms in Next.js
 
-You have created a Next.js API Route for form submission. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://reactjs.org/docs/introducing-jsx.html)).
+You have created a Next.js API Route for form submission. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://react.dev/learn/writing-markup-with-jsx)).
 
-Here's the same form in a [React function component](https://reactjs.org/docs/components-and-props.html) written using [JSX](https://reactjs.org/docs/introducing-jsx.html).
+Here's the same form in a [React function component](https://react.dev/reference/react/Component) written using [JSX](https://react.dev/learn/writing-markup-with-jsx).
 
 ```js
 export default function Form() {

docs/migrating/from-create-react-app.md

@@ -75,7 +75,7 @@ if (typeof window !== 'undefined') {
 }
 ```
 
-A recommended way of accessing Web APIs safely is by using the [`useEffect`](https://reactjs.org/docs/hooks-effect.html) hook, which only executes client-side:
+A recommended way of accessing Web APIs safely is by using the [`useEffect`](https://react.dev/reference/react/useEffect) hook, which only executes client-side:
 
 ```jsx
 import { useEffect } from 'react'

docs/routing/shallow-routing.md

@@ -40,7 +40,7 @@ export default Page
 
 The URL will get updated to `/?counter=10`. and the page won't get replaced, only the state of the route is changed.
 
-You can also watch for URL changes via [`componentDidUpdate`](https://reactjs.org/docs/react-component.html#componentdidupdate) as shown below:
+You can also watch for URL changes via [`componentDidUpdate`](https://react.dev/reference/react/Component#componentdidupdate) as shown below:
 
 ```jsx
 componentDidUpdate(prevProps) {

errors/client-side-exception-occurred.md

@@ -10,5 +10,5 @@ Add error boundaries in your React tree to gracefully handle client-side errors
 
 ### Useful Links
 
-- [Error Boundaries Documentation](https://reactjs.org/docs/error-boundaries.html)
+- [Error Boundaries Documentation](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)
 - [Custom Error Page Documentation](https://nextjs.org/docs/advanced-features/custom-error-page#more-advanced-error-page-customizing)

errors/react-hydration-error.md

@@ -2,7 +2,7 @@
 
 #### Why This Error Occurred
 
-While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a [feature of React](https://reactjs.org/docs/react-dom.html#hydrate).
+While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a [feature of React](https://react.dev/reference/react-dom/hydrate).
 
 This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present.
 
@@ -88,5 +88,5 @@ It's possible you may have [Local Overrides enabled in Chrome devtools](https://
 
 ### Useful Links
 
-- [React Hydration Documentation](https://reactjs.org/docs/react-dom-client.html#hydrateroot)
+- [React Hydration Documentation](https://react.dev/reference/react-dom/client/hydrateRoot)
 - [Josh Comeau's article on React Hydration](https://www.joshwcomeau.com/react/the-perils-of-rehydration/)

examples/blog/pages/posts/pages.md

@@ -8,7 +8,7 @@ author: You
 
 # Next.js Pages
 
-In Next.js, a **page** is a [React Component](https://reactjs.org/docs/components-and-props.html) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory. Each page is associated with a route based on its file name.
+In Next.js, a **page** is a [React Component](https://react.dev/reference/react/Component) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory. Each page is associated with a route based on its file name.
 
 **Example**: If you create `pages/about.js` that exports a React component like below, it will be accessible at `/about`.
 

examples/with-graphql-react/README.md

@@ -1,6 +1,6 @@
 # Next.js example with [`graphql-react`](https://github.com/jaydenseric/graphql-react)
 
-[`graphql-react`](https://github.com/jaydenseric/graphql-react) is a [GraphQL](https://graphql.org) client for [React](https://reactjs.org) using modern [context](https://reactjs.org/docs/context) and [hooks](https://reactjs.org/docs/hooks-intro) APIs that is lightweight (< 3 KB [size limited](https://github.com/ai/size-limit)) but powerful; the first [Relay](https://facebook.github.io/relay) and [Apollo](https://apollographql.com/docs/react) alternative with server side rendering.
+[`graphql-react`](https://github.com/jaydenseric/graphql-react) is a [GraphQL](https://graphql.org) client for [React](https://reactjs.org) using modern [context](https://react.dev/learn/scaling-up-with-reducer-and-context) and [hooks](https://react.dev/learn/scaling-up-with-reducer-and-context) APIs that is lightweight (< 3 KB [size limited](https://github.com/ai/size-limit)) but powerful; the first [Relay](https://facebook.github.io/relay) and [Apollo](https://apollographql.com/docs/react) alternative with server side rendering.
 
 ## Deploy your own
 

examples/with-portals-ssr/README.md

@@ -1,6 +1,6 @@
 # Example with Server Side Rendered portals
 
-An example of Server Side Rendered React [Portals](https://reactjs.org/docs/portals.html) with [`@jesstelford/react-portal-universal`](https://www.npmjs.com/package/@jesstelford/react-portal-universal) and Next.js.
+An example of Server Side Rendered React [Portals](https://react.dev/reference/react-dom/createPortal) with [`@jesstelford/react-portal-universal`](https://www.npmjs.com/package/@jesstelford/react-portal-universal) and Next.js.
 
 ## Deploy your own
 

examples/with-portals/README.md

@@ -1,6 +1,6 @@
 # Example with portals
 
-This example show how to use the React [Portals](https://reactjs.org/docs/portals.html) feature with Next.js.
+This example show how to use the React [Portals](https://react.dev/reference/react-dom/createPortal) feature with Next.js.
 
 ## Deploy your own
 

examples/with-portals/components/Modal.js

@@ -16,7 +16,7 @@ export default function Modal() {
               <p>
                 This modal is rendered using{' '}
                 <a
-                  href="https://reactjs.org/docs/portals.html"
+                  href="https://react.dev/reference/react-dom/createPortal"
                   target="_blank"
                   rel="noopener noreferrer"
                 >

examples/with-sentry/pages/_error.js

@@ -8,7 +8,7 @@
  * See:
  *  - https://nextjs.org/docs/basic-features/data-fetching/overview
  *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
- *  - https://reactjs.org/docs/error-boundaries.html
+ *  - https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
  */
 
 import * as Sentry from '@sentry/nextjs'

packages/next-codemod/transforms/cra-to-next.ts

@@ -100,7 +100,7 @@ class CraTransform {
     if (indexContext.multipleRenderRoots) {
       fatalMessage(
         `Error: multiple ReactDOM.render roots in src/${this.indexPage}, migrate additional render roots to use portals instead to continue.\n` +
-          `See here for more info: https://reactjs.org/docs/portals.html`
+          `See here for more info: https://react.dev/reference/react-dom/createPortal`
       )
     }