[docs][nextjs] Migrate from deprecated prop

oliviertassinari · oliviertassinari · commit 944c155c65f5 · 2025-04-02T21:00:43.000+02:00
diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js
@@ -137,53 +137,48 @@ export default function TemplateCollection() {
                     '--template-name-dark': `center/cover no-repeat url(/static/screenshots/joy-ui/getting-started/templates/${template.name}-dark.jpg)`,
                   }}
                 />
-                <NextLink
+                <Link
                   href={`/joy-ui/getting-started/templates/${template.name}/`}
-                  passHref
-                  legacyBehavior
+                  tabIndex={-1}
+                  component={NextLink}
+                  overlay
+                  aria-hidden
+                  data-ga-event-category="joy-template"
+                  data-ga-event-label={template.name}
+                  data-ga-event-action="preview-img"
+                  sx={[
+                    (theme) => ({
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      flexDirection: 'column',
+                      gap: 1,
+                      transition: '0.15s',
+                      position: 'absolute',
+                      width: '100%',
+                      height: '100%',
+                      opacity: 0,
+                      top: 0,
+                      left: 0,
+                      bgcolor: `rgba(${theme.vars.palette.primary.lightChannel} / 0.3)`,
+                      backdropFilter: 'blur(4px)',
+                      '&:hover, &:focus': {
+                        opacity: 1,
+                      },
+                      [theme.getColorSchemeSelector('dark')]: {
+                        bgcolor: `rgba(${theme.vars.palette.primary.darkChannel} / 0.3)`,
+                      },
+                    }),
+                  ]}
                 >
-                  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                  <Link
-                    tabIndex={-1}
-                    overlay
-                    aria-hidden
-                    data-ga-event-category="joy-template"
-                    data-ga-event-label={template.name}
-                    data-ga-event-action="preview-img"
-                    sx={[
-                      (theme) => ({
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        flexDirection: 'column',
-                        gap: 1,
-                        transition: '0.15s',
-                        position: 'absolute',
-                        width: '100%',
-                        height: '100%',
-                        opacity: 0,
-                        top: 0,
-                        left: 0,
-                        bgcolor: `rgba(${theme.vars.palette.primary.lightChannel} / 0.3)`,
-                        backdropFilter: 'blur(4px)',
-                        '&:hover, &:focus': {
-                          opacity: 1,
-                        },
-                        [theme.getColorSchemeSelector('dark')]: {
-                          bgcolor: `rgba(${theme.vars.palette.primary.darkChannel} / 0.3)`,
-                        },
-                      }),
-                    ]}
+                  <Visibility />
+                  <Typography
+                    textColor="text.primary"
+                    sx={{ fontWeight: 'bold', fontFamily: 'IBM Plex Sans' }}
                   >
-                    <Visibility />
-                    <Typography
-                      textColor="text.primary"
-                      sx={{ fontWeight: 'bold', fontFamily: 'IBM Plex Sans' }}
-                    >
-                      View live preview
-                    </Typography>
-                  </Link>
-                </NextLink>
+                    View live preview
+                  </Typography>
+                </Link>
               </AspectRatio>
             </CardOverflow>
             <CardContent sx={{ display: 'flex', flexDirection: 'column' }}>
@@ -255,26 +250,21 @@ export default function TemplateCollection() {
                   gap: 1.5,
                 }}
               >
-                <NextLink
+                <Button
                   href={`https://github.com/mui/material-ui/tree/master/docs/data/joy/getting-started/templates/${template.name}`}
-                  passHref
-                  legacyBehavior
+                  component={NextLink}
+                  variant="outlined"
+                  color="neutral"
+                  fullWidth
+                  startDecorator={<CodeRoundedIcon />}
+                  aria-label="Source code"
+                  data-ga-event-category="joy-template"
+                  data-ga-event-label={template.name}
+                  data-ga-event-action="preview"
+                  sx={{ fontFamily: 'IBM Plex Sans' }}
                 >
-                  <Button
-                    component="a"
-                    variant="outlined"
-                    color="neutral"
-                    fullWidth
-                    startDecorator={<CodeRoundedIcon />}
-                    aria-label="Source code"
-                    data-ga-event-category="joy-template"
-                    data-ga-event-label={template.name}
-                    data-ga-event-action="preview"
-                    sx={{ fontFamily: 'IBM Plex Sans' }}
-                  >
-                    Source
-                  </Button>
-                </NextLink>
+                  Source
+                </Button>
                 <Button
                   variant="outlined"
                   color="neutral"
diff --git a/examples/material-ui-nextjs-pages-router-ts/pages/about.tsx b/examples/material-ui-nextjs-pages-router-ts/pages/about.tsx
@@ -3,7 +3,7 @@ import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Link from '../src/Link';
+import { Link } from '../src/Link';
 import ProTip from '../src/ProTip';
 import Copyright from '../src/Copyright';
 
diff --git a/examples/material-ui-nextjs-pages-router-ts/pages/index.tsx b/examples/material-ui-nextjs-pages-router-ts/pages/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import Link from '../src/Link';
+import { Link } from '../src/Link';
 import ProTip from '../src/ProTip';
 import Copyright from '../src/Copyright';
 
diff --git a/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx b/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
@@ -13,22 +13,9 @@ interface NextLinkComposedProps
 
 export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
   function NextLinkComposed(props, ref) {
-    const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } = props;
+    const { to, linkAs, ...other } = props;
 
