App目录下Next/Link跳转404问题：如何解决？

核心问题分析 #

你遇到的404是因为App Router的文件命名规则和传统Pages Router完全不同，同时错误配置了仅适用于Pages Router的pagesDir参数，导致路由识别混乱。

具体修复步骤 #

1. 按App Router规则创建Contact页面
   App Router要求页面文件必须命名为page.js（支持.jsx/.tsx后缀），且对应路由的文件夹结构要匹配：

   • 正确路径：src/app/contact/page.js
   • 错误路径：src/app/contact.js、src/app/contact/contact.js（这两种结构都不被App Router识别为有效页面）

2. 删除next.config.mjs中的错误配置
   pagesDir是Pages Router专属配置项，App Router不需要此配置，修改后的配置文件如下：

   const nextConfig = {
     // 移除pagesDir: './app'这一行
   }
   
   export default nextConfig;
   

3. 确认Link组件的正确性
   确保导入的是App Router版本的Link组件：

   import Link from 'next/link';
   

   你的NavBar组件中Link的用法本身没有问题，只要页面文件结构修正后就能正常跳转。

验证方式 #

修改完成后，重启Next.js开发服务器，访问/contact即可正常加载页面。

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