Handling HTTP 410 (Gone) Status in Next.js App Router: Workarounds for Second-hand Marketplaces

In the digital marketplace, the HTTP 410 (Gone) status code plays a crucial role in indicating that an item is no longer available. For second-hand marketplace platforms like Vinted or similar e-commerce sites, returning a 410 status is essential for Search Engine Optimization (SEO); it signals to search engines that the content has been permanently removed and should be deindexed.

The Challenge

Implementing a Next.js page using App Router that returns a 410 status may seem straightforward, but it poses a challenge due to the current limitations of Next.js App Router. The typical flow would be fetching data from your backend service, and if the backend returns a 410 status, displaying a 410 page on the frontend. However, Next.js App Router does not support forcing a 410 status code.

Workaround 1: Custom Express.js Server

If your application uses a custom server like Express.js, this is the best workaround I've found. The strategy involves calling Next.js's notFound() function when the backend returns 410 at the Next.js page level. At the Express.js level, intercept the 404 and override it to 410.

Implementation

In your Next.js page, when your backend returns 410, call Next.js's notFound() function. At the Express.js level, intercept the statusCode property to change 404 to 410.

Workaround 2: Using Next.js Middleware (proxy.ts)

If you don't have a custom server or prefer not to add that logic to your server, here's an alternative approach using Next.js middleware. The proxy/middleware is called before the React Server Component logic executes. The idea is to check the content status in the middleware and rewrite to an error page with 410 status if it returns 410.

Caveat

Everything works well, but there's a significant drawback: you need to make the same API call twice - first in the middleware/proxy to check the status, and again in the page component to fetch the actual data.

Relevance to Northeast India and Broader Indian Context

The e-commerce industry in Northeast India is growing rapidly, and second-hand marketplaces are becoming increasingly popular. Properly handling HTTP status codes like 410 is essential for providing a seamless user experience and ensuring search engine visibility. Understanding these workarounds can help developers in the region create more efficient and effective e-commerce platforms.

Reflections and Future Directions

These workarounds can help you properly handle 410 responses in your marketplace or e-commerce applications until Next.js provides native support for custom status codes. I invite developers in the Northeast region and beyond to share their experiences, alternative solutions, and preferred workarounds. Let's continue the conversation and collaborate to improve the e-commerce landscape in India.