本文旨在解决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
      --------N*bar.js
    ------login.js
  ----global.css
  ----layout.js
  ----pages.js (此文件可能与pages目录混淆，此处假设为项目根文件)

在这种结构中，您可能在N*bar.js组件中使用了next/link来导航到/login页面：

// components/N*bar.js (假设在 pages/component/N*bar.js)
import Link from "next/link";

export default function N*bar() {
    return (
        <div>
            <div className="flex flex-row bg-n*-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。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。 为创作者提供AI赋能

182 查看详情

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

--your-nextjs-project/
  ----pages/              <-- 路由文件应该直接放在这里
    ------api/            <-- API路由（可选）
    ------component/      <-- 您可以把组件放在这里，但它不会被视为路由
      --------N*bar.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下的组件或模块，请更新这些引用路径以反映新的结构。例如，如果N*bar.js现在位于pages/component/N*bar.js，并且您在其他页面中导入它，则导入路径可能需要更新。

完成上述调整后，您的项目结构应类似于：

--your-nextjs-project/
  ----pages/
    ------component/
      --------N*bar.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路由目录结构的详细内容，更多请关注其它相关文章！

# 更高  # 信息化网站建设方法  # 企业网站推广电话多少号  # 薛凡seo  # 开封网站建设专业定制  # 南湾外贸仿牌网站优化  # 江干关键词seo优化  # 唐山网站seo优化排名  # 慈东工业区网站建设方案  # 徐州网站推广威星hfqjwl下拉  # 任丘微型网站建设配置  # 相对于  # 您在  # 弹出  # css  # 重命名  # 放在  # 移除  # 将其  # 您的  # 关键词  # 常见问题  # 路由  # app  # npm  # json  # js 

相关栏目： 【 科技资讯46185 】 【 网络学院92790 】

相关推荐： 在Typer应用中优雅地处理和重组任意命令行参数  汽水音乐在线版入口_汽水音乐网页播放手册  俄罗斯搜索引擎Yandex指南 附2025年免登录官网入口  可靠CSGO开箱平台解析 CSGO开箱网合集  在Socket.IO连接中实现Access Token自动更新与动态重连  在J*a中如何开发在线活动报名与管理系统_活动报名管理项目实战解析  qq音乐在线播放入口_qq音乐电脑版登录链接  c++20的std::jthread是什么_c++可中断线程与RAII式管理  2026春节假期票务安排_2026春节放假购票指南  Node.js CSV 数据处理：基于字段值条件过滤整条记录的策略  12306选座如何查看座位示意图_12306座位示意图解读与使用  中兴BladeV30怎样用测距估书架层高_iPhone中兴BladeV30测距估书架层高【家装参考】  快速CSGO开箱网站指南 CSGO开箱平台推荐  css链接悬停下划线样式如何自定义_使用::after结合content和transition  魅族17怎样用浏览器译外语网页_iPhone魅族17浏览器译外语网页【即时翻译】  Win11怎么查看显卡显存 Win11显示适配器属性及专用视频内存查询  高德地图沿途添加点失败如何解决 高德多点规划方法  C++编译期如何执行复杂计算_C++模板元编程(TMP)技巧与应用  win11开机启动修复循环怎么办 Win11无法进入系统高级启动解决方法【修复】  晋江读书网页版在线登录 晋江读书电脑版官网  铁路12306的积分有效期是多久_铁路12306积分有效期说明  Windows10怎么开启夜间模式 Windows10系统设置调整色温与亮度缓解夜间用眼疲劳【教程】  composer的"require-dev"部分是用来做什么的？  Angular中单选按钮的正确使用与常见陷阱解析  Tabulator表格中精确实现日期时间排序的指南  Golang如何测试channel通信行为_Golang channel通信测试与分析方法  J*aScript中localStorage数据的获取、清洗与格式化教程  必由学登录入口 必由学官方网站在线访问链接  UC浏览器网页版登录入口官网 电脑版网址入口  包子漫画官方网站阅读入口-包子漫画在线漫画官网直达链接  在Go Martini框架中高效服务动态生成图像的实践指南  在FastAPI中利用lifespan与依赖注入高效管理Redis连接池  Python类型检查：优化关联可选属性的Mypy推断策略  如何有效阻止外部脚本意外修改内联样式的高度属性  Win11怎么隐藏桌面图标 Win11一键隐藏所有桌面元素及恢复显示  sublime如何优雅地处理行尾空格_sublime自动清理多余空白字符配置  AO3同人作品网入口 AO3搜索引擎官网永久地址  构建轻量级网站内部消息系统：Formspree 集成指南  Lar*el Excel导入时生成自定义递增ID的策略与实践  UC浏览器如何安装插件 UC浏览器添加扩展程序详细教程【进阶】  GemBox Document HTML转PDF垂直文本渲染问题及解决方案  马斯克：Optimus 人形机器人复数形式为 Optimi  React项目中导航栏Logo自适应布局：避免裁剪与布局溢出  在J*a中如何开发简易电子商务商品管理系统_商品管理系统项目实战解析  mc.js免安装版 mc.js一键畅玩入口  SteamMachine定价或为699美元 大家想入手吗？  小米Civi 4录制视频过暗_小米Civi 4亮度优化  CKEditor 5 自定义构建在React应用中渲染失败的调试与解决  Go语言中对Map值调用带指针接收者方法：原理与最佳实践  Go语言HTML解析：利用Goquery精准获取指定元素内容