Next.js 13.2.3中_app布局导航时Navbar重复加载问题求助

问题出在你用了原生的<a>标签做页面跳转——这会触发浏览器的全页刷新，导致整个应用（包括Navbar）重新加载，而不是Next.js的客户端无刷新导航。

Next.js提供了专门的Link组件来实现客户端路由跳转，它会拦截默认的浏览器跳转行为，只更新页面内容部分，不会重新渲染整个布局组件（比如Navbar）。

具体修改步骤 #

1. 在你的Navbar组件中导入Next.js的Link组件：

import Link from 'next/link';

2. 把原来的<a>标签替换成<Link>组件：

// 原来的代码
<div className={styles.item}><a href={'/about'}>about</a></div>

// 修改后的代码
<div className={styles.item}>
  <Link href="/about">about</Link>
</div>

补充说明 #

你当前的页面级布局逻辑是可行的：如果某个页面不需要显示Navbar，只需要给该页面组件定义getLayout方法，覆盖默认的布局即可，比如首页：

export default function Home() {
  return <div>首页内容</div>;
}

// 自定义布局：直接返回页面本身，不包裹带Navbar的Layout
Home.getLayout = (page) => page;

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