Next.js同级拦截路由（.）无法正常工作的问题排查

1. 确认拦截路由的文件夹结构合规性 #

Next.js 拦截路由必须严格遵循命名规则：拦截路由需放在 (routes) 同级的 @[拦截标识] 文件夹下，且目标路由文件夹必须处于同一 (routes) 分组内。示例正确结构：

app/
├── (routes)/
│   ├── folder1/
│   ├── folder2/
│   └── @intercept-folder2/
│       └── folder2/
│           └── page.js
└── layout.js

检查你的 @[拦截标识] 文件夹是否和目标路由文件夹在同一个路由分组内，且拦截路由的路径和目标路由完全匹配。

2. 检查Link组件的跳转路径 #

确保Link组件指向的是目标路由本身，而非拦截路由路径。正确写法：

<Link href="/folder2">跳转到folder2</Link>

拦截路由是自动触发的，无需直接指定拦截路由的路径。

3. 验证拦截路由的页面组件导出 #

确认拦截路由下的 page.js/page.tsx 正确导出React组件，无语法错误：

// app/(routes)/@intercept-folder2/folder2/page.js
export default function InterceptedFolder2() {
  return <div>folder2 拦截路由页面</div>
}

4. 排查路由分组或布局冲突 #

如果使用了多路由分组，确保拦截路由和目标路由的分组一致；同时检查父布局是否覆盖了拦截路由的渲染逻辑，确认没有更高优先级的路由规则（如动态路由、catch-all路由）覆盖拦截路由。

5. 确认Next.js版本兼容性 #

拦截路由是Next.js 13+ App Router的特性，运行以下命令检查版本：

npm list next

若版本低于13.4，建议升级到最新稳定版：

npm install next@latest

6. 检查App Router是否启用 #

确保项目已配置使用App Router：根目录存在 app/ 文件夹，且 next.config.js 中未禁用App Router相关配置。

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