diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md index cf3122eb9fbd2d..4116f7bffb8989 100644 --- a/docs/data/joy/components/link/link.md +++ b/docs/data/joy/components/link/link.md @@ -112,9 +112,9 @@ In this situation, the Link will inherit the typographic level scale from its Ty The sections below explain how to integrate the Link component with third-party tools that have their own comparable component. -### Next.js +### Next.js Pages Router -Here is an example with the [Link component](https://nextjs.org/docs/api-reference/next/link) of Next.js: +Here is an example with the [Link component](https://nextjs.org/docs/pages/api-reference/components/link) of Next.js: ```js import NextLink from 'next/link'; diff --git a/docs/data/joy/customization/dark-mode/dark-mode.md b/docs/data/joy/customization/dark-mode/dark-mode.md index d05f67c9fda206..586e7fce0713bb 100644 --- a/docs/data/joy/customization/dark-mode/dark-mode.md +++ b/docs/data/joy/customization/dark-mode/dark-mode.md @@ -125,7 +125,7 @@ To [prevent the UI from flickering](/joy-ui/main-features/dark-mode-optimization ### Next.js Pages Router -To use the Joy UI API with a Next.js project, add the following code to the custom [`pages/_document.js`](https://nextjs.org/docs/advanced-features/custom-document) file: +To use the Joy UI API with a Next.js project, add the following code to the custom [`pages/_document.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-document) file: ```jsx import Document, { Html, Head, Main, NextScript } from 'next/document'; diff --git a/docs/data/material/experimental-api/css-theme-variables/migration.md b/docs/data/material/experimental-api/css-theme-variables/migration.md index 4e130d8c947214..9d7bf243912f0d 100644 --- a/docs/data/material/experimental-api/css-theme-variables/migration.md +++ b/docs/data/material/experimental-api/css-theme-variables/migration.md @@ -182,9 +182,9 @@ The `mode` is stored inside `CssVarsProvider` which handles local storage synchr The `getInitColorSchemeScript()` API prevents dark-mode flickering by returning a script that must be run before React. -### Next.js +### Next.js Pages Router -Place the script before `
` in your [`pages/_document.js`](https://nextjs.org/docs/advanced-features/custom-document): +Place the script before `
` in your [`pages/_document.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-document): ```jsx import Document, { Html, Head, Main, NextScript } from 'next/document'; diff --git a/docs/data/material/experimental-api/css-theme-variables/usage.md b/docs/data/material/experimental-api/css-theme-variables/usage.md index 9662a3c919820f..86a8b708c41fb6 100644 --- a/docs/data/material/experimental-api/css-theme-variables/usage.md +++ b/docs/data/material/experimental-api/css-theme-variables/usage.md @@ -124,7 +124,7 @@ Place `getInitColorSchemeScript()` before the `
` tag to prevent the dark ### Next.js Pages Router -Add the following code to the custom [`pages/_document.js`](https://nextjs.org/docs/advanced-features/custom-document) file: +Add the following code to the custom [`pages/_document.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-document) file: ```jsx import Document, { Html, Head, Main, NextScript } from 'next/document'; diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md index 41baf9c8fdca7d..8041f121878900 100644 --- a/docs/data/material/getting-started/support/support.md +++ b/docs/data/material/getting-started/support/support.md @@ -87,7 +87,7 @@ and + href="https://tidelift.com/solutions/schedule-demo?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=enterprise"> request a demo today. diff --git a/docs/data/material/guides/routing/routing.md b/docs/data/material/guides/routing/routing.md index 4b3d4ed26859b7..c7a1d7cb2430e3 100644 --- a/docs/data/material/guides/routing/routing.md +++ b/docs/data/material/guides/routing/routing.md @@ -101,7 +101,7 @@ const LinkBehavior = React.forwardRef((props, ref) => ( ### Next.js Pages Router -The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with Material UI. +The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI. - The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/-/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx) component. This component is unstyled and only responsible for handling the navigation. diff --git a/docs/src/modules/components/Link.tsx b/docs/src/modules/components/Link.tsx index 10929955f70781..e2784218dbe619 100644 --- a/docs/src/modules/components/Link.tsx +++ b/docs/src/modules/components/Link.tsx @@ -66,8 +66,8 @@ export type LinkProps = { } & Omit & Omit; -// A styled version of the Next.js Link component: -// https://nextjs.org/docs/api-reference/next/link +// A styled version of the Next.js Pages Router Link component: +// https://nextjs.org/docs/pages/api-reference/components/link const Link = React.forwardRef(function Link(props, ref) { const { activeClassName = 'active', diff --git a/examples/material-ui-nextjs-pages-router-ts/README.md b/examples/material-ui-nextjs-pages-router-ts/README.md index 2101e71b53d01a..729c2705bb6055 100644 --- a/examples/material-ui-nextjs-pages-router-ts/README.md +++ b/examples/material-ui-nextjs-pages-router-ts/README.md @@ -37,7 +37,7 @@ It includes `@mui/material` and its peer dependencies, including [Emotion](https ## The link component -The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI. +The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with MUI. More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js). ## What's next? diff --git a/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx b/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx index 7e69664bdc64a2..b1bae7492a447e 100644 --- a/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx +++ b/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx @@ -57,7 +57,7 @@ export type LinkProps = { Omit; // A styled version of the Next.js Link component: -// https://nextjs.org/docs/api-reference/next/link +// https://nextjs.org/docs/pages/api-reference/components/link const Link = React.forwardRef(function Link(props, ref) { const { activeClassName = 'active', diff --git a/examples/material-ui-nextjs-pages-router/README.md b/examples/material-ui-nextjs-pages-router/README.md index 51f4fa6a9eeb99..bd68ac872ba28f 100644 --- a/examples/material-ui-nextjs-pages-router/README.md +++ b/examples/material-ui-nextjs-pages-router/README.md @@ -38,7 +38,7 @@ If you prefer, you can [use styled-components instead](https://mui.com/material- ## The Link component -The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI. +The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with MUI. More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js). ## What's next? diff --git a/examples/material-ui-nextjs-pages-router/src/Link.js b/examples/material-ui-nextjs-pages-router/src/Link.js index 0d0eba9cdb0eef..bea600669a4fa1 100644 --- a/examples/material-ui-nextjs-pages-router/src/Link.js +++ b/examples/material-ui-nextjs-pages-router/src/Link.js @@ -53,7 +53,7 @@ NextLinkComposed.propTypes = { }; // A styled version of the Next.js Link component: -// https://nextjs.org/docs/api-reference/next/link +// https://nextjs.org/docs/pages/api-reference/components/link const Link = React.forwardRef(function Link(props, ref) { const { activeClassName = 'active', diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md index 632b1c5c0acdc8..ea442097116e35 100644 --- a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md +++ b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md @@ -37,6 +37,6 @@ It demonstrates what results after handling v5's breaking changes to the [theme] ## The Link component -Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link). +Next.js has [a custom Link component](https://nextjs.org/docs/pages/api-reference/components/link). The example folder provides adapters for usage with Material UI. You can find more information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js). diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/src/Link.tsx b/examples/material-ui-nextjs-ts-v4-v5-migration/src/Link.tsx index 6d23c00442e4e9..9783ebda346c9c 100644 --- a/examples/material-ui-nextjs-ts-v4-v5-migration/src/Link.tsx +++ b/examples/material-ui-nextjs-ts-v4-v5-migration/src/Link.tsx @@ -46,7 +46,7 @@ export type LinkProps = { Omit; // A styled version of the Next.js Link component: -// https://nextjs.org/docs/api-reference/next/link +// https://nextjs.org/docs/pages/api-reference/components/link const Link = React.forwardRef(function Link(props, ref) { const { activeClassName = 'active',