getServerSideProps/getStaticProps能否向404页面传递props

你当前的写法无法实现需求。Next.js 对getServerSideProps、getStaticProps的返回值有明确处理逻辑：只要返回对象中包含notFound: true，框架会直接忽略同返回对象里的所有props字段，直接触发内置404渲染流程，不会向404页面传递任何自定义参数。

方案1：手动控制404渲染（推荐） #

不使用框架原生的notFound返回规则，自行控制404状态和参数传递，灵活度最高：

1. 在数据获取方法中判断资源不存在时，手动给响应设置404状态码，正常返回你需要传递的自定义参数，同时加一个404标识位
2. 在页面组件中判断标识位，命中404场景时直接渲染自定义404组件，把参数透传进去即可

示例代码（Pages Router场景）：

// pages/[postId].js
import Custom404 from '../pages/404'

export async function getServerSideProps(context) {
  const post = await fetchPostFromDB(context.params.postId)
  if (!post) {
    // 手动设置404响应状态码，保证SEO和访问状态正确
    context.res.statusCode = 404
    return {
      props: {
        is404: true,
        foo: true, // 所有你需要传给404页的自定义参数都可以放在这里
        notFoundReason: '当前内容已被作者删除'
      }
    }
  }
  return {
    props: { post }
  }
}

export default function PostPage({ is404, foo, notFoundReason, post }) {
  if (is404) {
    // 把自定义参数传给404组件做定制渲染
    return <Custom404 foo={foo} reason={notFoundReason} />
  }
  // 正常页面渲染逻辑
  return <article>{post.content}</article>
}

这种写法完全兼容Next.js的静态生成、服务端渲染逻辑，也能保证404状态码正确返回。

方案2：全局中间件透传参数 #

如果项目里触发404的场景很多，不想每个页面重复写判断逻辑，可以在服务端中间件层做统一处理：

• 中间件判断到目标资源不存在时，把需要传递给404页的参数写入请求头、或者全局服务端状态容器
• 自定义404页面渲染时，从请求头或者全局状态容器中读取对应参数渲染即可
  注意使用这种方案时要做好服务端状态的注水脱水处理，避免客户端和服务端渲染内容不一致导致水合错误。

注意：不要通过修改Next.js源码、hack框架内部notFound处理逻辑的方式实现需求，这类方案在框架版本升级后大概率失效，还可能破坏框架内置的错误边界、静态优化能力。

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