Add a way to set the status code in getServerSideProps

Feature request

When the API call in getServerSideProps returns a 404 or null, I want the route to 404 in the website. I want to be able to manually tell getServerSideProps that an error has occurred and to render a specific status code.

I searched the docs, tried calling res.status(404) and it didn’t work, so I’m filing this feature request

Describe the solution you’d like

The 2nd solution probably fits best from an API design perspective with the rest of Next.js, but the first is probably what most JS developers would expect

Ideal solution

Inside getServerSideProps, if I call res.status(404), the Network tab should show the current document’s status is 404 and the Next.js would render _error or next/error instead of the page it was going to render.

This is ideal, for me at least, because this requires nothing new to learn. It’s how I expected it to work before I filed this issue. However, this might not make as much sense in other cases (getStaticProps).

Alternative solution

Add statusCode to the object we return in getServerSideProps.

For example:

export const getServerSideProps = async ({ query: { id: username }, res }) => {
  const profile = await fetchProfileByUsername(username);
  const profileId = profile?.id ?? null;

  return {
+   statusCode: profileId ? 200 : 404,
    props: {
      profile,
      profileId: profile?.id ?? null,
      username
    }
  };
};

When the status code is > 299, render the appropriate error page with the status code, but default it to 200

Another alternative solution

When you want to manually trigger a 404 error in Ruby on Rails, you raise ActionController::RoutingError inside your controller, for example:

raise ActionController::RoutingError.new('Not Found')

A Next.js version of that might look like this:

import {NotFoundError} from 'next/error';

export const getServerSideProps = async ({ query: { id: username }, res }) => {
  const profile = await fetchProfileByUsername(username);
  const profileId = profile?.id ?? null;
  
   if (!profileId) {
     throw new NotFoundError();
   }

  return {
    props: {
      profile,
      profileId: profile?.id ?? null,
      username
    }
  };
};

This would naturally mean you could render the 404 page easily from non-page parts of your app, too.

My personal preference is I don’t like throwing errors this way, so I put it at the end. But that’s just my opinion

Describe alternatives you’ve considered

I can do this right now, however the status code it returns is still 200 when it really should 404.

import * as React from "react";
import { Page } from "../../src/components/Page";
import { fetchProfileByUsername } from "../../src/lib/api";
import NotFoundPage from "../404";

export const getServerSideProps = async ({ query: { id: username }, res }) => {
  const profile = await fetchProfileByUsername(username);

  return {
    props: {
      profile,
      profileId: profile?.id ?? null,
      username
    }
  };
};

export const ShowProfilePage = ({ profile, username, profileId }) => {
  if (!profile || !profileId) {
    return <NotFoundPage statusCode={404} />;
  }
  return (
    <Page header={<div className="Header-title">{username}</div>}>
      {...notRelevantToCodeSnippet}
    </Page>
  );
};

export default ShowProfilePage;

Additional context

[timneutkens]

This has been solved in Next.js 10: https://nextjs.org/blog/next-10#notfound-support

[claus]

Doesn’t res has a statusCode property that you can set?

export const getServerSideProps = async ({ res }) => {
  res.statusCode = 404
  return {
    error: 'oops'
  };
};