如何在Next.js中创建带连字符的动态URL？

你当前的文件夹结构是courses-demo目录下配置的子级动态路由，只能匹配/courses-demo/前缀后跟路径段的地址，无法匹配同层级前缀带-的动态路由，按照你使用的路由模式选择对应操作即可：

适用App Router（Next.js 13+ 默认模式） #

• 在app目录下直接创建名为[courseSlug:courses-demo-.+]的文件夹，正则约束会自动匹配所有首路径段以courses-demo-开头的请求
• 在文件夹内创建page.tsx作为页面入口，可通过组件入参的params.courseSlug获取完整的路径段值，执行params.courseSlug.replace('courses-demo-', '')即可提取到photography、web-development这类自定义动态名

示例代码：

// app/[courseSlug:courses-demo-.+]/page.tsx
export default function CoursePage({ params }: { params: { courseSlug: string } }) {
  const dynamicName = params.courseSlug.replace('courses-demo-', '')
  return <div>当前课程分类：{dynamicName}</div>
}

适用Pages Router #

方案1：使用正则动态路由 #

• 在pages目录下直接创建名为[courseSlug:courses-demo-.+].tsx的页面文件即可直接匹配目标格式的路由，动态值可通过useRouter().query.courseSlug获取

方案2：配置重写规则（兼容旧的嵌套目录结构） #

如果要保留你现有courses-demo下的目录结构不需要重构，直接在项目根目录的next.config.js中添加重写规则即可：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/courses-demo-:slug',
        destination: '/courses-demo/:slug',
      },
    ]
  },
}

module.exports = nextConfig

配置后所有/courses-demo-xxx的请求都会自动映射到你现有的courses-demo/[slug]路由上，原有逻辑不需要改动。

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