material-ui tabs with nextjs?

Question

I have a project in material-ui, nextjs and typescript. I'm trying to get my navbar to work with nextjs:

import * as React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Link from "next/link";
import {Tab, Tabs} from "@material-ui/core";

export default function NavBar() {
  return (
        <AppBar position="static">
          <Tabs>
              <Tab label="Timer"><Link href="timer" /> </Tab>
              <Tab label="Home" to="/" component={Link}  />
          </Tabs>
        </AppBar>
  );
}

But it causes the build to fail. Is there something I'm missing?

Answer 1

In this case, I believe you want to wrap the <Tab /> elements with the <Link /> ones.

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

Answer 2

This might be better for SEO:

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

Reason is because Link doesn't add href to the child (even if it's an a component). passHref forces this, but preventDefault can't be put onClick as mentioned in the MUI docs as it won't change the URL.