Свойство notFound для getStaticProps не влияет на код статуса http страницы.

Question

Я только что установил новое приложение 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 / article / d), он, как и ожидалось, возвращает страницу nextjs 404 по умолчанию.

Но на вкладке сети браузера отображается статус 200 для основного документа (страница с ошибкой 404). На вкладке сети со статусом 404 находятся только d.json и 404.js.

Думаю, что у основного документа тоже должен быть статус 404. В документах getStaticProps говорится о возвращаемом значении:

• notFound - необязательное логическое значение, позволяющее странице возвращать статус 404 и страницу

Но в этом случае статус страницы - 200, а не 404. Что еще нужно сделать, чтобы вернуть статус 404?

Без возврата статус 404.

Answer 1

Для этого конкретного варианта использования вы должны использовать вместо.

      export const getStaticPaths = async () =>  {
  return {
    paths: [
      { params: { slug: "a" }},
      { params: { slug: "b" }},
      { params: { slug: "c" }}
    ],
    fallback: 'blocking'
  }
}

в отличие fallback: true, он не будет обслуживать «запасную» версию, если страница еще не была сгенерирована (что, я думаю, поэтому вы всегда получаете 200 код состояния).

Вместо, fallback: 'blocking'будет ждать генерации HTML перед рендерингом страницы - аналогично тому, что происходит во время SSR. Это означает, что если notFound: true возвращается из getStaticProps вы получите надлежащий 404 код состояния для запроса страницы.