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

anauzrmj 于 12个月前发布在其他

关注(0)|答案(1)|浏览(168)

我们有以下URL结构：

www.example.com/blogs
www.example.com/products

字符串
这些工作正常，使用基于文件夹的路由，现在需要工作的URL：

www.example.com/blogs-<slug>
www.example.com/product-<slug>

型
我们尝试捕捉所有选项提供的nextjs和处理的意见使用条件，但只有一个网址是工作，因为第二个网址是由第一个路由处理。
我们需要的是

pages/product-[product_slug].js

型
我们如何才能做到这一点？

next.js

来源：https://stackoverflow.com/questions/77486337/how-to-create-prefixed-dynamic-urls-in-nextjs-routes

1条答案

按热度按时间

snvhrwxg1#

提出了基于中间件的解决方案。

export default async function middleware(req) {
  const { pathname } = req.nextUrl
 
  if (
    pathname.startsWith('/product-') || pathname.startsWith('/blogs-')
  ) {
    const regexp = '(product|blogs)-(.+)'
    const re = new RegExp(regexp, 'g')
    const matches = re.exec(pathname)
    req.nextUrl.pathname += matches[1]+'/'+matches[2]
    return NextResponse.redirect(req.nextUrl)
  }
}

字符串
这可能会有所改善，中间件匹配器，而不是检查代码中的路径名，但你应该得到它的要点。
然后使用匹配的/product/[slug]和blogs/[slug]路由。

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答