Next.js Link组件跳转404问题求助：如何正确导航到ab组件

核心问题 #

你遇到的404错误，本质是Next.js无法找到对应/ab路由的页面组件，因为组件的存放路径不符合框架的路由规则。

具体解决方案 #

1. 按路由规则放置组件文件 #

Next.js的路由基于文件系统，分两种主流模式，对应不同的文件存放要求：

若使用Pages Router（Next.js 12及更早，或13+保留Pages Router）

• 必须把ab组件文件放到项目根目录的pages文件夹下，命名为ab.js（或pages/ab/index.js）。
• 正确路径示例：pages/ab.js，此时/ab路由会自动映射到该组件。

若使用App Router（Next.js 13+）

• 在项目根目录的app文件夹下创建ab子文件夹，再在其中新建page.js文件。
• 将你的ab组件代码复制到app/ab/page.js中，Next.js会自动识别/ab路由。

2. 修正组件命名（推荐） #

虽然小写组件名不会直接导致404，但遵循React组件大驼峰命名规范能避免潜在问题：

import React from 'react'

export default function Ab() {
  return (
    <div>
        <h1>Hello From component</h1>
    </div>
  )
}

3. 清除缓存重启服务 #

开发缓存可能导致路由不生效，执行以下操作：

• 关闭当前开发服务器（按Ctrl+C）。
• 删除项目根目录的.next文件夹。
• 重新启动服务：npm run dev 或 yarn dev。

验证 #

完成以上步骤后，点击Footer中的「Privacy Policy」链接，应该能正常加载ab组件内容，不再出现404错误。

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