如何在Next.js中正确处理pages/[...slug].tsx通配路由且不破坏内置功能

方案1：使用Next.js中间件（Middleware）拦截非法路径（推荐） #

在Pages Router中，中间件可在请求到达页面之前完成校验，彻底解决通配路由捕获所有请求的问题。

1. 在项目根目录创建middleware.ts文件（非pages目录下）
2. 编写逻辑：判断请求路径是否属于CMS合法文档路径，仅允许合法路径进入[...slug].tsx，其余路径直接放行。

示例代码：

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

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

  // 定义需要排除的核心路径：API路由、Next.js内部资源、静态文件等
  const excludedPaths = [
    '/api/',
    '/_next/',
    '/_error',
    '/favicon.ico',
    '/images/',
    '/styles/'
  ]

  // 检查是否为排除路径，是则直接放行
  const isExcluded = excludedPaths.some(path => pathname.startsWith(path))
  if (isExcluded) {
    return NextResponse.next()
  }

  // 校验当前路径是否为CMS合法文档路径（建议加缓存避免频繁请求CMS）
  const isValidSlug = await checkIfValidSlug(pathname)

  if (!isValidSlug) {
    // 非法路径重写到404页面
    return NextResponse.rewrite(new URL('/404', request.url))
  }

  // 合法路径放行到通配路由
  return NextResponse.next()
}

// 配置中间件生效范围：仅匹配非排除路径
export const config = {
  matcher: '/((?!api|_next|_error|favicon.ico|images|styles).*)',
}

// 模拟CMS路径校验函数（实际需对接CMS API并添加缓存）
async function checkIfValidSlug(pathname: string): Promise<boolean> {
  const res = await fetch(`https://your-cms-api.com/check-path?path=${encodeURIComponent(pathname)}`)
  return res.ok && (await res.json()).exists
}

优点：

• 从请求入口拦截，完全避免通配路由捕获非文档路径
• 不破坏ISR和getStaticProps原有逻辑
• 可通过缓存优化校验性能，减少CMS请求压力

缺点：

• 需要额外编写中间件逻辑
• 需设计合理的缓存策略避免性能瓶颈

方案2：优化getStaticProps校验逻辑，最小化异常行为 #

若暂时不想引入中间件，可优化[...slug].tsx中的getStaticProps逻辑，确保非法路径返回404，同时处理预加载问题。

示例代码：

// pages/[...slug].tsx
export async function getStaticProps({ params }: { params: { slug: string[] } }) {
  const slugPath = `/${params.slug.join('/')}`
  
  // 校验路径是否为CMS合法文档
  const isValid = await checkIfValidSlug(slugPath)
  
  if (!isValid) {
    // 返回notFound: true，Next.js自动渲染404页面
    return {
      notFound: true,
      revalidate: 60, // 可选：让ISR定时重新校验
    }
  }

  // 获取CMS文档数据
  const data = await fetchCMSContent(slugPath)

  return {
    props: { data },
    revalidate: 60, // ISR刷新间隔
  }
}

export async function getStaticPaths() {
  // 获取构建时已知的所有CMS文档路径
  const paths = await fetchAllCMSPaths()

  return {
    paths: paths.map(path => ({ params: { slug: path.slice(1).split('/') } })),
    fallback: true,
  }
}

// 组件渲染
export default function DocumentPage({ data }) {
  return <div>{data.content}</div>
}

同时优化Link组件使用：

• 确保所有指向CMS文档的Link仅使用已校验的合法路径
• 动态生成Link时，先校验路径合法性再渲染

优点：

• 无需额外配置，仅修改现有页面逻辑
• 保留ISR全部功能

缺点：

• 通配路由仍会捕获所有请求，仅在getStaticProps阶段返回404，存在少量无效请求进入页面逻辑
• 预加载非法路径时可能出现短暂加载状态，影响用户体验

方案3：利用next.config.js的rewrites规则过滤路径 #

若CMS文档路径有明确静态规律（如无特定前缀），可在next.config.js中配置rewrites，仅将合法路径转发到[...slug].tsx。

示例配置：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: '/[...slug]',
        // 仅转发非排除路径
        has: [
          {
            type: 'path',
            value: '/((?!api|_next|_error|favicon.ico).*)',
          },
        ],
      },
    ]
  },
}

局限性：仅能基于静态前缀过滤，无法动态校验CMS路径合法性，仅适用于文档路径与其他路由前缀完全不重叠的场景。

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