本文旨在解决next.js应用中使用`next/link`组件进行页面导航时出现的404错误。核心问题通常源于`pages`目录的错误放置，即将其嵌套在非根目录（如`app`目录）中，导致next.js无法正确识别路由。教程将详细解释next.js路由机制，并提供正确的目录结构配置方法，确保`next/link`能够正常工作。
理解Next.js的路由机制与目录结构
Next.js提供了两种主要的路由方式：Pages router（页面路由）和app Router（应用路由）。这两种路由方式对项目目录结构有严格的要求，如果目录结构不符合规范，即使使用正确的next/link组件，也可能导致页面无法找到（404错误）。
在Pages Router模式下，Next.js会查找项目根目录下的pages文件夹来定义路由。文件夹内的每个.js、.jsx、.ts或.tsx文件都将自动成为一个路由。例如，pages/login.js会对应/login路径。
如果您的项目目录结构将pages目录嵌套在另一个顶级目录（例如app目录）中，Next.js可能会误解您的意图。特别是在Next.js 13及更高版本中，如果项目根目录下存在app目录，Next.js会优先将其识别为App Router的入口，从而忽略嵌套在其中的pages目录，导致Pages Router的路由失效。
常见问题场景分析
假设您的项目结构如下：
--app ----pages ------component --------Navbar.js ------login.js ----global.css ----layout.js ----pages.js (此文件可能与pages目录混淆，此处假设为项目根文件)
在这种结构中，您可能在Navbar.js组件中使用了next/link来导航到/login页面：
// components/Navbar.js (假设在 pages/component/Navbar.js) 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> {/* 导航到 /login 路径 */} <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> ) }
尽管Link组件的href属性指向了正确的路径/login，但由于login.js文件位于app/pages/login.js，而不是项目根目录下的pages/login.js，Next.js的Pages Router无法识别这个路由，从而导致访问/login时出现404错误。
解决方案：调整Pages Router的目录结构
解决这个问题的关键是确保pages目录位于项目的根级别。如果您的项目旨在采用Pages Router，那么任何顶级的app目录都应该被移除或重命名，除非您明确打算使用App Router。
正确的Pages Router目录结构应如下所示：
--your-nextjs-project/ ----pages/ <-- 路由文件应该直接放在这里 ------api/ <-- API路由（可选） ------component/ <-- 您可以把组件放在这里，但它不会被视为路由 --------Navbar.js ------login.js <-- 对应 /login 路由 ------index.js <-- 对应 / 根路由 ----public/ <-- 静态资源 ----styles/ <-- 全局样式 ----next.config.js ----package.json ----...
具体操作步骤：
- 移动pages目录： 将您当前项目中的app/pages目录移动到项目的根目录。
- 移除或重命名多余的app目录： 如果根目录下的app目录不再用于App Router，请将其移除或重命名，以避免与Pages Router产生混淆。
- 调整文件路径引用： 如果您在其他文件中引用了app/pages下的组件或模块，请更新这些引用路径以反映新的结构。例如，如果Navbar.js现在位于pages/component/Navbar.js，并且您在其他页面中导入它，则导入路径可能需要更新。
完成上述调整后，您的项目结构应类似于：
--your-nextjs-project/ ----pages/ ------component/ --------Navbar.js ------login.js ----global.css ----layout.js (如果它不是App Router的一部分，可能需要重新考虑其位置或作用) ----pages.js (如果这个文件是项目根目录下的一个文件，它可能与pages目录命名冲突，请检查其用途)
注意事项：
- 重启开发服务器： 在修改了文件结构后，务必停止并重新启动Next.js开发服务器（通常是运行npm run dev或yarn dev），以便Next.js能够重新扫描并识别新的路由结构。
- App Router与Pages Router的共存： Next.js 13及更高版本支持App Router和Pages Router共存，但它们有各自的路由优先级和约定。如果根目录下同时存在app和pages目录，app目录下的路由通常会优先处理。如果您打算使用Pages Router，请确保pages目录在根目录下，并且没有其他目录结构导致混淆。
- href属性： 在next/link中，href属性通常应使用相对于根目录的绝对路径（例如/login）或相对于当前路由的相对路径。在本例中，/login是正确的。
总结
Next.js的路由系统对文件目录结构高度敏感。当使用next/link进行页面导航时遇到404错误，首先应检查pages目录是否直接位于项目的根目录下。不正确的目录嵌套是导致Pages Router无法识别路由的常见原因。通过将pages目录放置在项目根级别并移除任何可能引起混淆的顶级目录，可以有效解决next/link导航至404页面的问题，确保您的Next.js应用能够正确地进行页面路由。