BottomNavigationAction with next js not working correctly

Nextjs has a custom Link component https://nextjs.org/docs/api-reference/next/link

With which it manages the links from the server with a <a href=’’> tag for SEO, but from the client as if it were an onclick, in this way you get seo on the server and performance from the client.

To integrate the link of nextjs with material-ui I have been able to do it in the following way.

import Link from "next/link";
import { Button } from "@material-ui/core";
import { List, ListItem, ListItemText } from "@material-ui/core";

<Link href="/about" passHref>
  <Button component="a">About</Button>
</Link>

<List component="nav">
  <Link href="/about" passHref>
   <ListItem button component="a">
      <ListItemText>About</ListItemText>
   </ListItem>
  </Link>
</List>

But when using the Bottom Navigation component of material ui, using the above logic to add the nextjs link, then the links work, but the values stop working, therefore, it no longer detects the page you are on.

<BottomNavigation
  showLabels
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
>
<Link href="/recents" passHref>
  <BottomNavigationAction component="a" label="Recents" value="recents" icon={<RestoreIcon />} />
</Link>
<Link href="/favorites" passHref>
  <BottomNavigationAction component="a" label="Favorites" value="favorites" icon={<FavoriteIcon />} />
</Link>
</BottomNavigation>

The only way I’ve gotten it to work with Link in nextjs is as follows:

import { useRouter } from "next/router";

const router = useRouter();
const onLink = (href) => {
  router.push(href);
};

<BottomNavigation
  showLabels
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
>
<BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />}  onClick={() => onLink("/recents")}/>
<BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} onClick={() => onLink("/favorites")}/>
</BottomNavigation>

But this way only works on the client, therefore it generates a problem with SEO, by not rendering the link on the server.

Does anyone have any solutions? An example would be appreciated.

[oliviertassinari]

Duplicate of #26152

[oliviertassinari]

@xaiborweb See https://next.material-ui.com/guides/routing/