next.js 404错误页面404错误页面

vdgimpew 于 2022-12-18 发布在其他

关注(0)|答案(8)|浏览(239)

目前，我正在按照这个示例来学习如何在getInitialProps中重定向用户
https://github.com/zeit/next.js/wiki/Redirecting-in-%60getInitialProps%60
问题是，如果我想这样返回404，它将返回一个空白页，而不是通常的Next.js 404错误页。

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

请注意，我知道使用ExpressJs和使用状态代码404可以工作，但是，对于这个项目，我不允许使用ExpressJs，所以我需要使用典型的nodejs writeHead来完成它。

next.js

来源：https://stackoverflow.com/questions/47586505/next-js-return-the-404-error-page-in-getinitialprops

8条答案

按热度按时间

bt1cpqcv1#

下一个v10允许返回404页面（不带 prop ，但只是简单的，因为它是下面）

if (!checkItem) {
    return {
      notFound: true
    }
  }

适用于我的完整代码：✅✅✅

export const getServerSideProps = wrapper.getServerSideProps(async ({ req, res, locale, query, store }) => {
  const { productId, categoryId } = query
   
  const checkItem = await getProductBySlugSSR(productId, categoryId, store)

  if (!checkItem) {
    return { // <-----------------does the trick here!!
      notFound: true
    }
  }
    
  return {
    props: {
      ...await serverSideTranslations(locale, ['common']),
    }
  }
})

文件：https://nextjs.org/blog/next-10#notfound-support

赞(0）回复(0）举报 2022-12-18

7nbnzgx92#

为了做到这一点，您必须在页面中呈现错误页面。
您可以执行以下操作：

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} />
     */
  }
}

如果您有一个自定义错误页面，您将不得不导入您的自定义_error页面，而不是导入next/error。

赞(0）回复(0）举报 2022-12-18

332nm8kg3#

沿着以下方式实现getInitialProps：

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

        ...

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

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

然后在render（）中检查err是否在state中定义，在这种情况下返回ErrorPage（默认或自定义，取决于您的实现），就这样！errr中的statusCode只是用于ErrorPage上的更细粒度的消息，因此需要将其作为 prop 传递。

赞(0）回复(0）举报 2022-12-18

xqk2d5yq4#

从NextJS10开始，您现在可以在getStaticProps && getServerSideProps的返回对象中包含notFound: true以重定向到404页面
以下是发行说明：https://nextjs.org/blog/next-10#redirect-and-notfound-support-for-getstaticprops--getserversideprops

赞(0）回复(0）举报 2022-12-18

brccelvz5#

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

这就像一个魅力~只需尝试catch in next/app，那么它对所有页面都有效

赞(0）回复(0）举报 2022-12-18

q7solyqu6#

如果您只需要像在cra中那样实现404 PAGE
所提供的代码可能会有所帮助：例如

import AComponent from '../acomponent';
 import Error from '../error';
  
 const User = (data) => {

   return data.id ? <AComponent /> : <Error />
 }

 User.getInitialProps = async (ctx) => {
   const res = await fetch(...data) // list of items = []
   const data = await res.json()

   return data;
 }

赞(0）回复(0）举报 2022-12-18

qvk1mo1f7#

我是这么做的

import ErrorPage from 'next/error'

const Mycomponenet = () =>{
   if (!exists) {
        return <ErrorPage statusCode={404}/>
      }
}

赞(0）回复(0）举报 2022-12-18

lmvvr0a88#

我正在使用这个，它对我很有效

res.sendStatus(404)

赞(0）回复(0）举报 2022-12-18

我来回答

next.js 404错误页面404错误页面

8条答案

相关问题

热门标签

最新问答