新しい Next.js アプリをインストールしました。次のページがあります。
// /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
}
}
ブラウザが存在しないページ (http://localhost:3000/articles/d など) に移動すると、予想どおり、デフォルトの nextjs 404 ページが返されます。
しかし、ブラウザーのネットワーク タブには、メイン ドキュメント (404 エラー ページ) のステータス 200 が表示されます。ネットワーク タブでステータス 404 になっているのは、d.json と 404.js だけです。
メインドキュメントにも 404 ステータスが必要だと思います。getStaticPropsドキュメントは、戻り値について次のように述べています。
- notFound - ページが 404 ステータスとページを返すことを許可するオプションのブール値
しかし、この場合、ページ ステータスは 404 ではなく 200 です。ステータス 404 を返すために他に何かする必要がありますか?
フォールバックがない場合、ステータスは 404 です。