Javascript 预呈现页面时出错/404“；和页面错误/_错误：无法导出带有“getServerSideProps”的页面_Javascript_Node.js_Reactjs_Next.js

Javascript 预呈现页面时出错/404“；和页面错误/_错误：无法导出带有“getServerSideProps”的页面

javascript node.js reactjs next.js

Javascript 预呈现页面时出错/404“；和页面错误/_错误：无法导出带有“getServerSideProps”的页面,javascript,node.js,reactjs,next.js,Javascript,Node.js,Reactjs,Next.js,我正在使用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

我正在使用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页面，因为我希望它由

\u error.tsx

页面处理，因为我有用于尾部斜杠的服务器端重定向。这在开发环境中运行时有效，但在我尝试构建它时失效

显然

\u错误。tsx

具有

getServerSideProps

，不应该是静态页面，那么为什么要将其设置为静态页面呢？它显然不是一个，因为根据Next.js文档，任何导出

getServerSideProps

的页面都不是一个。那它为什么会出错

如果有帮助，下面是我的

\u 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;

import React，{useffect}来自“React”；
从“下一步”导入{GetServerSideProps}；
从“下一个/头”导入头；
从“下一个/路由器”导入路由器；
从“@material ui/core/styles”导入{makeStyles，createStyles}”；
从“@material ui/core/Container”导入容器；
从“../lib/useStandardHeaderTags”导入useStandardHeaderTags；
从“../components/TitleElement”导入标题元素；
const useStyles=makeStyles（（）=>
创建样式({
根目录：{
textAlign:“中心”
}
})
);
界面道具{
状态码：编号；
}
常量错误：React.FC=（{statusCode}）=>{
const classes=useStyles（）；
const title=statusCode==404？'404'：'Error'；
返回(
{useStandardHeaderTags（标题）}
{statusCode==404
？“找不到您正在查找的页面。”
：'发生错误。'}
);
};
导出常量getServerSideProps:getServerSideProps=async（{res，req}）=>{
const statusCode=res？res.statusCode:404；
如果（状态代码===404）{
if（请求url.match（/\/$/））{
const withoutTrailingSlash=req.url.substr（0，req.url.length-1）；
如果（res）{
文书主任（303{
位置：无牵引斜线
});
res.end（）；
}
否则{
路由器。推送（不带牵引斜杠）；
}
}
}
返回{
道具：{
状态码
}
};
};
导出默认错误；

\u error.tsx

它不是一个常规页面，而是一个用于初始化错误页面的组件

尝试使用

错误。getInitialProps

而不是

getServerSideProps

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

此外，在使用

Error.getInitialProps

时，还应返回不带

道具的嵌套对象
Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

\u error.tsx
它不是一个常规页面，而是一个用于初始化错误页面的组件
尝试使用错误。getInitialProps
而不是getServerSideProps

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

此外，在使用Error.getInitialProps
时，还应返回不带道具的嵌套对象
Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

使用错误。getInitialProps
解决了问题！非常感谢。使用getInitialProps不允许对页面进行静态优化，它可以很好地处理警告，但可能不是您所期望的使用错误。getInitialProps
解决了问题！非常感谢。使用getInitialProps不允许静态优化页面，它可以很好地处理警告，但可能不是您想要的