Next.js App Router：根级兜底动态路由无冲突实现方案

问题回顾 #

你在开发电商应用时遇到了路由冲突问题：

• 根级非可选兜底路由[...slug]会覆盖/users/[id]这类特定动态路由
• 根级可选兜底路由[[...slug]]会匹配根路由/，导致app/page.tsx无法正常访问

需求是同时保留根路由、/users/[id]路由，以及根级的多级兜底路由（如/electronics/mobiles/iphone）。

核心解决方案：利用Next.js路由优先级规则 #

Next.js App Router的路由匹配遵循最具体优先的原则，优先级从高到低为：

1. 静态路由段（如/users）
2. 动态路由段（如/users/[id]）
3. 非可选兜底路由（如[...slug]）
4. 可选兜底路由（如[[...slug]]）

只要路由结构正确，非可选兜底路由[...slug]不会覆盖/users/[id]——因为/users是明确的静态路由段，优先级高于动态兜底路由。

正确的路由结构 #

app/
├─ page.tsx                # 根路由 /
├─ users/
│  └─ [id]/
│     └─ page.tsx          # /users/[id]
└─ [...slug]/
   └─ page.tsx             # 兜底路由，匹配所有未被其他路由覆盖的路径

路由匹配验证 #

• 访问/ → 命中app/page.tsx
• 访问/users/123 → 命中app/users/[id]/page.tsx（优先匹配明确的users段）
• 访问/electronics/mobiles/iphone → 命中app/[...slug]/page.tsx
• 访问任意未定义的多级路径（如/books/fiction） → 命中兜底路由

若仍存在冲突的处理方法 #

如果因Next.js版本较低或特殊场景导致路由匹配异常，可以通过Middleware手动拦截路由：

1. 在项目根目录创建middleware.ts：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl

  // 放行根路由和/users/开头的路由
  if (pathname === '/' || pathname.startsWith('/users/')) {
    return NextResponse.next()
  }

  // 其他路径交给兜底路由处理
  return NextResponse.rewrite(new URL('/[...slug]', request.url))
}

// 指定middleware生效的路径
export const config = {
  matcher: ['/:path*'],
}

避免冗余路由的技巧 #

无需手动创建多级嵌套动态路由（如/[category]/[subcategory]/[product]），直接在[...slug]/page.tsx中解析slug数组即可处理不同层级的路径：

// app/[...slug]/page.tsx
export default function CatchAllPage({ params }: { params: { slug: string[] } }) {
  const [category, subcategory, product] = params.slug

  // 根据slug数组长度处理不同层级的页面
  if (params.slug.length === 1) {
    return <div>分类页面：{category}</div>
  } else if (params.slug.length === 2) {
    return <div>子分类页面：{category} > {subcategory}</div>
  } else if (params.slug.length === 3) {
    return <div>商品详情页：{product}</div>
  }

  return <div>404 页面</div>
}

关键注意事项 #

• 确保app/users/[id]/page.tsx的路由结构正确，不要将users目录放在[...slug]目录下
• 升级到最新稳定版的Next.js，避免旧版本的路由匹配bug
• 不要同时使用根级的[...slug]和[[...slug]]，否则会导致路由混乱

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