看起来你遇到的是Next.js App Router模式下的路由约定问题，这是升级到13+版本后很容易踩的小坑，咱们一步步来解决：

问题根源 #

在Next.js的App Router规则里，每个路由对应的页面组件必须命名为page.jsx（或page.js），而你当前把登录、注册页面分别命名为Login.js和Register.js，不符合App Router的路由识别规范，所以点击链接时Next.js找不到对应的页面，直接返回404错误。

具体修复步骤 #

1. 重命名页面组件文件

   • 将src/app/login/Login.js重命名为src/app/login/page.jsx
   • 将src/app/register/Register.js重命名为src/app/register/page.jsx

2. 确认组件导出格式
   打开重命名后的文件，确保组件是默认导出的（你的Header组件已经用了这种格式，登录/注册组件应该也是类似写法，保持即可）。比如login/page.jsx的结构应该是：

   import React from 'react'
   
   const Login = () => {
     // 你的登录页面逻辑
     return <div>Login Page Content</div>
   }
   
   export default Login
   

3. 验证导航链接
   你Header里的链接写法完全正确，不需要修改：

   <Link href='/login' >Login</Link>
   <Link href='/register' className="bg-primary text-white rounded-full px-8 py-2">Register</Link>
   

   只要页面文件命名符合规则，路由就能正常匹配。

补充说明 #

App Router的核心逻辑是：每个路由路径对应app目录下的同名文件夹，文件夹内的page.jsx就是该路由的入口页面组件。比如/login路由对应app/login/page.jsx，这是Next.js 13+版本的标准配置方式，和旧版Pages Router的规则有明显区别。

备注：内容来源于stack exchange，提问作者MICAH KUTOTO