时间戳

首页 > 解决方案 > 如何在 Next.js 中处理带有可选 slug 的动态页面的大量重定向？

next.js - 如何在 Next.js 中处理带有可选 slug 的动态页面的大量重定向？

问题描述

我的网站有一些动态路由，可以生成数千个水合页面。页面遵循 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 不支持该文件中指定的超过 1,000 个重定向。

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

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

关于如何完成这种行为的任何想法或方法？

标签： next.jsvercel

解决方案

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

你不是在开玩笑，这是在进入平台之前需要考虑的重要事项。一些想法和妥协：

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

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

推荐阅读