错误：预渲染期间无法从 getStaticProps 返回 `redirect`

Question

在我的 Next.js 应用程序中，我使用getStaticProps如下方式静态生成页面

export async function getStaticProps({ params }) {
  
  ...

  if (data.isRedirect) {
    return {
      redirect: {
        destination: `${data.redirectTo}`,
        permanent: false,
      },
    };
  }
  return {
    props: {
      data,
    },
    revalidate: 10,
  };
}

它在本地主机上按预期工作，但当我部署到 Vercel 时，出现此错误。

错误：redirect预渲染期间无法从 getStaticProps 返回

我不明白这一点，因为 Next.js 在他们的文档中有这个例子。https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static- Generation

Answer 1

目前无法使用 Next.js 静态页面从服务器进行重定向。

我希望他们有一天能够实现这一目标，但在那之前，解决方法是加载页面，然后使用useEffect反应钩子重定向客户端。

import React, { useEffect } from "react";
import { useRouter } from "next/router";

const IndexPage = ({ data }) => {
  const router = useRouter();
  useEffect(() => {
    if (data?.home?.isRedirect) {
      router.push(data.home.redirectTo);
    }
  });
  return (
    <>
      {data && !data.isRedirect && (
      ...

请注意我如何检查!data.isRedirect？这是为了防止屏幕在重定向之前闪烁。