Skip to content

[docs][nextjs] Migrate from deprecated "legacyBehavior" prop #44871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 6, 2025
Merged

[docs][nextjs] Migrate from deprecated "legacyBehavior" prop #44871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 52 additions & 62 deletions docs/data/joy/getting-started/templates/TemplateCollection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }}>
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs-pages-router-ts/pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs-pages-router-ts/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
37 changes: 6 additions & 31 deletions examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />;
},
);

Expand All @@ -43,38 +30,28 @@ export type LinkProps = {

// A styled version of the Next.js 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 className = clsx(classNameProps, {
[activeClassName]: router.pathname === pathname && activeClassName,
});

const linkAs = linkAsProp || as;
const linkAs = linkAsProp || as || (href as string);
const nextjsProps = {
to: href,
linkAs,
replace,
scroll,
shallow,
prefetch,
locale,
};

if (noLinkStyle) {
Expand All @@ -91,5 +68,3 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
/>
);
});

export default Link;
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs-pages-router/pages/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs-pages-router/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
37 changes: 6 additions & 31 deletions examples/material-ui-nextjs-pages-router/src/Link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,58 +5,35 @@ 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:
// 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 className = clsx(classNameProps, {
[activeClassName]: router.pathname === pathname && activeClassName,
});

const linkAs = linkAsProp || as;
const linkAs = linkAsProp || as || href;
const nextjsProps = {
to: href,
linkAs,
replace,
scroll,
shallow,
prefetch,
locale,
};

if (noLinkStyle) {
Expand All @@ -73,5 +50,3 @@ const Link = React.forwardRef(function Link(props, ref) {
/>
);
});

export default Link;
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs-ts-v4-v5-migration/pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs-ts-v4-v5-migration/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Loading