我试着检查了官方文档,各种问题,以及SO内部之前的问题,但我无法确认是否可以在Next.js中创建包含常量或字符串与slug组合的动态路由。举个例子
pages/ something-[slug].jsx
可能吗?我倾向于认为不是因为我试图建立的例子,而是可能我错过了一些东西。
xxls0lw81#
虽然Next.js不提供对部分动态路由(如something-[slug])的内置支持,但您可以通过设置实际的动态路由并使用rewrites将传入的URL(以您想要的格式)Map到该路由来解决它。例如,您可以在/pages/something/[slug].jsx下设置动态路由,然后在next.config.js中配置rewrites规则,如下所示。
something-[slug]
rewrites
/pages/something/[slug].jsx
next.config.js
// next.config.js module.exports = { async rewrites() { return [ { source: '/something-:slug', destination: '/something/:slug' } ]; } }
gk7wooem2#
pages/ something-[slug].jsx这对我来说很好:
// next.config.js module.exports = { async rewrites() { return [ { source: "/something-:slug", destination: "/something-[slug]", } ]; } }
localhost:3000/something-slug
2条答案
按热度按时间xxls0lw81#
虽然Next.js不提供对部分动态路由(如
something-[slug]
)的内置支持,但您可以通过设置实际的动态路由并使用rewrites
将传入的URL(以您想要的格式)Map到该路由来解决它。例如,您可以在
/pages/something/[slug].jsx
下设置动态路由,然后在next.config.js
中配置rewrites
规则,如下所示。gk7wooem2#
pages/ something-[slug].jsx
这对我来说很好:
localhost:3000/something-slug