Question

我正在使用TypeScript和Next.js进行项目。该网站到目前为止非常简单，仅包含几个页面，在我的项目上运行next build时，我不断收到以下错误消息：

Automatically optimizing pages .
Error occurred prerendering page "/404". Read more: https://err.sh/next.js/prerender-error:
Error: Error for page /_error: pages with `getServerSideProps` can not be exported. See more info here: https://err.sh/next.js/gssp-export

我没有自定义的404页面，因为我希望它由_error.tsx页面处理，因为我具有用于尾部斜杠的服务器端重定向。在开发环境中运行时，此方法有效，但在尝试构建时会终止。

很显然，_error.tsx具有getServerSideProps，并且不应是静态页面，那么为什么要使其成为一个静态页面呢？根据Next.js文档，显然这并不意味着是一个，导出getServerSideProps的任何页面都不是一个。那么，为什么会引发错误？！？！？！

如果有帮助，这是我的_error.tsx文件的代码：

import React, { useEffect } from 'react';
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Router from 'next/router';

import { makeStyles, createStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

import useStandardHeaderTags from '../lib/useStandardHeaderTags';
import TitleElement from '../components/TitleElement';

const useStyles = makeStyles(() =>
  createStyles({
    root: {
      textAlign: 'center'
    }
  })
);

interface Props {
  statusCode: number;
}

const Error: React.FC<Props> = ({ statusCode }) => {
  const classes = useStyles();
  const title = statusCode === 404 ? '404' : 'Error';

  return (
    <>
      <Head>
        {useStandardHeaderTags(title)}
      </Head>
      <Container className={classes.root}>
        <TitleElement text={title} />

        {statusCode === 404
          ? 'The page you are looking for could not be found.'
          : 'An error occurred.'}
      </Container>
    </>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ res, req }) => {
  const statusCode = res ? res.statusCode : 404;

  if (statusCode === 404) {
    if (req.url.match(/\/$/)) {
      const withoutTrailingSlash = req.url.substr(0, req.url.length - 1);
      if (res) {
        res.writeHead(303, {
          Location: withoutTrailingSlash
        });
        res.end();
      }
      else {
        Router.push(withoutTrailingSlash);
      }
    }
  }

  return {
    props: {
      statusCode
    }
  };
};

export default Error;

Answer 1

_error.tsx，它不是常规页面，而是用于初始化错误页面的组件。

尝试使用Error.getInitialProps代替getServerSideProps。

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

此外，使用props时，您应该返回没有Error.getInitialProps嵌套的对象。

Customizing The Error Page

呈现页面“ / 404”时发生错误，页面/ _error出现错误：无法导出具有`getServerSideProps`的页面

1 个答案: