Next.js next/link初始加载失效及异常生效场景咨询

我正将React-Typescript项目迁移至Next.js以实现路由功能，使用next/link组件时，服务器启动后初始加载阶段路由无法正常工作，但刷新页面后恢复正常。

初始代码：

<div>
  <Link href='/page1' as={`/page1`}>
    <a>Page1</a>
  </Link>
  <p>Welcome to the page 2</p>
</div>

偶然将href='/page1'改为href='/'或href='/page'后代码恢复正常，修改后代码：

<div>
  <Link href='/' as={`/page1`}>
    <a>Page1</a>
  </Link>
  <p>Welcome to the page 2</p>
</div>

原理解释 #

核心原因在于Next.js中Link组件的href和as属性的分工逻辑：

• href：指定实际要加载的页面文件路径，必须对应pages目录下存在的文件（比如href='/'对应pages/index.tsx，href='/post/[id]'对应动态路由文件pages/post/[id].tsx）。Next.js在客户端初始加载时，会根据href预加载对应页面的代码chunk。
• as：仅作为浏览器地址栏显示的URL别名，用于美化路由，不会改变实际加载的页面文件。

初始代码失效的原因 #

你写的href='/page1'意味着Next.js需要预加载pages/page1.tsx对应的代码，但如果你的项目中不存在这个页面文件，或者/page1是通过自定义服务器、动态路由规则映射的路径（而非直接对应pages下的文件），客户端初始预加载时会找不到对应的chunk，导致点击Link时无法完成客户端导航，表现为路由失效。

而刷新页面时，请求会直接发送到服务器端，此时服务器端的路由规则（比如自定义server、动态路由的fallback配置）会处理/page1的请求，找到对应的页面组件渲染，所以能正常显示。

修改后生效的原因 #

将href改为/'后，Next.js会预加载pages/index.tsx的代码（这个文件肯定存在），当点击Link时，客户端直接使用预加载的根页面代码渲染，同时通过as='/page1'修改地址栏显示的URL，所以能正常完成导航。

注意：这种写法其实是一种“取巧”，如果你的/page1需要展示和根页面不同的内容，这种方式并不可行，正确的做法是让href指向实际对应的页面文件路径，比如如果/page1是动态路由，应该写成href='/[page]' as='/page1'，并确保pages/[page].tsx存在。

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