Next.js return the 404 error page in getInitialProps

Question

Currently I am following this example on how to redirect users in getInitialProps

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

The problem is, if I want to return 404 like this, it will return a blank page instead of the usual Next.js 404 error page.

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

Please note I know using ExpressJs and using statuscode 404 works, however, for this project I am not allowed to use ExpressJs so I need to use typical nodejs writeHead to do it.

Next.js 10 makes this super simple, find up to date answer below — Master Noob
– Master Noob, Commented Jan 15, 2021 at 8:04

Vadorequest · Accepted Answer · 2021-05-26 10:15:51Z

56

Next v10 allows to return 404 page (not with props, but just plain as it is below)

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

Full code that works for me: ✅✅✅

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']),
    }
  }
})

Documentation: https://nextjs.org/blog/next-10#notfound-support

edited May 26, 2021 at 10:15

Vadorequest

18.3k27 gold badges131 silver badges232 bronze badges

answered Apr 28, 2021 at 12:04

Alex K - JESUS first

2,01317 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vadorequest Over a year ago

This should be the accepted answer as of 2021. (Next.js v10.2)

RaenonX Over a year ago

@Vadorequest no, the OP was asking for getInitialProps, but not found support is only available for getStaticProps and getServerSideProps

Newbyte Over a year ago

Where does wrapper come from?

Alex K - JESUS first Over a year ago

@Newbyte it comes from: import { HYDRATE, createWrapper } from 'next-redux-wrapper' export const wrapper = createWrapper(initStore)

Allloush Over a year ago

This is the true answer for 404 problem

Bertrand Marron · Accepted Answer · 2017-12-14 17:34:14Z

In order to do that, you’ll have to render the Error page in your page.

You can do something like this:

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

If you have a custom error page, instead of importing next/error, you’ll have to import your custom _error page.

Strobotti · Accepted Answer · 2019-01-16 09:20:15Z

7

Implement your getInitialProps along the lines of:

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

        ...

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

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

Then in render() check if err is defined in state, in which case return the ErrorPage (default or custom one, depending on your implementation) and that's it! The statusCode inside err is just for more granular message on the ErrorPage so it needs to be passed for it as props.

answered Jan 16, 2019 at 9:20

Strobotti

1541 silver badge2 bronze badges

Comments

tsukyonomi06 · Accepted Answer · 2022-12-12 16:27:03Z

5

Here's how I do it

import ErrorPage from 'next/error'

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

answered Dec 12, 2022 at 16:27

tsukyonomi06

5891 gold badge6 silver badges20 bronze badges

Comments

Jeremy Lynch · Accepted Answer · 2023-07-24 12:58:18Z

3

If you are using the new AppRouter, you can use the NotFound() function:

See the NextJS docs: https://nextjs.org/docs/app/api-reference/functions/not-found

import { notFound } from 'next/navigation'
 
async function fetchUser(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }) {
  const user = await fetchUser(params.id)
 
  if (!user) {
    notFound()
  }
 
  // ...
}

answered Jul 24, 2023 at 12:58

Jeremy Lynch

7,3003 gold badges59 silver badges68 bronze badges

Comments

Master Noob · Accepted Answer · 2021-01-14 10:19:31Z

2

As of NextJS 10, you can now include notFound: true in the return object of getStaticProps && getServerSideProps to redirect to the 404 page

Here are the release notes: https://nextjs.org/blog/next-10#redirect-and-notfound-support-for-getstaticprops--getserversideprops

edited Jan 14, 2021 at 10:19

answered Jan 14, 2021 at 9:59

Master Noob

7353 gold badges10 silver badges21 bronze badges

Comments

Shawn Wang · Accepted Answer · 2019-01-25 07:01:16Z

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

This works like a charm ~ just try catch in next/app, then it works for all the pages

Vince · Accepted Answer · 2020-10-01 07:47:03Z

1

If you just have to implement the 404 PAGE like you do in cra

the code provided can be helpful: eg.

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

answered Oct 1, 2020 at 7:47

Vince

88713 silver badges23 bronze badges

Comments

Fahad Ali · Accepted Answer · 2022-01-26 10:17:10Z

-2

I am using this and it works for me

res.sendStatus(404)

answered Jan 26, 2022 at 10:17

Fahad Ali

651 silver badge7 bronze badges

Collectives™ on Stack Overflow

Next.js return the 404 error page in getInitialProps

9 Answers 9

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related