-    return (
-      <NextLink
-        href={to}
-        prefetch={prefetch}
-        as={linkAs}
-        replace={replace}
-        scroll={scroll}
-        shallow={shallow}
-        passHref
-        locale={locale}
-        ref={ref}
-        {...other}
-      />
-    );
+    return <NextLink href={to} as={linkAs} ref={ref} {...other} />;
   },
 );
 
@@ -41,40 +28,33 @@ export type LinkProps = {
 } & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> &
   Omit<MuiLinkProps, 'href'>;
 
-// A styled version of the Next.js Link component:
+// A styled version of the Next.js Pages Router Link component:
 // https://nextjs.org/docs/pages/api-reference/components/link
-const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {
   const {
     activeClassName = 'active',
     as,
     className: classNameProps,
     href,
     linkAs: linkAsProp,
-    locale,
     noLinkStyle,
-    prefetch,
-    replace,
-    role, // Link don't have roles.
-    scroll,
-    shallow,
     ...other
   } = props;
 
   const router = useRouter();
-  const pathname = typeof href === 'string' ? href : href.pathname;
+  const pathname = typeof href === 'string' ? href : href?.pathname;
+  const routerPathname = router.pathname.replace('/[docsTab]', '');
+
+  const shouldBeActive = routerPathname === pathname;
+
   const className = clsx(classNameProps, {
-    [activeClassName]: router.pathname === pathname && activeClassName,
+    [activeClassName]: shouldBeActive && activeClassName,
   });
 
-  const linkAs = linkAsProp || as;
+  const linkAs = linkAsProp || as || (href as string);
   const nextjsProps = {
     to: href,
     linkAs,
-    replace,
-    scroll,
-    shallow,
-    prefetch,
-    locale,
   };
 
   if (noLinkStyle) {
@@ -91,5 +71,3 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
     />
   );
 });
-
-export default Link;
diff --git a/examples/material-ui-nextjs-pages-router/pages/about.js b/examples/material-ui-nextjs-pages-router/pages/about.js
@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import ProTip from '../src/ProTip';
-import Link from '../src/Link';
+import { Link } from '../src/Link';
 import Copyright from '../src/Copyright';
 
 export default function About() {
diff --git a/examples/material-ui-nextjs-pages-router/pages/index.js b/examples/material-ui-nextjs-pages-router/pages/index.js
@@ -3,7 +3,7 @@ import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import ProTip from '../src/ProTip';
-import Link from '../src/Link';
+import { Link } from '../src/Link';
 import Copyright from '../src/Copyright';
 
 export default function Index() {
diff --git a/examples/material-ui-nextjs-pages-router/src/Link.js b/examples/material-ui-nextjs-pages-router/src/Link.js
@@ -5,58 +5,38 @@ import NextLink from 'next/link';
 import MuiLink from '@mui/material/Link';
 
 export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) {
-  const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } = props;
+  const { to, linkAs, ...other } = props;
 
-  return (
-    <NextLink
-      href={to}
-      prefetch={prefetch}
-      as={linkAs}
-      replace={replace}
-      scroll={scroll}
-      shallow={shallow}
-      passHref
-      locale={locale}
-      ref={ref}
-      {...other}
-    />
-  );
+  return <NextLink href={to} as={linkAs} ref={ref} {...other} />;
 });
 
-// A styled version of the Next.js Link component:
+// 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) {
+export const Link = React.forwardRef(function Link(props, ref) {
   const {
     activeClassName = 'active',
     as,
     className: classNameProps,
     href,
     linkAs: linkAsProp,
-    locale,
     noLinkStyle,
-    prefetch,
-    replace,
-    role, // Link don't have roles.
-    scroll,
-    shallow,
     ...other
   } = props;
 
   const router = useRouter();
-  const pathname = typeof href === 'string' ? href : href.pathname;
+  const pathname = typeof href === 'string' ? href : href?.pathname;
+  const routerPathname = router.pathname.replace('/[docsTab]', '');
+
+  const shouldBeActive = routerPathname === pathname;
+
   const className = clsx(classNameProps, {
-    [activeClassName]: router.pathname === pathname && activeClassName,
+    [activeClassName]: shouldBeActive && activeClassName,
   });
 
-  const linkAs = linkAsProp || as;
+  const linkAs = linkAsProp || as || href;
   const nextjsProps = {
     to: href,
     linkAs,
-    replace,
-    scroll,
-    shallow,
-    prefetch,
-    locale,
   };
 
   if (noLinkStyle) {
@@ -73,5 +53,3 @@ const Link = React.forwardRef(function Link(props, ref) {
     />
   );
 });
-
-export default Link;
diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/pages/about.tsx b/examples/material-ui-nextjs-ts-v4-v5-migration/pages/about.tsx
@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { makeStyles } from '@mui/styles';
-import Link from '../src/Link';
+import { Link } from '../src/Link';
 import ProTip from '../src/ProTip';
 import Copyright from '../src/Copyright';
 
diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/pages/index.tsx b/examples/material-ui-nextjs-ts-v4-v5-migration/pages/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
-import Link from '../src/Link';
+import { Link } from '../src/Link';
 import ProTip from '../src/ProTip';
 import Copyright from '../src/Copyright';
 
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
diff --git a/packages/mui-docs/src/Link/Link.tsx b/packages/mui-docs/src/Link/Link.tsx
