Next.js中Link组件href失效，点击跳转出现404页面未找到问题

核心原因 #

Next.js的路由系统基于文件结构生成，Link组件的href属性需要指向路由路径，而非文件的相对路径或完整文件名。你当前写的./Register.js是文件路径，不符合Next.js的路由规则，因此触发404错误。

具体修复步骤 #

1. 确认文件结构

   • 若使用Pages Router：确保Register.js放在pages目录下（如pages/Register.js），对应的路由路径为/Register；若文件名改为小写register.js，路由则为/register。
   • 若使用App Router：需在app目录下创建register文件夹，内部放置page.js（如app/register/page.js），对应的路由路径为/register。

2. 修正Link的href属性
   将代码中的href="./Register.js"替换为对应的路由路径，示例如下：

   <Link
     href="/register"
     className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
   >
     Register now
   </Link>
   

   注意：

   • 无需添加.js后缀，也不需要./这类相对路径前缀，直接使用以/开头的绝对路径更稳定。
   • Pages Router下，路由路径的大小写需与文件名匹配，建议统一使用小写文件名和路由路径，避免不必要的问题。

额外验证点 #

若修改后仍出现404，检查：

• 文件是否存在拼写错误（如Regsiter.js这类笔误）。
• 开发服务器是否已重启（新增文件后有时需重启才能识别路由）。

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