I recently set up a fresh Next.js application and created the following page:
// /pages/articles/[slug].js
import React from 'react'
import { useRouter } from 'next/router'
import ErrorPage from 'next/error'
const Article = (props) => {
const router = useRouter()
if (router.isFallback) {
return <div>Loading..</div>
}
if (!props['data']) {
return <ErrorPage statusCode={404} />
}
return (
<div>
Article content
</div>
)
}
export default Article
export const getStaticProps = async(context) => {
const slug = context.params.slug
const res = ["a", "b", "c"].includes(slug)
? {
props: {
data: slug
}
}
: {
props: {},
notFound: true
}
return res
}
export const getStaticPaths = async() => {
return {
paths: [
{ params: { slug: "a" }},
{ params: { slug: "b" }},
{ params: { slug: "c" }}
],
fallback: true
}
}
Upon navigating to a non-existent page in the browser (e.g. http://localhost:3000/articles/d), it correctly shows the default Next.js 404 page.
However, the network tab in the browser indicates a status 200 for the main document (the 404 error page). The only resources with a status of 404 are d.json and 404.js.
I believe that even the main document should have a 404 status. The getStaticProps documentation mentions the 'notFound' option:
- notFound - An optional boolean value to allow the page to return a 404 status and page
In this scenario, despite specifying 'notFound', the page still returns a 200 status instead of 404. Is there an additional step required to return a 404 status?
When disabled, the status is indeed 404.