Question

我有一种情况，我正在将nextjs用于客户端，并且“ 404-页面未找到错误”仅出现在本地开发中，但是我希望在开发人员和生产环境中看到它。我该如何存档？

在网上找到了一些示例，这些示例在本地运行良好，但在开发人员和产品上又无法正常工作，因为我可以从_app.js的getInitialProps方法中的ctx.res.statusCode本地获取statusCode并显示默认的nextjs错误状态代码为404的组件。

我还创建了一个自定义_errors.js页面，但这也仅适用于本地开发人员

重新使用内置错误页面：

import App, { Container } from 'next/app';
import { ApolloProvider } from 'react-apollo';
import Error from 'next/error';
import Page from '../components/Page';
import withData from '../lib/withData';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    const { res } = ctx;

    const errorCode = res.statusCode > 200 ? res.statusCode : false;

    pageProps.query = ctx.query;

    return {
      pageProps,
      errorCode,
    };
  }

  render() {

    const { Component, apollo, pageProps, errorCode } = this.props;
    if (errorCode) {
      return <Error statusCode={errorCode} />;
    }

    return (
      <Container>
        <ApolloProvider client={apollo}>
          <Page>
            <Component {...pageProps} />
          </Page>
        </ApolloProvider>
      </Container>
    );
  }
}

export default withData(MyApp);

自定义错误处理解决方案：

import React from 'react';
import PropTypes from 'prop-types';

class Error extends React.Component {
  static getInitialProps({ res, err }) {

    let errCode = null;

    if (res.statusCode) {
      errCode = res.statusCode;
    } else if (err.statusCode) {
      errCode = err.statusCode;
    }
    return { errCode };
  }

  render() {
    const { errCode } = this.props;
    return <p>{errCode ? `An error ${errCode} occurred on server` : 'An error occurred on client'}</p>;
  }
}

Error.propTypes = {
  errCode: PropTypes.number,
};

export default Error;

如何在开发和生产中的NextJS中呈现404页面？

0 个答案: