MUI公式のコードにリンクをつけました。

前提

• next: 14.2.5
• mui/material: 5.16.4

コード

"use client";

import {
  Drawer,
  Link,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
} from "@mui/material";

const drawerWidth = 240;

const links = [
  { title: "Home", link: "/" },
  { title: "Blog", link: "/blog" },
];

export default function SideBar() {
  return (
    <Drawer
      variant="permanent"
      sx={{
        width: drawerWidth,
        flexShrink: 0,
        [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: "border-box" },
      }}
    >
      <List>
        {links.map((text, _index) => (
          <ListItem key={text.title} disablePadding>
            <ListItemButton>
              <Link href={text.link} underline="hover" color="inherit">
                <ListItemText primary={text.title} />
              </Link>
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Drawer>
  );
}