How to Fix Soft 404 Errors and Create a Custom 404 Page in Next.js 14

When I first came across an email alert from Google Search Console about soft 404 errors on the website built with Next.js 14, I had no idea what they were and what I was expected to do to fix them. I only knew about regular 404 errors! As I learned afterward, Soft 404 errors typically affect dynamically rendered content and can harm your SEO efforts and user experience.

In this article, I'll cover:

1. What soft 404 errors are and why they shouldn't be ignored.
2. How I fixed the soft 404 issues on my Next.js site.
3. A simple guide to creating a custom 404 page in Next.js 14.

---

What Is a Soft 404 Error?

According to Google Search Central, a soft 404 occurs when a server responds with a 200 OK status code for a page that doesn't exist instead of a 404 Not Found.
This confuses Google because the page is marked as valid (via the 200 status code), but it lacks meaningful content for users.

Common Causes of Soft 404 Errors

• Pages with weak or no content.
• Duplicate pages.
• Outdated or broken links.
• URL typos or misspellings.
• Incorrect server configurations.

---

Why Should You Fix Soft 404 Errors?

Leaving soft 404 errors unresolved can lead to:

1. SEO Damage
   o Search engines waste their crawl budget rechecking invalid pages instead of indexing valid ones.
   o Reduced visibility as your site's structure appears unreliable.

2. Poor User Experience
   o Visitors encountering blank or broken pages lose trust in your site.
   o Websites that depend on customer interaction may experience higher bounce rates.

---

How I Fixed Soft 404 Errors in My Next.js Site

Here’s the step-by-step approach I took to resolve the issue flagged by Google Search Console:

1. Investigate the Issue
   Using the Google Search Console report, I identified that the flagged pages were:
   • Deleted static pages from a previous setup.
   • Pages deleted from the CMS (Content Management System) but still indexed by Google.
   If you do not have Google Search Console linked to your site, tools like Screaming Frog can help identify soft 404s.

2. Remove Redundant Static Pages
   In Next.js, static files located in the /pages directory are automatically treated as valid pages. I found several outdated files that were no longer linked to the site’s navigation. I deleted these files to prevent Google from attempting to index them. Alternatively, you can configure your server to return the appropriate 404 or 410 Gone status codes for such pages.

3. Redirect Missing Dynamic Content
   For pages relying on CMS data, I implemented logic to redirect users to a custom 404 page if the requested data was missing. Here's a simplified version of the code:

Best Practices for Preventing Soft 404 Errors

1. Enhance Weak Content Pages with minimal content can be flagged as soft 404s. Ensure you have engaging and high-quality content that meets search engine standards.
2. Return Correct HTTP Status Codes If a page doesn’t exist, ensure your server or API returns a 404 status code. For example, in Next.js:

1. Set Up Redirects for Moved Pages If a page is permanently removed or moved, use a 301 redirect to send users and search engines to the correct page. This tells them the content has a new permanent location.
2. Use Robots.txt to Manage Crawling Disallow bots from crawling pages you don’t want indexed (e.g., admin panels or outdated URLs).
3. Monitor Regularly Make it a habit to check Google Search Console or other SEO tools for new soft 404 errors and fix them promptly.

---

Creating a Custom 404 Page in Next.js 14

A custom 404 page enhances your brand and guides lost users back to your site. In Next.js, create a pages/404.js file for file-based routing or app/not-found.js for app routing:

File-Based Routing

App Routing

Style the page to align with your site’s branding and consider adding search functionality or links to popular pages.

---

Conclusion

Soft 404 errors can undermine your site’s SEO and user trust. Identifying and fixing these errors with redirects, better content, and a custom 404 page keeps your site user-friendly, and optimized for search engines.

Further Reading

• How We Fix and Prevent Soft 404 on Google Search Console: Our Comprehensive Guide
• What Are Soft 404s and How to Fix Them
• Nextjs Custom Errors