错误：在预渲染期间无法从 getStaticProps 返回“重定向”答案

【问题标题】：Error: `redirect` can not be returned from getStaticProps during prerendering错误：在预渲染期间无法从 getStaticProps 返回“重定向”
【发布时间】：2021-12-01 14:25:30
【问题描述】：

在我的 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

【问题讨论】：

如果您仔细检查文档，您会看到它提到：“注意：当前不允许在构建时重定向，如果重定向在构建时已知，则应将它们添加到 @ 987654325@."。我认为只有在页面重新生成期间使用增量静态重新生成时才能使用redirect - 而不是在构建时。
谢谢@juliomalves。我不知道他们为什么会在文档中举例说明如何做到这一点，然后有一个说明说这是不允许的。我找到了使用 React 的解决方法。

标签： reactjs next.js vercel

【解决方案1】：

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

我希望他们有一天能做到这一点，但在那之前，解决方法是加载页面，然后使用 useEffect react 钩子重定向客户端。

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？这是为了防止屏幕在重定向之前闪烁。

【讨论】：

请注意，React 会抱怨有条件地渲染 useEffect - 请参阅 Rules of Hooks。为了快速修复，您可以将条件移动到 useEffect 中。
哇。你说的对。我每天都学到新东西。答案已更新。