NextJs：设置状态码404而不重定向

Question

我正在尝试解决我们的网络应用程序的特定要求。我们有一个“商品”页面，如果商品售完，应继续显示商品，但页面的响应代码必须设置为 404。我正在尝试类似的操作：

在页面/[id]/Item.tsx中：

static async getInitialProps(ctx) {
   //retrieve item
   if (item.isSoldOut) {
       ctx.res.statusCode = 404;
   }
   //all other stuff
}

但它会自动重定向到主页，状态码为302。如何实现此行为？

Answer 1

Next.js 文档建议使用getStaticPropsorgetServerSideProps代替getInitialProps( https://nextjs.org/docs/api-reference/data-fetching/getInitialProps )

使用getServerSideProps您可以执行以下操作

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
    res.statusCode = 404;
    return { props: {} }
}

使用getInitialProps您可以执行以下操作：

static async getInitialProps({res}) {
    // server side
    if(res) res.statusCode = 404;

    // client side
    return { statusCode : 404 }
}