使用Next.js Link组件跳转/login页面出现404错误求助

核心原因排查 #

• 直接导致404的原因是项目中缺少对应/login路由的页面文件。Next.js的路由是基于文件系统的，不同路由体系的页面文件位置要求不同：
  • 若使用Pages Router（项目根目录有pages文件夹），/login路由对应pages/login.js/login.jsx/login.tsx文件；
  • 若使用App Router（项目根目录有app文件夹），/login路由对应app/login/page.js/page.jsx/page.tsx文件。

修复步骤 #

1. 创建Login页面文件
   根据你的路由体系创建对应文件，示例代码如下：

   • Pages Router（pages/login.js）：

     export default function Login() {
       return (
         <div className="p-8">
           <h1 className="text-2xl font-bold mb-4">登录页面</h1>
           {/* 在这里添加登录表单等业务代码 */}
         </div>
       );
     }
     

   • App Router（app/login/page.js）：

     export default function Login() {
       return (
         <div className="p-8">
           <h1 className="text-2xl font-bold mb-4">登录页面</h1>
           {/* 在这里添加登录表单等业务代码 */}
         </div>
       );
     }
     

2. 重启开发服务器
   Next.js有时不会自动检测新创建的页面文件，执行npm run dev重启服务，确保新路由被加载。

3. 校验路由匹配规则
   确认Link组件的href值与页面文件路径完全匹配（路由大小写敏感，比如/Login和/login是两个不同路由）。

额外优化建议 #

• 把导航栏里的Log out、Register链接也换成Next.js的Link组件，提升客户端导航效率：

  <li className="px-2 py-2 hover:cursor-pointer">
    <Link href="/logout" className="no-underline text-white hover:underline">Log out</Link>
  </li>
  <li className="px-2 py-2 hover:cursor-pointer">
    <Link href="/register" className="no-underline text-white hover:underline">Register</Link>
  </li>
  

  注意：这两个路由同样需要创建对应的页面文件，否则也会出现404。

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