September 18 2020

Next.js: How to show the default 404 page

Note

This post is about showing the default 404 page with the Next.js Pages Router.

Want to learn how to show and customize the 404 page for the Next.js App Router instead?

Next.js comes with a pretty nice 404 page out of the box. By default it gets shown when Next.js can't find any route for the path you're trying to access.

You can also show it programmatically by using the <ErrorPage /> component.

import ErrorPage from 'next/error'

async function getInitialProps({ query, res }) {
	const blogPost = await api.fetchBlogPost(query.slug)

	if (!blogPost) {
		if (res) {
			res.statusCode = 404
		}

		return { errorStatus: 404 }
	}

	return { blogPost }
}

function BlogPost({ errorStatus, blogPost }) {
	if (errorStatus) {
		return <ErrorPage statusCode={errorStatus} />
	}

	return <BlogPost blogPost={blogPost} />
}

BlogPost.getInitialProps = getInitialProps

export default BlogPost

If you have a lot of pages where 404s can occur, you might want to move the ErrorPage rendering to _app.js.

Optional: Show error page in _app.js

You can also extend _app.js to magically show the error page if the initial props of a page have an errorStatus property:

import ErrorPage from 'next/error'
import App from 'next/app'

async function getInitialProps(appContext) {
	const { res } = appContext.ctx

	const appProps = await App.getInitialProps(appContext)

	if (appProps.pageProps?.errorStatus && res) {
		res.statusCode = appProps.pageProps.errorStatus
	}

	return {
		...appProps,
	}
}

function MyApp({ Component, pageProps }) {
	if (pageProps?.errorStatus) {
		return <ErrorPage statusCode={pageProps.errorStatus} />
	}

	return <Component {...pageProps} />
}

MyApp.getInitialProps = getInitialProps

export default MyApp