Next.js自定义404.js页面为何未返回404状态码？

核心问题 #

你仅在组件层面渲染了自定义404页面，但未在服务端的getServerSideProps中设置HTTP响应状态码。Next.js默认会给getServerSideProps正常执行完成的请求返回200状态码，与你传递给组件的statusCode参数无关。

修复方案 #

修改post/[slug].js中的getServerSideProps代码，在检测到数据不存在时，明确设置HTTP响应状态码：

const getServerSideProps = async (context) => {
    const { slug } = context.params || {}
    const url = `/post/data?slug=${slug}`
    const data = await apiClient(url)

    if (data.statusCode === 404) {
        // 方式1：直接设置响应状态码，保留组件内的404渲染逻辑
        context.res.statusCode = 404
        return {
            props: {
                ...data
            }
        }

        // 方式2：使用Next.js内置配置（更推荐），自动渲染根目录404.js并返回404状态码
        // return {
        //     notFound: true
        // }
    }

    return {
        props: {
            ...data,
        }
    }
}

补充说明 #

• 方式2中返回notFound: true时，Next.js会自动处理状态码和页面渲染，此时你可以删掉组件内的条件渲染逻辑，简化代码。
• HTTP状态码在服务端发送HTML内容前就已确定，仅靠组件内的渲染无法改变服务端返回的状态码，必须通过context.res或Next.js提供的配置来设置。

内容的提问来源于stack exchange，提问作者Ali EXE