使用Next.js Link组件跳转Login路由时出现404错误

问题原因 #

你的路由文件位置不符合Next.js App Router的规则，同时Link的路径写法也存在问题：

• App Router要求路由页面必须放在app/[路由名]/page.js的结构下，而你的login.js放在app/pages/login.js，这不是合法的路由路径。
• Link使用相对路径login，可能导致路径解析错误。

解决方案 #

1. 调整路由文件结构 #

把app/pages/login.js移动到app/login/page.js，调整后的目录结构如下：

--app
----login
------page.js
----pages
------component
--------Navbar.js
----global.css
----layout.js
----page.js

2. 修正Navbar中的Link路径 #

将Link的href改为绝对路径'/login'，修改后的Navbar代码：

import Link from "next/link";

export default function Navbar() {
    return (
        <div>
            <div className="flex flex-row bg-nav-bar-clr justify-between px-10 py-7">
                <h1 className="text-5xl font-extrabold italic text-klove">Klove</h1>
                <div className="flex gap-10">
                    <button className=" text-xl bg-signup-btn-clr px-8 py-2 rounded-3xl">Signup</button>
                    <Link href={'/login'} className="text-xl bg-login-btn-clr px-8 py-2 rounded-3xl">Login</Link>
                </div>
            </div>
            <div className="flex justify-evenly my-4">
                <h1 className="text-2xl">HOME</h1>
                <h1 className="text-2xl">ABOUT</h1>
                <h1 className="text-2xl">CONTACT</h1>
            </div>
        </div>
    )
}

补充说明 #

Next.js App Router的核心规则是：app目录下的每个子文件夹对应一个路由，文件夹内的page.js是该路由的入口组件。比如app/login/page.js会被识别为/login路由，这样Next.js才能正确匹配并渲染页面。

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