Как отобразить страницу 404 в NextJS при разработке и производстве? - PullRequest
Новая
       26

Как отобразить страницу 404 в NextJS при разработке и производстве?

0 голосов
/ 19 июня 2019

У меня есть ситуация, когда я использую nextjs для клиентской стороны, и «404 - страница не найдена ошибка» появляется только в локальной разработке, но я хотел бы видеть это на dev и на производстве.Как мне это заархивировать?

В сети нашел несколько примеров, которые хорошо работали локально, но не работали снова на dev и prod, так как я мог получить statusCode локально из ctx.res.statusCode из метода getInitialProps в_app.js и отобразить компонент ошибки nextjs по умолчанию, если код состояния 404.

Я также создал пользовательскую страницу _errors.js, но это также работает только в локальном dev

Повторное использование встроенногостраница ошибки: 

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;
...