Next.js中getStaticProps返回redirect部署Vercel出现预渲染错误怎么办

错误触发核心原因 #

getStaticProps 返回 redirect 的逻辑仅在增量静态再生(ISR)的请求阶段生效，全量预构建（prerender）阶段不支持返回重定向配置。
本地开发环境不会执行全量预渲染，都是用户访问页面前才实时执行 getStaticProps，因此不会触发该错误；部署到 Vercel 时平台默认会执行全量预渲染，该阶段执行到你的重定向分支就会抛出对应错误。

排查步骤 #

• 确认页面是否为配置了 fallback: false 的动态路由，或是普通静态路由，这两类路由都会在构建阶段全量执行 getStaticProps 预渲染
• 检查重定向逻辑触发条件，data.isRedirect 是否在构建阶段预渲染时就会命中
• 确认 Next.js 版本，低于 12.1.0 的旧版本对 getStaticProps 返回重定向的支持存在兼容性问题，部分场景下即使是 ISR 模式也会抛出该错误

可行解决方法 #

方案1：调整动态路由的fallback配置 #

把动态路由的 getStaticPaths 返回的 fallback 设置为 true 或者 'blocking'，不要设置为 false，这样构建阶段只会预渲染 paths 里指定的页面，其他页面不会在构建阶段执行 getStaticProps，而是在首次请求的时候执行，这时候返回重定向就符合规则了。
示例 getStaticPaths 代码：

export async function getStaticPaths() {
  return {
    paths: [/* 仅填写构建阶段确定不需要重定向的页面路径 */],
    fallback: 'blocking'
  }
}

方案2：构建阶段兜底跳过重定向逻辑 #

通过 Next.js 内置的阶段环境变量判断当前是否为构建阶段，构建阶段暂时返回404，请求阶段再走重定向逻辑：

export async function getStaticProps({ params }) {
  
  // 原有逻辑省略

  if (data.isRedirect) {
    // 构建阶段跳过重定向返回
    if (process.env.NEXT_PHASE === 'phase-production-build') {
      return { notFound: true }
    }
    return {
      redirect: {
        destination: `${data.redirectTo}`,
        permanent: false,
      },
    };
  }
  return {
    props: {
      data,
    },
    revalidate: 10,
  };
}

方案3：把重定向逻辑迁移到客户端 #

如果上述方案都不适用，可以先把数据传到页面组件，在客户端通过 useRouter 执行跳转：

// 页面组件内代码
import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function Page({ data }) {
  const router = useRouter()
  useEffect(() => {
    if (data.isRedirect) {
      router.replace(data.redirectTo)
    }
  }, [data, router])

  if (data.isRedirect) return <div>跳转中...</div>
  // 其余正常页面渲染逻辑
}

内容的提问来源于stack exchange，提问作者Matt