Returning 500 or 503 Error Response Status Code from Layout or Page

[p00000001]

The error.js functionality is great for customizing the visual display when errors occur at different levels of the app:

https://nextjs.org/docs/app/building-your-application/routing/error-handling

However, as far as I'm aware, it always returns a 200 response code. This might be ok for small contained errors, but for substantial errors, I would like to return an error status code to the client from a layout.js or page.js.

For example, if I am retrieving data from an API in page.js and the API returns an error or is unavailable, then I cannot render my page, so I would like to return a 500 or 503 error.

This is particularly important for search engines, as returning a 200 status for an error page will cache the error page, rather than indicate to the crawler there's an error and to try again later.

Functionality similar to notFound() would be ideal, where it can be called from a layout or page triggers the nearest error page and sets the response code e.g.

serverError() serverUnavailable(), or
error(code)

Like notFound() uses 'not-found.js, this may also need a corresponding server component file like server-error.js , as currently the default error.js must be a client component, which may limiting.

[ludwighogstrom]

I'm also interested in having this feature. Created this discussion a while ago #50383

[rodrigo-arias]

Is there a way to achieve this with Page Router? I have seen that pages/500.js always return 200. In addition to the reasons mentioned in this thread, it is also quite bad since CDNs will cache this page.

[mrjackyliang]

I'm also curious as well. Would love a function like notFound() where I can return commonly used error status codes.

[shestakov-railways]

We are humans, we need this

[lynn1286]

👋 Any progress now? I also need to return a 500 page to the user when the API returns an error

[hmphne]

We need this

[zecka]

Any update on that ?
I mean only customize this template, even if it's a static template...

[ssolders]

Not saying this solves the original question, nor that it's pretty, but it covered my requirement sufficient enough. Hope it helps someone.

I needed to display my site in maintenance mode when a flag was toggled in the CMS.

I managed to display my page with:

• The user's requested url (for SEO)
• Showing the main layout of my app and my maintenance component
• Returning HTTP status 503 + Retry-After header for the page request (for SEO)

I added a fetch to our cms in my Middleware.ts, if maintenance mode was enabled:

  let response = NextResponse.next();

  if (isMaintenanceMode) {
    response.headers.set('Retry-After', '3600');
    return new NextResponse(null, { status: 503, headers: response.headers });
  }

In my layout.tsx I re-fetched the maintenance mode flag from the CMS and showed my maintenance component instead of {children}

[adriancuadrado]

I've tried this and I correctly get a 500 server error status code. Maybe this problem got fixed at some point?

My Next version is 15.3.4 and I am using app router.

my-app/src/app/page.tsx:

export default function Page() {
  throw new Error("ERROR!");
}

my-app/src/app/error.tsx:

"use client";

export default function Error() {
  return <div>Error</div>;
}

[DabirRahmani]

if you have error during server render it will return 500 status. but we really need sth like notFound() with fully customization. developers need 410 or 503 or any other standard errors with customized seo strategies and http headers. someone may use no-index follow for Gone pages