Skip to content

material-ui tabs with nextjs?

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">
              <Tab label="Timer"><Link href="timer" /> </Tab>
              <Tab label="Home" to="/" component={Link}  />

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


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

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