Next.js博客项目中Link组件跳转404问题求助

1. 确认路由模式与页面文件规则 #

Next.js分App Router（13+默认）和Pages Router两种路由模式，页面文件的存放规则完全不同：

• App Router：所有路由页面必须放在app目录下，且命名为小写的page.tsx。比如/about路径对应app/about/page.tsx，不能直接把about.tsx放在app根目录。
• Pages Router：路由页面必须放在pages目录下，文件名直接对应路径，比如/about对应pages/about.tsx，根路径对应pages/index.tsx。

如果你的about.tsx放在了components或其他非路由目录，Next.js不会将其识别为可访问页面，必然返回404。

2. 检查Link组件的导入与路径 #

• 无论哪种模式，Link组件都从next/link导入，不要写错导入路径。
• 路径大小写严格匹配：类Unix系统（macOS/Linux）下Next.js区分文件名大小写，比如href="/About"会找不到app/about/page.tsx，必须写成href="/about"。
• 避免相对路径错误：嵌套路由需确保路径对应，比如/blog/post要对应app/blog/post/page.tsx（App Router）或pages/blog/post.tsx（Pages Router）。

3. 验证页面文件命名 #

• App Router下，页面文件必须是小写page.tsx，如果你的根页面是大写Page.tsx，访问/会返回404。
• Pages Router下，根页面必须是index.tsx，若用Page.tsx替代，根路径会无法访问。

4. 重启开发服务器 #

修改目录结构或页面文件名后，Next.js开发服务器不会自动检测变化，必须重启npm run dev或yarn dev，否则新路由不会生效。

5. 检查next.config.js的路由配置 #

如果next.config.js中配置了rewrites、redirects或trailingSlash，可能干扰路由匹配：

• 开启trailingSlash: true后，路径需写成/about/而非/about；
• 排查rewrites规则是否将/about重定向到了不存在的路径。

结合你的代码示例排查 #

假设你的Intro.tsx中Link代码如下：

import Link from 'next/link';

export default function Intro() {
  return (
    <header>
      <Link href="/">首页</Link>
      <Link href="/about">关于</Link>
    </header>
  );
}

对应检查：

• 用App Router：确认存在app/page.tsx（根页面）和app/about/page.tsx（关于页面）；
• 用Pages Router：确认存在pages/index.tsx（根页面）和pages/about.tsx（关于页面）。

若以上都没问题，打开浏览器开发者工具的网络面板，查看404请求的完整URL，确认是否和预期路径一致，排除路由嵌套或basePath的影响。

内容的提问来源于stack exchange，提问作者Andrea Lopez Bravo