在本例中，我认为您希望用<Link />元素 Package <Tab />元素。

<Tabs>
    <Link href="/timer" passHref>
      <Tab label="Timer" />
    </Link>
    <Link href="/" passHref>
      <Tab label="Home" />
    </Link>
</Tabs>

其他解决方案基本上是将Next.js的Link Package 在MUI的Tab周围，这可能破坏了Tabs和Tab之间的兼容性。
为什么不设置Link的样式以填充整个Tab？MUI v5的代码：

<Tab
  onClick={(event) => {
    event.preventDefault()
  }}
  label={
    <Link href={opt['href']} passHref>
      <Typography
        component="a"
        sx={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        }}
      >
        {opt['label']}
      </Typography>
    </Link>
  }
  value={opt['value']}
/>

这可能是更好的搜索引擎优化：

<Link href="/timer" passHref>
  <Tab component="a" label="Timer" />
</Link>

原因是Link不会将href添加到子组件中（即使它是a组件）。passHref强制执行此操作，但preventDefault不能像MUI文档中提到的那样放置为onClick，因为它不会更改URL。

保留所有MUI样式

import Link from "next/link";
import {Tab} from "@mui/material";
import {forwardRef} from "react";

const LinkTab = forwardRef(({href, ...rest}, ref) => (
  <Link href={href} passHref ref={ref}>
    <Tab component="a" {...rest}/>
  </Link>
))

export default LinkTab

以下是直接来自MUI v.5的示例。
https://codesandbox.io/s/d2dco?file=/demo.tsx
创建LinkTab组件：

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

interface LinkTabProps {
  label?: string;
  href?: string;
}

function LinkTab(props: LinkTabProps) {
  return (
    <Tab
      component="a"
      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
        event.preventDefault();
      }}
      {...props}
    />
  );
}

用法：

<LinkTab label="register" href="/register" />
   <LinkTab label="login" href="/login" />

但老实说，<Tab label="login" href="/login" />只是为我工作