Next.js возвращает страницу ошибки 404 в getInitialProps

Question

Next.js возвращает страницу ошибки 404 в getInitialProps

1

В настоящее время я следую этому примеру о том, как перенаправить пользователей в getInitialProps

https://github.com/zeit/next.js/wiki/Redirecting-in-%60getInitialProps%60

Проблема в том, что если я хочу вернуть 404, как это, он вернет пустую страницу вместо обычной страницы ошибок Next.js 404.

context.res.writeHead(404)
context.res.end();

Обратите внимание, что я знаю, используя ExpressJs, и, используя statuscode 404 работает, однако, для этого проекта мне не разрешено использовать ExpressJs, поэтому для этого мне нужно использовать обычный nodejs writeHead.

Thomas Charlesworth 01 дек. 2017, в 06:05

Источник

Теги:

javascript

node.js

next.js

serverside-javascript

nextjs

3 ответа

Ещё вопросы

Bertrand Marron · Answer 1 · 2017-12-14T15-58-00.000Z

Для этого вам нужно отобразить страницу "Ошибка" на вашей странице.

Вы можете сделать что-то вроде этого:

import React from 'react'
import ErrorPage from 'next/error'

class HomePage extends React.Component {
  static async getInitialProps(context) {
    try {
      const data = await retrieveSomeData()
      return { data }
    } catch (err) {
      // Assuming that 'err' has a 'status' property with the HTTP status code.
      if (context.res) {
        context.res.writeHead(err.status)
      }
      return { err: { statusCode: err.status } }
    }
  }

  render() {
    const { err, data } = this.props

    if (err) {
      return <ErrorPage statusCode={err.statusCode} />
    }

    /*
     * return <Something data={data} />
     */
  }
}

Если у вас есть страница с пользовательскими ошибками, вместо импорта next/error вам придется импортировать вашу пользовательскую страницу _error.

Shawn Wang · Answer 2 · 2019-01-25T05-25-00.000Z

import App, { Container } from 'next/app'
import React from 'react'
import Head from 'next/head'
import * as Sentry from '@sentry/node'
import Error from './_error'

require('es6-promise').polyfill()
require('isomorphic-fetch')

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}
    let e
    if (Component.getInitialProps) {
      try {
        pageProps = await Component.getInitialProps(ctx)
      } catch (error) {
        e = error
        Sentry.captureException(error) //report to sentry
      }
    }
    return { pageProps, e }
  }

  render() {
    const { Component, pageProps, e } = this.props
    if (e) {
      return <Error /> // customize your error page
    }
    return (
      <Container>
        <Head>
          <title> Your title</title>
        </Head>
        <Component {...pageProps} />
      </Container>
    )
  }
}

export default MyApp

Это работает как очарование ~ просто попробуйте перехватить в следующем/приложение, тогда это работает для всех страниц

Strobotti · Answer 3 · 2019-01-16T06-51-00.000Z

Реализуйте ваши getInitialProps в соответствии с:

    static async getInitialProps(context) {
        const {res} = context;

        ...

        if ([something went wrong]) {
            if (res) {
                res.statusCode = 404;
            }

            return {
                err: {
                    statusCode: 404
                },
            };
        }
        ...

Затем в render() проверьте, определен ли err в состоянии, в этом случае верните ErrorPage (по умолчанию или пользовательский, в зависимости от вашей реализации) и что это! StatusCode внутри err предназначен только для более детального сообщения на ErrorPage, поэтому его нужно передавать для него в качестве реквизита.