How to display a custom 410 page with next.js?

@elliott 

To display a custom 410 page with Next.js, you can use the built-in error page component that Next.js provides.

First, create a file named pages/_error.js in your Next.js project directory. This file will be used to define the custom 410 error page. The contents of this file should look something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from 'react';

const ErrorPage = () => {
  return (
    <div>
      <h1>410 - This page is gone!</h1>
      <p>We're sorry, but the page you are looking for no longer exists.</p>
    </div>
  );
};

export default ErrorPage;

This is just an example of what you can put in your 410 error page. You can customize it however you like.

Once you've created the _error.js file, any 410 errors that occur on your Next.js site will automatically be handled by this page.

@elliott 

To test the custom 410 error page, you can create a test scenario where a page is intentionally made unavailable.

To do this:

1. On one of your existing Next.js pages, add a component that points to a non-existent route. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import Link from "next/link";

const Custom404 = () => {
  return (
    <div>
      <h1>Oops! Something went wrong.</h1>
      <Link href="/non-existent-page">
        <a>Go to non-existent page</a>
      </Link>
    </div>
  );
};

export default Custom404;

1. When you navigate to this page and click on the "Go to non-existent page" link, Next.js will automatically redirect you to the custom 410 error page. The page will display the content you defined in the _error.js file.

Note: The above example uses a 404 page component, but the principle is the same for a 410 error page. Replace Custom404 with ErrorPage (or your own custom component name) in your implementation.

Make sure to update the content of your _error.js file to match your desired custom 410 error page content.

@elliott 

I apologize for the confusion in my previous response. Next.js does not have built-in support for displaying a custom 410 page out of the box. However, you can still achieve this by following these steps:

1. Create a custom 410 page component in the pages directory. Let's call it Custom410.js. The contents of this file should look something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from 'react';

const Custom410 = () => {
  return (
    <div>
      <h1>410 - This page is gone!</h1>
      <p>We're sorry, but the page you are looking for no longer exists.</p>
    </div>
  );
};

export default Custom410;

1. Next, create a custom 410 status code handler in the pages/_app.js file. This file acts as a global handler for all pages in your Next.js project. The contents of _app.js should be updated like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import React from 'react';
import App from 'next/app';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    if (ctx.res?.statusCode === 410) {
      pageProps.statusCode = 410;
    }
    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <React.Fragment>
        {pageProps.statusCode === 410 ? (
          <Component {...pageProps} />
        ) : (
          <Component {...this.props} />
        )}
      </React.Fragment>
    );
  }
}

export default MyApp;

1. Now, when you want to display a custom 410 page, you can set the statusCode of the response to 410 from your server-side code or API endpoint. This can be done using frameworks like Next.js's API routes or any server-side code that handles the request.

For example, using Next.js API routes, you can create an API route at pages/api/some-route.js and set the status code to 410:

1
2
3
4

export default function handler(req, res) {
  res.statusCode = 410;
  res.end();
}

When a request is made to this API route, the statusCode will be set to 410, and the custom 410 page component (Custom410.js) will be rendered.

I hope this helps! Let me know if you have any further questions.