Returning HTTP status 410 Gone for particular paths

[jnv]

With Next.js 10 it is now possible to return notFound from getStaticProps which finally unlocked possibility to use SSG for us.

On our website we have also some pages and posts which were outdated and had only a few or none inbound links. Our content team decided to remove them without replacement, which is perfect use case for HTTP status 410 Gone. It informs both visitors and crawlers that indeed, the URL is correct, but the content is not available anymore. Google (and possibly other search engines) honors the code and won't attempt to reindex the page and will remove it from the index sooner.

My question is what would be the best way to return 410 for some paths on Next.js website? From my point of view it seems like getServerSideProps is the only option. For example I can create /pages/410.js with:

export async function getServerSideProps({ res }) {
  res.statusCode = 410
  return { props: {} }
}

And point other URLs to it through rewrites or reuse the logic on particular pages. Check out this codesandbox with pages /410 (explicit error page) and /gone (through rewrite).

This works. But I wonder whether there is some other option which would better leverage static-site generation, especially since we know about these pages during build time?

Related: #16554

[cvolant]

Yes, I have the same need for the same SEO reasons.

I wonder whether there is some other option which would better leverage static-site generation, especially since we know about these pages during build time?

We need to add either a status: number prop either a rewrite: Rewrite prop in the GetStaticPropsResult. That would be handy in getServerSideProps too, but it is not required there, we can use res to manage status code.

[fasani-tx]

Did any one solve this already?

[bryanrasmussen]

here we are in december one year later - any one solve this? I don't want to return a 404 because we have a default fallback handler that is getting hit with all sorts of static paths /blah/myweirdurl/hey.json and I would like to say hey if we are here at my static handler and the url ends with json then return 410

[yassinebridi]

Here is what i tried:
You can always just return notFound: true
And set the status code dynamically in your _error.tsx

import { GetServerSideProps, NextPage } from "next";

interface ErrorPageProps {
  statusCode: number;
}
const CustomError: NextPage<ErrorPageProps> = ({ statusCode }) => {
  return (
    <Error
      statusCode={statusCode}
      title={
        statusCode === 410
          ? "The requested resource is no longer available"
          : undefined
      }
    />
  );
};

const redirects = [{ slug: "/test/", status: 410 }];

const getServerSideProps: GetServerSideProps = async ({ res, query }) => {
  const redirectStatus = redirects.find(
    (f) =>
      f.from.split("/")[1].toLowerCase() ===
      (query.slug as string).toLowerCase()
  ).status;

  const statusCode =
    res.statusCode === 404 && redirectStatus === 410 ? 410 : res.statusCode;
  res.statusCode = statusCode;

  return {
    props: {
      statusCode,
    },
  };
};

export default CustomError;
export { getServerSideProps };

[jnv]

Thank you, that's a good tip! However, doesn't that deoptimize 404 pregeneration, since it needs to be always server-side rendered?

[yassinebridi]

Yep, i have to remove the 404 page, and to set the status code, you have to use SSR.
I guess you have to know which is more important for you application.

[Kyoss79]

So, just to clarify? This solution completely removes the returned HTML and instead only returns a 401 or 410 with an empty document?

[codewithPoppy]

It has been years after this discussion but I am going to jump into this conversation again.
Is it possible to do this with SSG?

[salos1982]

It is not enough to have only 404 error. I Want to show 410 error for the goods that were sold out but I cannot.
At all there a lot of silly restrictions in app router such as foriding setting cookies and headers from server. Also I cannot return necessary error codes.

[bryanrasmussen]

obviously it should be possible to do return {staticHttpCode: anything that is not redirect}
that then loads a static page, 410 with message sorry that product is sold out etc. 403 with page sorry you have reached a rate limit, try again in X minutes.

I can see why redirect you need to handle before it gets to the static rendering but other codes that can be rendered as essentially static pages should all be allowed.

probably there should also be some other parameters returned at that point than just the http code page.

[marjorg]

Recently they proposed similar APIs for forbidden and unauthorized. I posted on the RFC for that asking if a more universal API would be possible. #73753 (comment)

[jnv]

Thanks for update! Adding, for example, import { gone } from 'next/navigation' seems quite feasible.

[Sam7]

We have the very same need here.

I created a PR to add a Gone() option that works analogously to NotFound()
#78706

1. App Router Support:

   • New gone() function in the next/navigation module
   • New gone.js file convention for customizing the 410 error page
   • Consistent behavior with other error handling patterns

2. Pages Router Support:

   • Added support for returning { gone: true } from data fetching functions
   • Custom /410 page support similar to /404 page

3. API Route Support:

   • Guidance for returning 410 status from API routes

Documentation

• Added comprehensive documentation for the feature
• Added examples for both App Router and Pages Router implementations
• Added error documentation for invalid combinations (e.g., gone + redirect)

Tests

The PR includes:

• Unit tests for the gone() function
• Integration tests for Pages Router implementation
• E2E tests for App Router implementation
• Tests for browser navigation behavior
• Error validation tests

Example Usage

App Router

import { gone } from 'next/navigation'

export default function PostPage({ params }) {
  // Check if content has been deliberately removed
  if (isDeleted(params.slug)) {
    gone() // Returns 410 Gone status
  }
  
  // Continue rendering content...
}

Pages Router

export async function getServerSideProps({ params }) {
  // Check if content has been deliberately removed
  if (isDeleted(params.id)) {
    return { gone: true } // Returns 410 Gone status
  }
  
  return { props: { /* ... */ } }
}

[abid-salahi]

This is the best way and hope it gets added in asap. We really need it.

[marjorg]

@ztanner Would you be able to take a look at the PR for this since you are behind a related RFC (#73753)?

[bugignat]

@Sam7 gj man, I hope it will be approved
p.s. the most anticipated feature since the app router was released 🫠

[uglyrobot]

merge merge!

[alexanderbnelson]

Let's go Next team. Desperately need this one! 15.4 please!