Next.js如何在getServerSideProps中重定向到404 Not Found页面

在Next.js的getServerSideProps（服务端渲染数据获取方法）中，不需要手动操作响应对象设置状态码，框架原生提供了标准化的404处理方式，是官方推荐的最佳实践：
当判断请求对应的底层资源不存在时，直接在分支中返回携带notFound: true的对象即可，框架会自动完成以下操作：

• 给当前响应设置404 HTTP状态码
• 渲染项目中自定义的404错误页面（根目录下的404.js/404.tsx文件）
• 终止后续的props注入、页面渲染逻辑，避免无效代码执行

修正后的完整代码 #

export async function getServerSideProps(context) {
  const placeId = context.params.placeId;
  const places = await getPlace(placeId);
  
  // 数据库中查询不到对应地点数据时，直接返回404配置
  if (!places.length) {
    return {
      notFound: true
    }
  }

  return {
    props: {
      place: places[0]
    },
  };
}

注意事项 #

• 该配置从Next.js 9.5版本开始支持，同时兼容getStaticProps（静态生成）场景的404处理
• 不推荐手动通过context.res.statusCode = 404的方式设置状态码，这种方式需要额外处理页面渲染逻辑，容易出现状态码和返回内容不匹配的问题
• 原示例代码中props字段的写法存在语法错误，对象属性需要明确键名，不能直接写places[0]

如果有特殊业务需求，比如资源不存在时跳转到列表页而非展示404页，也可以在判断分支中返回redirect配置做跳转，但是对于严格符合“资源不存在”语义的场景，返回notFound: true是最符合HTTP规范的做法。

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