将Nextjs链接与另一个(功能)组件(类型)中的MUI链接或MUI按钮一起使用

// pages/index.js
import Link from 'next/link';
import { Button, Typography } from '@mui/material';

export default function Home() {
  return (
    <div>
      <Typography variant="h4">Welcome to My Next.js App</Typography>
      <Link href="/about" passHref>
        <Button variant="contained" color="primary">
          About Us
        </Button>
      </Link>
      <Link href="/contact" passHref>
        <a style={{ textDecoration: 'none', marginTop: 10 }}>
          <Button variant="outlined" color="secondary">
            Contact Us
          </Button>
        </a>
      </Link>
    </div>
  );
}

<Link href="/about" passHref>
  <Button variant="contained" color="primary">
    About Us
  </Button>
</Link>

<Button
  component={Link}
  href="/about"
  variant="contained"
  color="primary"
>
  About Us
</Button>