如何在NextJS路由中创建带前缀的动态URL

直接按你想要的方式来就行，Next.js支持这种带固定前缀的动态路由命名，具体操作如下：

• 在pages目录下创建blogs-[slug].js文件，这个文件会自动匹配www.example.com/blogs-<slug>格式的URL
• 同样在pages目录下创建product-[slug].js文件，对应匹配www.example.com/product-<slug>格式的URL

获取动态参数的示例 #

在这两个文件里，你可以通过Next.js的路由工具获取slug参数，比如客户端组件的写法：

import { useRouter } from 'next/router'

export default function BlogDetail() {
  const router = useRouter()
  // 这里的slug就是URL中blogs-后面的部分
  const { slug } = router.query

  return <div>当前博客的slug是：{slug}</div>
}

如果用服务端渲染或者静态生成，也可以在getServerSideProps或getStaticProps里获取参数：

export async function getServerSideProps(context) {
  const { slug } = context.params
  // 这里可以用slug去获取对应的数据
  return {
    props: { slug }
  }
}

为什么不会出现拦截问题 #

Next.js的路由匹配是按照文件的命名结构精准匹配的：

• blogs-[slug].js只会匹配以blogs-开头的动态路径，不会和product-[slug].js的路径冲突
• 同时也不会影响你已有的blogs.js（对应/blogs）和products.js（对应/products）页面，因为这两个是精确匹配固定路径的路由

之前用catch all路由出现拦截，是因为[...slug].js会匹配所有未被其他路由匹配的路径，而这种带前缀的动态路由属于更精准的匹配规则，优先级比catch all高，所以不会出现互相拦截的情况。

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