#javascript #next.js #static-site-generation
#javascript #next.js #статическое создание сайта
Вопрос:
Я только что установил новый 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 по умолчанию, как и ожидалось.
Но на вкладке сети браузера отображается статус 200 для основного документа (страница ошибки 404). Единственными объектами на вкладке network со статусом 404 являются d.json и 404.js .
Я думаю, что основной документ также должен иметь статус 404. В документах getStaticProps говорится о возвращаемом значении:
- NotFound — необязательное логическое значение, позволяющее странице возвращать статус 404 и страницу
Но в этом случае статус страницы равен 200, а не 404. Нужно ли что-то еще сделать, чтобы вернуть статус 404?
Без резервного копирования статус равен 404.
Ответ №1:
Для этого конкретного варианта использования вы должны использовать
fallback: 'blocking'
вместо этого.
export const getStaticPaths = async () => {
return {
paths: [
{ params: { slug: "a" }},
{ params: { slug: "b" }},
{ params: { slug: "c" }}
],
fallback: 'blocking'
}
}
В отличие fallback: true
от этого, он не будет обслуживать «резервную» версию, если страница еще не была сгенерирована. Вот почему вы получаете код 200
состояния в данный момент.
Вместо fallback: 'blocking'
этого будет ждать создания HTML-кода перед рендерингом страницы — аналогично тому, что происходит во время рендеринга на стороне сервера. Это означает, что if notFound: true
is возвращается от getStaticProps
вас, вы получите правильный 404
код состояния для запроса страницы.