如何在nextjs中使用常用的导航栏标题

// components/Navbar.js
import Link from 'next/link';

const Navbar = () => {
  return (
    <nav>
      <div className="nav-container">
        <Link href="/">
          <a>网站标题</a>
        </Link>
        <ul className="nav-links">
          <li>
            <Link href="/about">
              <a>关于我们</a>
            </Link>
          </li>
          <li>
            <Link href="/services">
              <a>服务</a>
            </Link>
          </li>
          <li>
            <Link href="/contact">
              <a>联系我们</a>
            </Link>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

// pages/index.js
import Navbar from '../components/Navbar';

const HomePage = () => {
  return (
    <div>
      <Navbar />
      <h1>欢迎来到首页</h1>
    </div>
  );
};

export default HomePage;

/* styles/globals.css */
nav {
  background-color: #333;
  color: white;
  padding: 1rem 0;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-links a {
  color: white;
  text-decoration: none;
  margin: 0 1rem;
}

.nav-links a:hover {
  text-decoration: underline;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

<Link href="/about">
  <a>关于我们</a>
</Link>