Next.js Link组件跳转页面404，页面路径及跳转写法求助

你的核心问题是混淆了Next.js两种路由系统的目录规则，导致页面无法被正确识别。以下是具体解决方案：

一、先理清路由规则 #

Next.js有两种路由模式：

• App Router：基于app目录，页面必须放在子文件夹中，且入口文件命名为page.js（或page.jsx），路由路径由文件夹名决定。
• Pages Router：基于根目录下的pages文件夹，文件名直接对应路由路径（比如pages/AboutUs.jsx对应/AboutUs）。

你现在把pages文件夹放在app目录下，既不符合App Router规则，也不是Pages Router的正确位置，所以路由无法匹配。

二、推荐解决方案：改用App Router规范（适配你当前的app目录结构） #

1. 调整页面文件结构
   • 把app/pages/Landing.jsx替换成app/page.js（根路由/默认对应app/page.js）
   • 创建app/about-us文件夹，把app/pages/AboutUs.jsx移动进去并改名为page.jsx，最终结构如下：

     app
     |   favicon.ico
     |   globals.css
     |   layout.js
     |   page.js  # 原Landing.jsx内容
     |
     ├───components
     |       footer.jsx
     |       Header.jsx
     ├───about-us
     |       page.jsx  # 原AboutUs.jsx内容
     

2. 修改Link组件的href

   <Link href="/about-us" >
        <p className={`pb-5 pl-5 cursor-pointer text-darksand opacity-50`}>About</p>
   </Link>
   

三、备选方案：使用Pages Router（不推荐混用） #

如果你坚持用Pages Router的命名方式，需要：

1. 把app/pages文件夹移动到项目根目录，结构变为：

   项目根目录
   |   app
   |   |   favicon.ico
   |   |   globals.css
   |   |   layout.js
   |   |   page.js
   |   ├───components
   |   |       footer.jsx
   |   |       Header.jsx
   |
   |   pages
   |       AboutUs.jsx
   |       Landing.jsx
   

2. 注意：此时根路由/会被app/page.js优先接管，如果你想让Landing.jsx作为首页，需要删除app/page.js，或者把Landing.jsx改名为pages/index.jsx。
3. Link组件的href保持/AboutUs即可。

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