What are HTTP Status Codes?

HTTP response status codes indicate whether a specific HTTP request has been successfully completed. There are many status codes, but only a handful are meaningful in an SEO context. Let's take a look at them now.

200

In order for a page to be indexed on Google it must return status code 200. This is what you typically want to look for in your pages in order for them to receive organic traffic.

This is the default code that will be set when Next.js renders a page successfully.

301/308

This is a permanent redirect. In general, this is the most widely used redirect type.

Redirects can be used for a variety of reasons, but the main one is to indicate that a URL has been moved from point A to point B.

Redirects are needed to ensure that, if a content is moved from one place to the other, you do not lose current and potential clients and that the bots can continue to index your site.

The main difference between the two status codes is that a 301 allows for changing the request method from POST to GET, whereas a 308 does not.

You can trigger a 308 redirect in Next.js by returning a redirect instead of props in the `getStaticProps()` function.

//  pages/about.js
export async function getStaticProps(context) {
  return {
    redirect: {
      destination: '/',
      permanent: true, // triggers 308
    },
  };
}

You can also use the permanent: true key in redirects set in next.config.js.

//next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true, // triggers 308
      },
    ];
  },
};

302

In most cases, 302 redirects should be 301 redirects. This may not be the case if you are redirecting users temporarily to a certain page (e.g. a promotion page) or if you are redirecting users based on location.

404

As noted above, pages that are moved should be redirected with a HTTP 301 status code to the new location. When this doesn't happen, URLs may return a 404 status code.

404 Status Codes are not necessarily bad by default, as it's the desired outcome if a user happens to visit a URL that doesn't exist, but they shouldn't be a frequent error within your pages as it could lead to lackluster search rankings.

Next.js will automatically return a 404 status code for URLs that do not exist in your application.

In some cases, you might also want to return a 404 status code from page. You can do this by returning the following in place of props:

export async function getStaticProps(context) {
  return {
    notFound: true, // triggers 404
  };
}

You can create a custom 404 page that is statically generated at build time by creating pages/404.js.

Example:

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}

410

This is not used very often, but you might want to look for this status code if you are deleting content on your website that won't exist any more.

Examples where a HTTP 410 Gone might be wise to use include:

• E-Commerce: Products permanently removed from inventory.
• Forum: Threads that have been deleted by the user.
• Blog: Blog post removed from site.

This status code informs bots that they should never return to crawl this content.

500

Next.js will automatically return a 500 status code for an unexpected application error. You can create a custom 500 error page that is statically generated at build time by creating pages/500.js.

Example:

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>;
}

503

It's recommended to return this status code when your website is down and you predict that the website will be down by an extended period of time. This prevents losing rankings on a long-term basis.