Next.js return the 404 error page in getInitialProps
Solution 1
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
Solution 2
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.
Solution 3
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.
Solution 4
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
Solution 5
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;
}
Related videos on Youtube
Thomas Charlesworth
Updated on July 05, 2022Comments
-
Thomas Charlesworth almost 2 years
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.
-
Master Noob over 3 yearsNext.js 10 makes this super simple, find up to date answer below
-
-
Vadorequest almost 3 yearsThis should be the accepted answer as of 2021. (Next.js v10.2)
-
RaenonX almost 3 years@Vadorequest no, the OP was asking for
getInitialProps
, but not found support is only available forgetStaticProps
andgetServerSideProps
-
Newbyte almost 3 yearsWhere does
wrapper
come from? -
Alex K - JESUS first almost 3 years@Newbyte it comes from: import { HYDRATE, createWrapper } from 'next-redux-wrapper' export const wrapper = createWrapper(initStore)
-
Allloush about 2 yearsThis is the true answer for 404 problem