How do i change status code of a Next js page

Question

I want to set the status code 503 for some of pages in my Next app. Is it possible? right now every page even those that are undefined gets status code 200. how can i manipulate it?

By the way, by status code i mean the status of the page not the api call response

Next 13.5

  const StatePage = async ({ params, error }) => {
  const state = capitalizeFirstLetter(params.state);
  const states = [
    "Federal",
    "Ontario",
    "Quebec",
    "Nova-Scotia",
    "Saskatchewan",
    "Newfoundland-and-Labrador",
    "New-Brunswick",
    "Manitoba",
    "Prince-Edward-Island",
    "Yukon",
    "Northwest-Territories",
    "British-Columbia",
    "Alberta",
  ];

  if (error) {
    return <NotFound error={error} />;
  } else if (states.includes(state)) {
    // redirect(`https://${baseUrl}/landing/${params.state}`);
    throw new Error(503)
  } else notFound()
};

export default StatePage;

I actually couldn't find a way to make it happen.

Edit: I ended up using nextjs middleware. I add the middleware in the root of my project and used nextjs url matcher to show 503 error of specific route. The only downside was I cant use my 503 custom error page in here.

import { NextResponse } from "next/server";
import { renderToString } from "react-dom/server";

export function middleware(request) {
 const componentString = renderToString(someHtml)

      return new NextResponse(componentString, {
    status: 503,
    headers: { "content-type": " text/html; charset=utf-8" },
  });
}

export const config = {
  matcher: "/fa/programs/:country/:path/",
};

Answer 1

Please refer to the docs:

https://nextjs.org/learn-pages-router/seo/crawling-and-indexing/status-codes

You can set any response code that you wish 👍

If I didn’t understand you correctly, please explain further what you are looking for.