Next.js <Link>标签跳转出现404页面问题求助

问题原因 #

你使用的是Next.js v13+的App Router模式（无pages文件夹），该模式下路由规则和旧版Pages Router不同，未按规则创建对应页面文件导致404错误。

修复步骤 #

1. 创建About路由页面
   在项目根目录的app文件夹下，新建about子文件夹，然后在about文件夹内创建page.js文件，写入基础页面代码：

   export default function About() {
     return <div>About页面内容</div>
   }
   

2. 修正Link组件的路径写法
   App Router中Link的href推荐使用绝对路径（以/开头），确保路由指向准确，修改后的代码：

   import Link from 'next/link'
   export default function Home() {
     return (
       <>
         <div>
           <Link href='/about'>test</Link> &nbsp;
           <Link href='/about'>ABout</Link> &nbsp;
           <a href='/about'>anchor tag</a>
         </div>
       </>
     )
   }
   

   注：href='about'也可生效，但绝对路径更清晰，能避免嵌套路由场景下的路径歧义。

3. 重启开发服务器
   执行npm run dev重启项目，路由结构变更需要重启后才能被系统识别。

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