我有一个Nextjs应用程序，在每个页面上显示相同的导航栏。导航栏有一个fixed的位置。显示在主页上是正确的（写在index.tsx）。但当我点击一个新页面，新页面是隐藏在导航栏后面！
如果我删除fixed position属性，这个问题就会消失。但是我不能相信Nextjs不支持这样一个基本任务。
代码非常简单：

// _app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
        <Navbar />
        <Component {...pageProps} />
    </>
  );
}

export default MyApp;

// about.tsx

const About: NextPage = () => {
  return (
    <section>
      <h1>About</h1>
    </section>
  );
};

export default About 

// navbar.tsx
export default function Navbar() {
  const router = useRouter();
  return (
<nav className={styles.navbar}>
  <Link href="/">
    <Image
      src={icon.src}
      className={styles.logo}
      alt="logo"
      width={70}
      height={70}
    />
  </Link>
  <ul className={styles.list}>
    <li
      className={
        router.route === "/about" ? styles.listItemActive : styles.listItem
      }
    >
      <Link href="/about">About</Link>
    </li>
  </ul>
</nav>
  );
}

//navbar.module.css
.navbar {
  background-color: var(--dark);
  color: #fff;
  height: 80px;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  position: fixed;
  z-index: 999;
}

.logo {
  cursor: pointer;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.listItem {
  cursor: pointer;
}

.listItemActive {
  cursor: pointer;
  color: var(--red);
}

如何解决这个问题？