NextJS 13中如何让NavBar始终渲染在页面顶部？

API 探路者

2026-8-14

Next13 布局渲染顺序问题

我正在构建一个Next13应用，新的Layout功能很实用，但渲染出现了问题，不太理解布局内元素的渲染顺序。

我的代码

"use client";
import Link from "next/link";

export default () => {
  return (
    <span className="flex justify-between">
      <h1 className="text-xl">Navigation Bar</h1>
      <ul className="flex gap-4">
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/user/login">Login</Link>
        </li>
        <li>
          <Link href="/user/signup">Sign Up</Link>
        </li>
      </ul>
    </span>
  );
};

layout.tsx

import "./globals.css";
import NavBar from "./NavBar";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html className="bg-slate-500 font-robslab" lang="en">
      <head>
        <title>Stylitique</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <header>
        <NavBar />
      </header>
      <body>{children}</body>
    </html>
  );
}

page.tsx（首页）

export default function Home() {
  return (
    <main>
      <h1 className="text-green-500">HOME</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
        sapiente, expedita praesentium a eligendi dolorem maiores nihil
        consectetur ipsum, repudiandae sed deserunt delectus, facere repellat
        ipsam sit possimus voluptatibus error!
      </p>
    </main>
  );
}