解决Next.js Link导航404错误：理解Pages路由目录结构

本文旨在解决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。

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

28

查看详情

正确的Pages Router目录结构应如下所示：

--your-nextjs-project/
  ----pages/              <-- 路由文件应该直接放在这里
    ------api/            <-- API路由（可选）
    ------component/      <-- 您可以把组件放在这里，但它不会被视为路由
      --------Navbar.js
    ------login.js        <-- 对应 /login 路由
    ------index.js        <-- 对应 / 根路由
  ----public/             <-- 静态资源
  ----styles/             <-- 全局样式
  ----next.config.js
  ----package.json
  ----...

具体操作步骤：

1. 移动pages目录： 将您当前项目中的app/pages目录移动到项目的根目录。
2. 移除或重命名多余的app目录： 如果根目录下的app目录不再用于App Router，请将其移除或重命名，以避免与Pages Router产生混淆。
3. 调整文件路径引用： 如果您在其他文件中引用了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应用能够正确地进行页面路由。

以上就是解决Next.js Link导航404错误：理解Pages路由目录结构的详细内容，更多请关注php中文网其它相关文章！