4

新しい 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 です。

4

1 に答える 1