如何在Next.js中处理带有可选slugs的动态页面的大量重定向?

Question

我的网站有一些动态路由，这导致了成千上万的水合页面。这些页面遵循如下url结构:/artists/[id]/[slug]或/concerts/[year]/[month]/[day]/[slug]。目前，我的页面结构模仿这些路由:/pages/artists/[id]/[slug].tsx和/pages/concerts/[year]/[month]/[day]/[slug].tsx。

带slug的路由是首选，但是当slug不可用时，站点应该优雅地重定向。例如，我希望将任何前往/artist/id的请求重定向到/artist/id/slug。同样，我想为音乐会的各个部分的url做一些重定向。

我最初尝试在next.config.js中指定重定向，如:

module.exports = {
...
async redirects() {
const [allArtists, allConcerts] = await Promise.all([...]);
return [
...allArtists.map((artist) => {
return {
source: `/artists/${artist.id}`,
destination: `/artists/${artist.id}/${slugify(artist.name)}`,
permanent: false,
};
}),
...allConcerts.map((concert) => {
return {
source: `/concerts/${concert.year}`,
destination: `/tours/${concert.year}`,
permanent: false,
};
}),
...allConcerts.map((concert) => {
return {
source: `/concerts/${concert.year}/${concert.month}`,
destination: `/tours/${concert.year}`,
permanent: false,
};
}),
...allConcerts.map((concert) => {
return {
source: `/concerts/${concert.year}/${concert.month}/${concert.day}`,
destination: `/concerts/${concert.year}/${concert.month}/${concert.day}/${slugify(concert.name)}`,
permanent: false,
};
}),
],
},
};

然而，到目前为止，vercel/next.js不支持该文件中指定的超过1000个重定向。

我试图从getStaticProps返回redirect: pathWithSlug，但得到以下错误:

Error: `redirect` can not be returned from getStaticProps during prerendering

对于如何完成这个行为有什么想法或方法吗?

Answer 1

vercel/next.js不支持该文件中指定的超过1,000个重定向。

你不是在开玩笑，这是在进入这个平台之前需要考虑的重要问题。一些想法& &;妥协:

• 在pages/artists/[id]上使用getServerSideProps并在那里使用重定向

• pages/artists/[id]使用与pages/artists/[id]/[slug]相同的内容，但设置规范url以避免SEO惩罚

Answer 2

首先，您可以通过使用路径匹配来显著减少/concerts/*到/tours/*重定向的条目数量。

async redirects() {
return [
// ...
{
source: '/concerts/:year/:month',
destination: '/tours/:year',
permanent: false
},
{
source: '/concerts/:year',
destination: '/tours/:year',
permanent: false
},
// ...
]
}

不幸的是，对于其他路径不能这样做。仅这一项就有可能将条目数量减少到1000以下——这取决于你拥有的艺术家/音乐会的数量——但迟早它会再次成为一个问题。

其次，要处理剩余的路径，我会将您的/artists/[id]/[slug]和/concerts/[year]/[month]/[day]/[slug]路由转换为动态捕获所有路由:

• /artists/[...slug]
• /concerts/[...slug]

这将允许/concerts/[...slug].tsx页面匹配/concerts/2020/08/20和/concerts/2020/08/20/concert-nameurl，这意味着您根本不需要对这些页面进行重定向。这同样适用于artists/*路由。

正如@DerekNguyen在他的回答中提到的，有一个规范的URL，将用于SEO目的将是理想的。