Next.js动态路由中如何组合静态字符串与动态slug？

Next.js Pages Router 原生不支持 something-[slug].jsx 这种「固定字符串+动态参数拼接在同一路由段」的文件命名规则，你自行测试未成功并非配置遗漏或用法错误，是框架本身的路由匹配逻辑就不支持该写法。

原生动态路由的匹配规则 #

Next.js 对动态路由的参数标记有明确约束：

• 动态参数标记（即被[]包裹的部分）必须完整占据两个路径分隔符/之间的完整路由段，不能和固定字符串混合写在同一个路由段内。
• 官方支持的动态路由命名仅包含三类：
  • 普通动态段：pages/blog/[slug].jsx，匹配/blog/xxx、/blog/yyy这类路径
  • 捕获所有段：pages/blog/[...slugs].jsx，匹配/blog/a/b/c这类多层路径
  • 可选捕获所有段：pages/blog/[[...slugs]].jsx，除了匹配多层路径外，还能匹配/blog本身

可行的替代实现方案 #

你可以通过以下两种方式实现「固定前缀+动态slug」的路由效果，地址栏展示效果和你预期的/something-xxx完全一致：

• 方案1：单段动态路由+路径校验
  直接在pages根目录创建pages/[fullPath].jsx文件，在数据获取阶段校验路径格式，不符合前缀规则的直接返回404：

  // pages/[fullPath].jsx
  export async function getServerSideProps(context) {
    const { fullPath } = context.params
    // 校验是否匹配something-前缀规则
    if (!fullPath.startsWith('something-')) {
      return { notFound: true }
    }
    // 提取前缀后的实际slug内容
    const realSlug = fullPath.slice('something-'.length)
    return {
      props: { realSlug }
    }
  }
  
  export default function SomethingPage({ realSlug }) {
    return <div>当前页面slug：{realSlug}</div>
  }
  

  如果使用静态生成（SSG），只需要在getStaticPaths里枚举所有符合something-xxx格式的路径即可。
• 方案2：配置重写规则映射路径
  在项目根目录的next.config.js中添加重写规则，把符合前缀规则的外部路径映射到内部独立的动态路由页面，不需要做额外的路径校验：

  // next.config.js
  module.exports = {
    async rewrites() {
      return [
        {
          source: '/something-:slug',
          destination: '/something/[slug]',
        },
      ]
    },
  }
  

  之后正常创建pages/something/[slug].jsx文件编写页面逻辑即可，用户访问时地址栏始终展示/something-xxx格式，不会暴露内部的实际路由结构。

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