Next.js点击Link整页重渲染？如何实现布局固定局部更新？

核心问题几乎都是用了原生<a>标签跳转，而没有用Next.js专门的Link组件——原生标签会触发浏览器全页刷新，完全达不到单页应用局部切换内容的效果。按下面步骤排查修复：

1. 替换原生<a>为Next.js的Link组件 #

先从next/link导入组件，用它包裹导航链接，示例：

// app/Header.js
import Link from 'next/link';

export default function Header() {
  return (
    <nav>
      {/* 错误写法：会触发全页刷新 */}
      {/* <a href="/about">About</a> */}
      
      {/* 正确写法：仅切换主内容 */}
      <Link href="/">首页</Link>
      <Link href="/about">关于</Link>
    </nav>
  );
}

2. 确认RootLayout的结构正确 #

RootLayout是app目录下的根布局，所有页面都会继承它，必须把Header放在children之外，确保导航栏固定且不随页面切换重新渲染：

// app/layout.js
import Header from './Header';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body style={{ margin: 0 }}>
        <Header />
        {/* children 对应当前页面内容，切换页面时仅这里更新 */}
        <main style={{ padding: '20px' }}>{children}</main>
      </body>
    </html>
  );
}

3. 不要在单个页面里重复包裹Layout #

每个页面文件（比如app/page.js、app/about/page.js）只需要导出自身内容即可，不需要再套RootLayout，否则会导致布局嵌套或失效：

// app/page.js（首页）
export default function HomePage() {
  return <h1>首页内容</h1>;
}

// app/about/page.js（关于页）
export default function AboutPage() {
  return <h1>关于页面内容</h1>;
}

4. 检查路由路径是否匹配 #

确保页面文件的路径和Link的href对应：比如href="/about"必须对应app/about/page.js，路径不匹配的话，Next.js可能会fallback到404或触发不必要的刷新。

如果是用Pages Router（旧版），逻辑类似，只是根布局是pages/_app.js，Link用法完全一致。

内容的提问来源于stack exchange，提问作者raio