对于Next.js Dynamic Routes,是否可以将字符串与[slug]组合?

flvtvl50  于 2023-06-29  发布在  其他
关注(0)|答案(2)|浏览(107)

我试着检查了官方文档,各种问题,以及SO内部之前的问题,但我无法确认是否可以在Next.js中创建包含常量或字符串与slug组合的动态路由。举个例子

pages/
  something-[slug].jsx

可能吗?我倾向于认为不是因为我试图建立的例子,而是可能我错过了一些东西。

xxls0lw8

xxls0lw81#

虽然Next.js不提供对部分动态路由(如something-[slug])的内置支持,但您可以通过设置实际的动态路由并使用rewrites将传入的URL(以您想要的格式)Map到该路由来解决它。
例如,您可以在/pages/something/[slug].jsx下设置动态路由,然后在next.config.js中配置rewrites规则,如下所示。

// next.config.js

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

gk7wooem2#

pages/ something-[slug].jsx
这对我来说很好:

// next.config.js

module.exports = {
    async rewrites() {
        return [
            {
                source: "/something-:slug",
                destination: "/something-[slug]",
            }
        ];
    }
}

localhost:3000/something-slug

相关问题